יש כמה דרכים להוסיף מדיה לדף אינטרנט. למדתם קודם איך להשתמש בתג <video> הרגיל. במאמר הזה נסביר על כמה מסגרות מדיה (או ספריות) זמינות שאפשר להשתמש בהן כדי להרחיב או להחליף את ההתנהגות של נגן הווידאו שמוגדר כברירת מחדל ב-HTML5.
יש frameworks של מדיה בבעלות פרטית וגם בקוד פתוח, והם כוללים בעיקר קבוצה של ממשקי API שתומכים בהפעלת אודיו ו/או וידאו בפורמטים שונים של קונטיינרים ובפרוטוקולים שונים להעברה. למסגרת טובה יש ארכיטקטורה מודולרית ומסמכי תיעוד ברורים ומפורטים. רצוי שההגדרה והשימוש בה יהיו יחסית פשוטים. יכול להיות שתתהו: "אם נגן הווידאו של HTML5 כבר מספק את רוב התכונות, למה כדאי להשתמש בספרייה או ב-framework?" שאלה מצוינת, נענה עליה.
היתרונות של שימוש במסגרת
ברוב המקרים שבהם הדרישות חורגות מאלה של דף אינטרנט בסיסי, כדאי להשתמש במסגרת מדיה כדי להציג את התוכן. אם אתם לא מוכנים לפתח ולתחזק קבוצה עשירה של תכונות כמו הפעלה אופליין, סטרימינג, ניתוח נתונים, תמונה בתוך תמונה, תמונות ממוזערות של תצוגה מקדימה, הטמעה ומונטיזציה (למשל, אופטימיזציה של שיעור המילוי, תזמון מודעות או בידינג בכותרת, רק כדי לציין כמה דוגמאות), מומלץ להעביר את המורכבות הזו לפתרון קיים.
כאן נכנסות לתמונה מסגרות מדיה. הם מספקים לכם קבוצה של תכונות ותנאים שבהם תוכלו להשתמש בתכונות האלה, ואז אתם צריכים להחליט איזו מסגרת מתאימה לפרויקט שלכם. במאמר הבא נסביר איך פיתחנו אפליקציית PWA עם סטרימינג אופליין שמטמיעה כמה תכונות מורכבות. ספוילר: זה היה הרבה עבודה, והפתרון עדיין רחוק מלהיות מוכן לייצור. כדי לחסוך את כאב הראש, כדאי להשתמש במסגרת.
יש הרבה אפשרויות לבחירה, אבל במאמר הזה נתמקד בשלוש: Shaka Player, JW Player ו-Video.js.
Shaka Player
לפי המסמכים, Shaka Player של Google היא ספריית JavaScript בקוד פתוח למדיה אדפטיבית. הוא מאפשר להפעיל ב-browser פורמטים של מדיה אדפטיבית (כמו DASH ו-HLS) בלי להשתמש בפלאגינים. במקום זאת, Shaka Player משתמש בתקני האינטרנט הפתוחים MediaSource Extensions ו-Encrypted Media Extensions.
ב-Shaka Player יש גם תמיכה באחסון והפעלה אופליין של מדיה באמצעות IndexedDB. אפשר לאחסן תוכן בכל דפדפן. האחסון של הרישיונות תלוי בתמיכה בדפדפן.
הוראות לשימוש בסיסי זמינות באתר המסמכים של Shaka Player. עם זאת, בקצרה, כדי להשתמש ב-Shaka Player צריך קודם ליצור דף HTML עם רכיב וידאו או אודיו. לאחר מכן, ב-JavaScript של האפליקציה, מתקינים את ה-polyfills ובודקים אם יש תמיכה בדפדפנים. אחרי שהדפדפן יאשר תמיכה ב-Shaka Player, סקריפט ייצור אובייקט Player כדי לעטוף את רכיב המדיה, יקשיב לשגיאות ולאחר מכן יטמיע קובץ מניפסט. משם, Shaka Player ימשיך.
ב-Shaka תצטרכו לארח את קובצי המדיה שלכם ולקודד אותם בעצמכם. יצירת שרת מדיה היא לא מורכבת במיוחד, אבל קידוד או המרת קידוד של מדיה יכולים להיות זמן רב ומסובכים. מומלץ להעביר את החלק הזה לשירות כמו Zencoder, Amazon Elastic Encoder או Google Transcoder API כדי להפוך משימות חוזרות לאוטומטיות ולהאיץ את התהליך.
היתרון הגדול של Shaka Player הוא שיש גם כלי מעולה ו-SDK לאריזת מדיה לאריזה ולהצפנה של DASH ו-HLS שנקרא Shaka Packager. הוא יכול להכין ולארז תוכן מדיה לשידור אונליין, כפי שמתואר בקטע המרת מדיה ובקטע הצפנת מדיה.
JW Player
אם אתם מחפשים אפשרות שמספקת שירותי אירוח וקידוד/טרנסקודינג, כדאי לכם לבדוק את 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 הוא נגן וידאו חזק מאוד, וכמו Shaka Player, תצטרכו גם לארח את הסרטון ולקודד אותו. עם זאת, יש הבדל אחד במערכת הפלאגין, שבה אפשר לבצע פעולות כמו הפעלת סרטוני YouTube בנגן Video.js, שאפשר גם להתאים אישית.
מסגרות אחרות
יש הרבה מסגרות וספריות שונות, והמאמר הזה רק מתייחס לחלק מהן. כשאתם בוחרים מסגרת, כדאי להביא בחשבון את התכונות שאתם צריכים לפרויקט ואת האופן שבו אתם מתכננים לארח את המדיה ולקודד או להמיר אותה. האם אתם צריכים מודעות לפני סרטון (pre-roll) או שיטות מונטיזציה אחרות? האם התוכן יהיה זמין במצב אופליין? מהו גודל התקציב שלכם? או כל שיקול אחר. כדאי לערוך מחקר ולבקש הצעות מאנשים ברשת שלכם. יש עוד עשרות אפשרויות מצוינות, ולפני שמקבלים החלטות, כדאי להקדיש זמן כדי לבחור את האפשרות שמתאימה לצוות שלכם, וכך להימנע מיצירת חובות טכניים מיותרים או ממורכבות מיותרת בתחזוקה במהלך מחזור החיים של הפרויקט.
בהמשך, נסביר על אפליקציית ה-PWA עם סטרימינג אופליין שיצרנו כדי להדגים איך להתמודד עם האתגרים העיקריים שקשורים ליצירת פתרון משלכם באמצעות אובייקט הווידאו של HTML5 בלבד, בלי מסגרת שתעזור לכם לבצע את העבודה הקשה.