מסגרות מדיה

דרק הרמן

יש כמה דרכים להוסיף מדיה לדף אינטרנט. בעבר למדתם איך להשתמש בתג <video> הרגיל. במאמר הזה נלמד על כמה מהמסגרות (או הספריות) של המדיה הזמינות, שבהן ניתן להשתמש כדי להרחיב או להחליף את ההתנהגות של נגן הווידאו מסוג HTML5 שמוגדר כברירת מחדל.

מסגרות מדיה קיימות גם בתחום הקנייני וגם בקוד פתוח, וממשק הליבה שלהן הוא קבוצה של ממשקי API שתומכים בהפעלת אודיו ו/או וידאו עבור פורמטים שונים של קונטיינרים ופרוטוקולי העברה. למסגרת טובה יש ארכיטקטורה מודולרית והיא מספקת תיעוד ברור ומפורט. אידיאלית, היא גם אמורה להיות קלה להגדרה ולשימוש. ייתכן שאתם שואלים את עצמכם, "אם נגן הווידאו HTML5 מספק את רוב התכונות כבר, אז למה כדאי להשתמש ב-framework או בספרייה?" זו שאלה מצוינת, בוא ניכנס לעומק.

יתרונות השימוש במסגרת

ברוב המקרים, מעבר לצרכים של דף אינטרנט בסיסי, תרצו להשתמש במסגרת מדיה כדי להציג את התוכן שלכם. אלא אם אתם מוכנים לפתח ולתחזק מערך תכונות עשיר כמו הפעלה במצב אופליין, סטרימינג, ניתוח נתונים, תמונה בתוך תמונה, תמונות ממוזערות של תצוגה מקדימה, הטמעה ומונטיזציה, כמו אופטימיזציה של קצב המילוי, תזמון הצגת המודעות או בידינג ב-header, סביר להניח שעדיף להוריד את המורכבות הזו מפתרון קיים.

כאן נכנסים לתמונה מסגרות המדיה. הם מספקים קבוצת תכונות ותנאים שבהם תוכלו להשתמש בתכונות האלו, ולאחר מכן תצטרכו להחליט איזו מסגרת מתאימה לפרויקט שלכם. במאמר הבא נסביר איך יצרנו PWA עם סטרימינג אופליין שמטמיעה כמה תכונות מורכבות. התראת ספוילר, זה היה הרבה עבודה, וזה עדיין לא פתרון שמוכן להפקה. חוסכים לעצמכם כאב ראש והשתמשו במסגרת.

יש הרבה אפשרויות לבחירה, ובשלב זה המאמר יתמקד בשלוש מהן: Shaka Player, JW Player ו-Video.js.

נגן Shaka

לפי המסמכים, Shaka Player של Google היא ספריית קוד פתוח JavaScript למדיה מותאמת. הוא מפעיל פורמטים של מדיה מותאמת (כמו DASH ו-HLS) בדפדפן, בלי להשתמש ביישומי פלאגין. במקום זאת, ב-Shaka Player נעשה שימוש בתקני האינטרנט הפתוחים תוספי MediaSource ותוספי מדיה מוצפנים.

ב-Shaka Player יש תמיכה גם באחסון והפעלה אופליין של מדיה באמצעות IndexedDB. ניתן לאחסן תוכן בכל דפדפן. נפח האחסון של הרישיונות תלוי בתמיכה בדפדפן.

באתר התיעוד של Shaka Player יש הוראות לשימוש בסיסי. עם זאת, על קצה המזלג כדי להשתמש בנגן Shaka Player, תחילה עליך ליצור דף HTML עם רכיב וידאו או אודיו. לאחר מכן, ב-JavaScript של האפליקציה, מתקינים את ה-polyfills ובודקים אם יש תמיכה בדפדפן. אחרי שהדפדפן יאשר תמיכה ב-Shaka Player, סקריפט ייצור אובייקט של Player שיעטוף את רכיב המדיה, יאזין לשגיאות ויטען קובץ מניפסט. הנגן של Shaka יעבור משם.

עם Shaka תצטרכו לארח ולקודד את קובצי המדיה בעצמכם. יצירת שרת מדיה לא מורכבת מדי, אבל הקידוד/המרת הקידוד של מדיה יכולה להיות משימה מורכבת וגוזלת זמן רב. סביר להניח שתרצו להוריד את החלק הזה מחלק זה לשירות כמו Zencoder, Amazon Elastic Encoder או Google Transcoder API, כדי להפוך משימות שחוזרות על עצמן ולזרז את התהליך.

היתרון הנהדר של Shaka 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 הוא נגן וידאו חזק מאוד, ובדומה ל-shaka Player, תצטרכו גם לארח ולקודד את הסרטון. עם זאת, הבדל אחד הוא במערכת הפלאגין, שבה ניתן לבצע פעולות כמו הפעלת סרטוני YouTube בנגן Video.js, שניתנים גם להתאמה אישית.

מסגרות אחרות

יש הרבה מסגרות וספריות שונות, ומאמר זה רק בודק את האפשרויות הקיימות. כשאתם בוחרים framework, כדאי לחשוב אילו תכונות נדרשות לפרויקט ואיך אתם מתכננים לארח ולקודד או להמיר את הקידוד של המדיה. האם יש לכם צורך במודעות לפני סרטון או באסטרטגיות מונטיזציה אחרות? האם המדיה תהיה זמינה במצב אופליין? עד כמה התקציב שלכם גדול או קטן? או כל מספר אחר של שיקולים. בדקו את העניין ובקשו הצעות מאנשים ברשת שלכם. יש עוד עשרות אפשרויות נהדרות, ולפני שאתם בוחרים אפשרות כזו, צריך להקדיש זמן כדי לבחור את זו שתתאים לצוות שלכם, ולהימנע מיצירת חוב טכני או מורכבות מיותרים לניהול במהלך מחזור החיים של הפרויקט.

בשלב הבא נלמד על PWA עם סטרימינג אופליין שפיתחנו כדי להדגים איך לגשת לאתגרים המרכזיים שכרוכים בהפעלת הפתרון שלכם עם אובייקט וידאו HTML5 בלבד, ללא מסגרת לטיפול במאמץ הקשה.