התגים <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 עלולה להשפיע על הביצועים.

יש כמה דרכים להתעמק בפרטים. קראו את המאמר ADigital Media Primer for Geeks כדי לקבל מידע נוסף על האופן שבו וידאו ואודיו פועלים באינטרנט. אפשר גם להשתמש בניפוי באגים מרחוק בכלי הפיתוח כדי להשוות את הפעילות ברשת עם מאפייני סוג ובלי מאפייני סוג.

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

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

כדי להשתמש במקטע מדיה, צריך להוסיף #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% הוא חבר שלכם.

לגבי תוכן מדיה ב-iframes (כמו סרטונים ב-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 ב-iPhone מאפשר להחליף בין כיוון התצוגה לאורך לכיוון לרוחב:

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

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

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

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

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

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

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

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

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

טעינה מראש

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

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

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