לימוד סרטון בסיסי. הגברת המעורבות.
אתם שוקלים להוסיף סרטונים לאתר? ככל שמכשירים וחיבורי רשתות הפכו למהירים וחזקים יותר, אפשר להתקדם מעבר לתמונות ולהוסיף וידאו לארגז הכלים של שיטות לבניית האינטרנט. מחקרים מראים שאתרים עם וידאו מובילים לשיעורי מעורבות גבוהים יותר ולמכירות גבוהות יותר. כך שגם אם עדיין לא הוספתם סרטון לאתרים שלכם, זה רק עניין של זמן עד שתעשו זאת.
סביר להניח שקובצי הווידאו שתוסיפו לאתר יהיו הקבצים הגדולים ביותר שאתם מורידים. לכן חשוב מאוד לוודא שהקבצים ערוכים להפעלה מהירה ויציבה עבור כל הלקוחות.
אומנם סרטונים יכולים להגביר את המעורבות ולהגביר את שביעות הרצון של הלקוחות, אבל סרטון שלא מופעל או מושהה במהלך ההפעלה יכול לגרום לתסכול של הלקוחות.
הפוסט הזה מתמקד בשימוש בתג <video> של HTML5 להעברת סרטונים, ולכן לא יכסה וידאו בסטרימינג.
שנתחיל?
התג <video>
זה נראה מובן מאליו, נכון? כדי להוסיף סרטון, צריך להוסיף את התג <video>, להצביע על מקור ואז לצאת למרוץ!
<video src="myVideo.mp4">
ונכון. ברמה הגבוהה ביותר, זה כל מה שצריך כדי להוסיף סרטון לאינטרנט. עם זאת, יש הרבה מאפיינים שאפשר להוסיף לתג הסרטון כדי לשפר את הפריסה וההצגה של הסרטון.
התג <source>
ייתכן שהדרך הטובה ביותר לשפר את הצגת הסרטונים באינטרנט היא לבצע אופטימיזציה של
הקבצים שמועברים לדפדפן. הדרך לעשות זאת היא באמצעות התג <source>:
<video>
<source src="myWebmVideo.webm" type="video/webm">
<source src="myh265Video.mp4" type="video/mp4">
<source src="myh264Video.mp4" type="video/mp4">
</video>
הוא מפנה לשלושה קובצי מקור נפרדים. הדפדפן מתחיל בחלק העליון ובוחר את הפורמט והקודק הראשונים שבהם הוא יכול להשתמש. בעולם הווידאו אפשר לשמור את פורמט הקובץ, שנקרא בדרך כלל מאגר, באמצעות רכיבי קודק שונים, ולכל אחד מהם יש מאפיינים שונים. (מידע נוסף בנושא זמין כאן). בדוגמה שלמעלה, האפשרות הראשונה היא בפורמט WebM (שניתן לקודד באמצעות רכיבי קודק VP8 או VP9), והוא נתמך על ידי 78% מהמשתמשים הגלובליים (בזמן הכתיבה). האפשרות השנייה היא קודק H.265 של mp4, שנתמך ב-iOS ובגרסאות Mac חדשות יותר. אלו הם רכיבי קודק חדשים יותר, שדחיסת הנתונים שלהם בהם השתפרה, והם מספקים את אותה איכות וידאו כמו בפורמטים ישנים יותר של וידאו.
הבחירה הסופית ברשימה שלנו היא בפורמט H.264 mp4, שכולל תמיכה ב-92% מכל המשתמשים הגלובליים. עם זאת, הפורמט הוא פורמט ישן יותר, ולכן הוא בדרך כלל גדול הרבה יותר מסרטוני WebM או H.265. בדוגמה אחת, אפשר לראות את ההבדל עבור סרט באורך של שתי דקות:
| קודק | גודל הקובץ |
|---|---|
| VP8 | 5.5 MB |
| VP9 | 4.2 MB |
| H.265 | 5.4 MB |
| H.264 | 16.1 MB |
העלאת קבצים קטנים יותר היא האופטימיזציה הטובה ביותר לשיפור הביצועים, שמאפשרת להעביר את הסרטונים בצורה טובה יותר. כשמורידים סרטון קטן יותר, ההפעלה שלו מתרחשת מוקדם יותר ומאגר הסרטונים הזמני מתמלא מהר יותר. דבר זה מוביל לפחות השהיות במהלך הפעלת הסרטון. בנוסף, עומס השרת יופחת, ולכן הוא מקנה את דרישות האחסון המוגדלות של קובצי וידאו רבים.
מאפיין הטעינה מראש
לא ניתן להתחיל הפעלה של סרטונים עד שמורידים ונשמרים סרטונים מסוימים באופן מקומי. באמצעות מאפיין הטעינה מראש תוכלו לקבוע כמה סרטונים יירדו בטעינת הדף. יש שלושה ערכים למאפיין הטעינה מראש: auto, metadata ו-none.
preload='auto'
אם משתמשים ב-'auto', הסרטון כולו יורד, לא משנה אם המשתמש ילחץ על 'הפעלה' או לא. כך מתאפשרת הפעלה מהירה של הסרטון בזמן שמתבצעת הורדה מקומית של הסרטון לפני שהמשתמש לוחץ על 'הפעלה'. מבחינת השימוש בנתונים (ומנקודת המבט של עומס השרת), יש להשתמש באפשרות הזו רק כאשר יש סבירות גבוהה שמישהו יצפה בסרטון. אחרת, כל הנתונים של הורדת סרטון מלא
יתבזבזו.
preload='metadata'
זוהי הגדרת ברירת המחדל לטעינה מראש ב-Chrome וב-Safari. כשמשתמשים ב-'metadata', מורידים את 3% הראשונים מהסרטון. יש לשים לב לאזהרה לגבי 'auto', אבל הורדת 3% מהסרטון בלבד כרוכה בעלות השימוש בשרת/בנתונים נמוכה בהרבה מזו של הסרטון כולו, ועדיין מבטיחה שחלק מהסרטון מאוחסן באופן מקומי לצורך הפעלה מהירה של הווידאו.
preload='none'
הפעולה הזו חוסכת הכי הרבה נתונים, אבל תוביל להאטת ההפעלה של הסרטון כשלוחצים על לחצן ההפעלה, כי לפי ההגדרה, הסרטון נטען מראש באופן מקומי במכשיר אפס קילובייט (KB). זוהי ההגדרה המתאימה לסרטונים קיימים, אך סביר להניח שלא יופעלו. אפשר להשתמש באפשרות הזו גם אם המשתמש הפעיל את מצב Lite בדפדפן.
פוסטר
ייתכן שתרצה להשתמש בתמונת פוסטר שמוצגת מעל לחלון הסרטון לפני שהסרטון מתחיל לפעול:
<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
בסרטון בלי פוסטר מוצג מסך שחור לפני תחילת הסרטון.
סרטון עם פוסטר הוא הרבה יותר מעניין.
על ידי הוספת תמונה במקום קופסה שחורה בדף, האתר שלך מושך ואינטראקטיבי יותר. עם זאת, שימוש במאפיין poster יוסיף הורדת תמונה לפני תחילת הורדת הסרטון. לכן, כדאי להימנע מהוספת פוסטר לסרטונים שמופעלים אוטומטית (כי ההורדה הנוספת תעכב את הורדת הסרטון).
פקדי הפעלה
הוספת המאפיין controls מוסיפה פקדי הפעלה. בלי הרכיבים האלה, הלקוחות לא יוכלו להפעיל או להפסיק את הסרטון. כדאי להוסיף את הפקודות האלה לסרטונים
כדי שהמשתמשים יוכלו להפסיק ולהשהות, לשנות את עוצמת הקול וכו'. בסרטונים שפועלים ברקע או חוזרים על עצמם, כדאי להשמיט את המאפיין הזה.
מושתק
המאפיין muted גורם להפעלה להתחיל במצב מושתק. אם לא יסופקו אמצעי בקרה, הם יישארו מושתקים למשך כל ההפעלה. אם זאת הכוונה, יכול להיות שכדאי להסיר את הטראק של האודיו מהסרטון. כך תצמצמו עוד יותר את הגודל של קובץ הווידאו שמועבר ללקוח.
כמו במקרה של קונטיינרים ורכיבי קודק, הסרת קובץ האודיו, שנקראת גם demuxing, היא מעבר להיקף המאמר הזה. תוכלו למצוא הוראות במאמר גיליון מניפולציה של מדיה.
לולאה (loop)
כדי להעביר את התוכן בלופ (למשל, קובץ GIF מונפש), מוסיפים את המאפיין loop. קובצי וידאו הם בדרך כלל הרבה יותר קטנים מקובצי GIF מונפשים, ולכן המנגנון הזה מאפשר להחליף את קובצי ה-GIF בקובצי וידאו.
הפעלה אוטומטית של הסרטון
אם אתם רוצים שהסרטון יופעל באופן מיידי (לדוגמה, כסרטון רקע, או סרטון שחוזר על עצמו כמו קובץ GIF מונפש), אפשר להוסיף את המאפיין autoplay:
<video src="myVideo.mp4" autoplay>
עם זאת, כדי שסרטון יופעל אוטומטית בדפדפנים לנייד, צריך להוסיף גם את המאפיין muted:
<video src="myVideo.mp4" autoplay muted>
סיכום
הוספת סרטון לאתר תוסיף תחום חדש של התעניינות ללקוחות, אבל חשוב להציג את התוכן בצורה נכונה, כדי להבטיח שהפעלת הסרטון תהיה חלקה וללא עיכובים. השימוש במאפיינים המובְנים של התג <video> יכול לעזור לכם מאוד לספק סרטונים באיכות גבוהה לכל מי שמבקר באתר שלכם.