הכנתם קובץ וידאו שמתאים לאינטרנט. הגדרתם את המידות והרזולוציה הנכונות. אפילו יצרתם קובצי 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="chrome.webm" type="video/webm">
<source src="chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
תמיד צריך להוסיף מאפיין type לתגי <source>, למרות שהוא אופציונלי. כך הדפדפן יוריד רק את הקובץ שהוא יכול להפעיל.
לגישה הזו יש כמה יתרונות על פני הצגת HTML שונה או סקריפטים בצד השרת, במיוחד בניידים:
- אתם יכולים להציג את הפורמטים לפי סדר העדיפויות שלכם.
- החלפה בצד הלקוח מקצרת את זמן האחזור, כי נשלחת רק בקשה אחת לקבלת תוכן.
- אם מאפשרים לדפדפן לבחור פורמט, זה פשוט ומהיר יותר, ויכול להיות שזה גם אמין יותר מאשר שימוש במסד נתונים של תמיכה בצד השרת עם זיהוי של סוכן המשתמש.
- ציון הסוג של כל מקור קובץ משפר את ביצועי הרשת. הדפדפן יכול לבחור מקור וידאו בלי להוריד חלק מהסרטון כדי "לרחרח" את הפורמט.
הבעיות האלה חשובות במיוחד בהקשרים של מכשירים ניידים, שבהם רוחב הפס והזמן הנדרש לאחזור נתונים הם קריטיים, וסביר להניח שהסבלנות של המשתמשים מוגבלת. אם לא משתמשים במאפיין type, זה יכול להשפיע על הביצועים כשיש כמה מקורות עם סוגים לא נתמכים.
יש כמה דרכים לבדוק את הפרטים. במאמר A Digital Media Primer for Geeks מוסבר בהרחבה איך וידאו ואודיו פועלים באינטרנט. אתם יכולים גם להשתמש בניפוי באגים מרחוק בכלי הפיתוח כדי להשוות בין פעילות ברשת עם מאפייני סוג לבין פעילות ברשת בלי מאפייני סוג.
הגדרה של זמני התחלה וסיום
כדי לחסוך ברוחב פס ולשפר את התגובה של האתר, אפשר להשתמש בקטעי מדיה כדי להוסיף זמני התחלה וסיום לרכיב הווידאו.
כדי להשתמש בקטע מדיה, מוסיפים #t=[start_time][,end_time] לכתובת ה-URL של המדיה. לדוגמה, כדי להפעיל את הסרטון משנייה 5 עד שנייה 10, מציינים:
<source src="chrome.webm#t=5,10" type="video/webm">
אפשר גם לציין את השעות ב-<hours>:<minutes>:<seconds>. לדוגמה,
#t=00:01:05 מפעיל את הסרטון בדקה אחת ו-5 שניות. כדי להפעיל רק את הדקה הראשונה של הסרטון, מציינים #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: בעבר נדרשה תנועה של המשתמש, אבל בגרסאות האחרונות הדרישה הזו פחות מחמירה. פרטים נוספים זמינים במאמר New <video> Policies for iOS.
גם בפלטפורמות שבהן אפשר להפעיל את הסרטון באופן אוטומטי, כדאי לשקול אם זה רעיון טוב:
- השימוש בחבילת הגלישה יכול להיות יקר.
- הפעלת מדיה לפני שהמשתמש רוצה בכך עלולה לצרוך רוחב פס ו-CPU, וכתוצאה מכך לעכב את עיבוד הדף.
- יכול להיות שהמשתמשים נמצאים במקום שבו הפעלת וידאו או אודיו תפריע להם או לסביבה.
טעינה מראש
המאפיין preload מספק רמז לדפדפן לגבי כמות המידע או התוכן שצריך לטעון מראש.
| ערך | תיאור |
|---|---|
none |
יכול להיות שהמשתמש יבחר לא לצפות בסרטון, אז אל תטענו מראש שום דבר. |
metadata |
צריך לטעון מראש את המטא-נתונים (משך, מידות, טראקים של טקסט), אבל עם מינימום סרטון. |
auto |
הורדה של הסרטון כולו באופן מיידי נחשבת לרצויה. מחרוזת ריקה מניבה את אותה תוצאה. |
למאפיין preload יש השפעות שונות בפלטפורמות שונות.
לדוגמה, Chrome שומר במאגר נתונים זמני 25 שניות של וידאו במחשב, אבל לא ב-iOS או ב-Android. זה אומר שבנייד יכולים להיות עיכובים בהפעלת הסרטון שלא קורים במחשב. לפרטים נוספים, אפשר לעיין במאמר הפעלה מהירה באמצעות טעינה מראש של אודיו ווידאו או בבלוג של סטיב סודרס.
עכשיו, אחרי שלמדתם איך להוסיף מדיה לדף האינטרנט, הגיע הזמן ללמוד על נגישות של מדיה, שבה תוסיפו כתוביות לסרטון בשביל אנשים עם לקויות שמיעה, או למקרים שבהם אי אפשר להפעיל את האודיו.