התגים <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 עשויה להשפיע על הביצועים כשיש כמה מקורות עם סוגים לא נתמכים.

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

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

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

כדי להשתמש בחלק ממדיה, מוסיפים את הערך #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), נסו גישה רספונסיבית (כמו זו שמוצעת על ידי John Surdakowski).

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. המשמעות היא שבנייד, ייתכנו עיכובים בהפעלה שלא מתרחשים במחשב. למידע נוסף, ראו הפעלה מהירה עם טעינה מראש של אודיו ווידאו או הבלוג של סטיב Souders.

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