יש כמה דרכים להוסיף מדיה לדף אינטרנט. בעבר למדתם איך להשתמש בתג <video> הרגיל. במאמר הזה נפרט כמה מהספריות (או הספריות) המדיה הזמינות שאפשר להשתמש בהן כדי להרחיב או להחליף את ההתנהגות של נגן הווידאו HTML5 שמוגדר כברירת מחדל.
מסגרות מדיה מגיעות גם במגוון קנייני וגם בקוד פתוח, ובבסיסן הן קבוצה של ממשקי API שתומכים בהפעלת אודיו ו/או וידאו במגוון פורמטים של קונטיינרים ופרוטוקולים להעברה. ל-framework יש ארכיטקטורה מודולרית וגם מסמכים ברורים ומפורטים. באופן אידיאלי, ההגדרה צריכה להיות גם קלה יחסית לשימוש. סביר להניח ששאלתם את עצמכם: "אם נגן הווידאו בפורמט HTML5 כבר מספק את רוב התכונות, למה כדאי לי להשתמש במסגרת או בספרייה?" זו שאלה מצוינת, בואו נתעמק.
יתרונות השימוש ב-framework
ברוב המקרים שלא נחוצים לדף אינטרנט בסיסי, כדאי להשתמש במסגרת מדיה כדי להציג את התוכן. אלא אם אתם מוכנים לפתח ולתחזק מערך עשיר של פיצ'רים, כמו הפעלה במצב אופליין, סטרימינג, ניתוח נתונים, תמונה בתוך תמונה, תצוגה מקדימה של תמונות ממוזערות, הטמעה ומונטיזציה, כמו אופטימיזציה של קצב מילוי, תזמון מודעות או בידינג ב-header, למשל, מומלץ להסיר את המורכבות הזו לפתרון קיים.
כאן נכנסים לתמונה מסגרות המדיה. הם מספקים אוסף של תכונות ותנאים שבהם תוכלו להשתמש בתכונות האלה, ואז תצטרכו להחליט איזו מסגרת מתאימה לפרויקט שלכם. במאמר הבא נסביר איך יצרנו PWA עם סטרימינג אופליין שכוללת מספר תכונות מורכבות. אזהרת ספוילר, השקענו הרבה עבודה ועדיין קשה מאוד להיות פתרון מוכן לייצור. חוסכים כאב ראש ונעזרים במסגרת.
יש הרבה אפשרויות לבחור שמהן תוכלו לבחור, בינתיים המאמר הזה יתמקד בשלושה תחומים: Shaka Player, JW Player ו-Video.js.
נגן שאקה
לפי התיעוד, Shaka Player של Google הוא ספריית JavaScript בקוד פתוח למדיה דינמית. הוא מפעיל פורמטים של מדיה דינמית (כמו DASH ו-HLS) בדפדפן, בלי להשתמש ביישומי פלאגין. במקום זאת, Shaka Player משתמש בתקני האינטרנט הפתוחים בתוספי MediaSource ובתוספי מדיה מוצפנים.
Shaka Player תומך גם באחסון אופליין ובהפעלה של מדיה באמצעות IndexedDB. ניתן לשמור תוכן בכל דפדפן. נפח האחסון של הרישיונות תלוי בתמיכה של הדפדפן.
יש הוראות לשימוש בסיסי באתר התיעוד של Shaka Player. עם זאת, בקיצור כדי להשתמש בנגן Shaka, קודם צריך ליצור דף HTML עם רכיב וידאו או אודיו. לאחר מכן, ב-JavaScript של האפליקציה, מתקינים את ה-polyfills ובודקים אם יש תמיכה בדפדפן. אחרי שהדפדפן יאשר את התמיכה ב-Shaka Player, סקריפט ייצור אובייקט Player כדי לעטוף את רכיב המדיה, להאזין לשגיאות ולאחר מכן לטעון קובץ מניפסט. הנגן של Shaka יתחיל לפעול מהנקודה הזו.
עם Shaka תצטרכו לארח ולקודד את קובצי המדיה שלכם בעצמכם. היצירה של שרת מדיה לא מורכבת מדי, אבל התהליך של קידוד/המרת קידוד של מדיה יכול להיות מורכב ולגזול זמן רב. כדאי להסיר את החלק הזה על ידי שירות כמו Zencoder, Amazon Elastic Encoder או Google Transcoder API, כדי להפוך משימות שחוזרות על עצמן לאוטומטיות ולזרז את התהליך.
הדבר הנהדר ב-Saka Player הוא שיש גם כלי מעולה ו-SDK לאריזת מדיה עבור אריזות והצפנה של DASH ו-HLS בשם Shaka Packager. הוא יכול להכין ולארוז תוכן מדיה לסטרימינג אונליין, שעליו למדתם קודם לכן בהמרת מדיה ובהצפנת מדיה.
שחקן של JW
אם אתם מחפשים אפשרות שמספקת שירותי אירוח וקידוד/המרת קידוד, כדאי לבדוק את האפשרות JW Player, אבל חשוב לזכור ש-JW Player היא תוכנה קניינית. כלומר אין לכם הרבה שליטה על הפלטפורמה או על מפת הדרכים. יש גרסה חינמית בסיסית שבה הסרטונים מוצגים עם סימן מים, וגרסה מסחרית.
JW Player תומך בסטרימינג עם MPEG-DASH (בגרסה בתשלום בלבד), ניהול זכויות דיגיטלי (DRM) (עם Vualto), פרסומת אינטראקטיבית, התאמה אישית של הממשק והטמעות. יש API ו-SDK מתועדים היטב. עם זאת, אם אתם מחפשים דרך מהירה וחינמית לארח את המדיה שלכם, הטמעת סרטוני YouTube בדרך כלל תהיה האפשרות הטובה ביותר בשבילכם.
Video.js
לפי האתר שלהם, Video.js תוכנן מהיסוד בעולם של HTML5. הוא תומך בווידאו בפורמט HTML5 ובפורמטים מודרניים של סטרימינג כמו DASH ו-HLS, וכן ב-YouTube ו-Vimeo. הוא תומך בהפעלת סרטונים במחשבים ובניידים ונראה טוב בכל מקום עם סקינים שמבוססים על CSS.
יש כמה דרכים להשתמש ב-Video.js, אבל הדרך הקלה ביותר היא להשתמש בגרסת ה-CDN החינמית של Fastly. תוכלו למצוא מידע נוסף על הגדרת הנגן בדף תחילת העבודה. Video.js הוא נגן וידאו חזק מאוד, וכמו ב-Saka Player צריך גם לארח ולקודד את הסרטון. עם זאת, הבדל אחד הוא במערכת הפלאגין, שבה אפשר לבצע פעולות כמו הפעלת סרטוני YouTube בנגן Video.js, שניתן גם להתאים אישית.
מסגרות אחרות
יש הרבה ספריות ומסגרות שונות, והמאמר הזה רק מתחיל לטעות. כשבוחרים framework, צריך לשקול אילו תכונות צריך בפרויקט ואיך אתם מתכננים לארח ולקודד או להמיר את הקידוד של המדיה. האם נדרשות לך מודעות לפני סרטון או שיטות מונטיזציה אחרות? האם המדיה תהיה זמינה במצב אופליין? מה הגודל או הקטן של התקציב שלך? או כל מספר אחר של שיקולים. כדאי לבדוק את הנושא ולבקש הצעות מאנשים ברשת. יש עוד עשרות אפשרויות נהדרות, ולפני שאתם מקבלים החלטה, כדאי להקדיש זמן כדי לבחור את זו שתתאים לצוות שלכם, וכך להימנע מיצירת חוב טכני מיותר או מורכבות שצריך לשמור במהלך מחזור החיים של הפרויקט.
בשלב הבא, תלמדו על PWA עם סטרימינג אופליין שפיתחנו כדי להדגים איך לגשת לאתגרים העיקריים של גלילת פתרון משלכם באמצעות אובייקט וידאו בפורמט HTML5 ללא מסגרת כדי להדגים את העבודה הקשה.