התגים <video> ו-<מקור>

Derek Herman

Joe Medley

Sam Dutton

הכנתם קובץ וידאו בצורה נכונה לאינטרנט. ציינתם את המימדים והרזולוציה הנכונים. יצרתם אפילו קבצים נפרדים בפורמט WebM ובפורמט MP4 לדפדפנים שונים.

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

ציון קובץ יחיד

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

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

ציון מספר פורמטים של קבצים

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

הדוגמה הבאה יוצרת את הסרטון המוטמע שמשמש כדוגמה בהמשך המאמר.

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

רוצים לנסות ב-Glitch?

תמיד צריך להוסיף מאפיין type לאירוע התגים <source>, אבל זה אופציונלי. כך מוודאים שהדפדפן מוריד רק את הקובץ שהוא יכול להפעיל.

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

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

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

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

הגדרה של זמני התחלה וסיום

חיסכון ברוחב הפס ושיפור המהירות של האתר: השתמשו בקטעי מדיה כדי להוסיף זמני התחלה וסיום לרכיב הווידאו.

כדי להשתמש בחלק ממדיה, מוסיפים את הערך #t=[start_time][,end_time] לכתובת ה-URL של המדיה. לדוגמה, כדי להפעיל את הסרטון מהשניות 5 עד 10, מציינים:

<source src="video/chrome.webm#t=5,10" type="video/webm">

אפשר גם לציין את השעות ב-<hours>:<minutes>:<seconds>. לדוגמה, הערך #t=00:01:05 מפעיל את הסרטון בדקה החמישית. כדי להפעיל רק את הדקה הראשונה של הסרטון, מציינים #t=,00:01:00.

אתם יכולים להשתמש בתכונה הזו כדי להציג כמה תצוגות של אותו סרטון – כמו נקודות עצירה ב-DVD – בלי שתצטרכו לקודד ולספק כמה קבצים.

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

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

הוספת תמונת פוסטר

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

<video poster="poster.jpg" ...>
  …
</video>

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

מה אסור לעשות

בלי תמונת סטטית חלופית, הסרטון פשוט נראה שבור.

מה מותר לעשות

פוסטר חלופי יוצר אשליה כאילו הפריים הראשון תועד.

מוודאים שהסרטונים לא יחרגו מעבר לקופסאות

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

אפשר לקבוע את ממדי הסרטון באמצעות CSS. אם CSS לא עונה על כל הצרכים שלכם, תוכלו להיעזר בספריות ובפלאגינים של JavaScript, כמו FitVids, גם בסרטונים מ-YouTube וממקורות אחרים. לצערנו, המשאבים האלה יכולים להגדיל את הגדלים של עומסי התנועה (payload) ברשת, עם השלכות שליליות על ההכנסות ועל הכיס של המשתמשים.

לשימושים פשוטים כמו אלה שאני מתאר כאן, כדאי להשתמש בשאילתות מדיה מסוג CSS כדי לציין את גודל הרכיבים בהתאם למאפייני חלון התצוגה. max-width: 100% הוא החבר שלכם.

בתוכן מדיה ב-iframe (כמו סרטוני YouTube), כדאי לנסות גישה רספונסיבית (כמו זו שמוצעת על ידי ג'ון סורדוקובסקי).

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  ></iframe>
</div>

רוצים לנסות?

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

הכיוון שאליו פונה המכשיר

כיוון המכשיר לא מהווה בעיה במסכים למחשבים נייחים או במחשבים ניידים, אבל הוא חשוב מאוד כשמתכננים דפי אינטרנט למכשירים ניידים ולטאבלטים.

ב-Safari לאייפון קל לעבור בין תצוגה לאורך לתצוגה לרוחב:

כיוון המכשיר ב-iPad וב-Chrome ל-Android עלול לגרום לבעיות. לדוגמה, ללא התאמה אישית, סרטון שפועל ב-iPad במצב לרוחב נראה כך:

הגדרת width: 100% או max-width: 100% של הסרטון באמצעות CSS יכולה לפתור הרבה בעיות שקשורות לפריסה של כיוון המכשיר.

הפעלה אוטומטית

המאפיין autoplay קובע אם הדפדפן יוריד ויפעל סרטון באופן מיידי. האופן המדויק שבו התכונה פועלת תלוי בפלטפורמה ובדפדפן.

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

• Firefox: החסימה כוללת את כל הסרטונים והצלילים, אבל המשתמשים יכולים להסיר את ההגבלות האלה לכל האתרים או לאתרים מסוימים. למידע נוסף, ראו אישור או חסימה של הפעלה אוטומטית של מדיה ב-Firefox

• Safari: בעבר נדרשה מחווה של המשתמש, אבל הדרישה הזו הופחתה בגרסאות האחרונות. פרטים נוספים זמינים במאמר מדיניות חדשה בנושא <video> ל-iOS.

גם בפלטפורמות שבהן אפשר להפעיל הפעלה אוטומטית, כדאי לשקול אם כדאי להפעיל אותה:

• השימוש בנתונים יכול להיות יקר.
• הפעלת מדיה לפני שהמשתמש רוצה יכולה לנצל את כל רוחב הפס ואת המעבד, וכך לעכב את עיבוד הדף.
• יכול להיות שהמשתמשים נמצאים בהקשר שבו הפעלת וידאו או אודיו מפריעה.

טעינה מראש

המאפיין preload מספק לדפדפן רמז לגבי כמות המידע או התוכן שצריך לטעון מראש.

למאפיין preload יש השפעות שונות בפלטפורמות שונות. לדוגמה, ב-Chrome נשמרים בזיכרון 25 שניות של סרטון במחשב, אבל לא ב-iOS או ב-Android. כלומר, בנייד יכולים להיות עיכובים בהפעלת ההפעלה שלא מתרחשים במחשב. פרטים נוספים זמינים במאמר הפעלה מהירה עם טעינת אודיו וסרטונים מראש או בבלוג של Steve Souders.

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