שימוש בסרטונים בסיסיים לאינטרנט ולא רק בתמונות

מידע בסיסי על וידאו. הגברת המעורבות.

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

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

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

המאפיין preload

אי אפשר להפעיל סרטונים עד שמורידים סרטון כלשהו ומאחסנים אותו באופן מקומי. באמצעות המאפיין preload אפשר לקבוע כמה מהסרטון יוריד בזמן טעינת הדף. יש שלושה ערכים למאפיין preload: auto,‏ metadata ו-none.

preload='auto'

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

preload='metadata'

זוהי הגדרת ברירת המחדל של טעינת נתונים מראש ב-Chrome וב-Safari. כשמשתמשים ב-'metadata', מתבצעת הורדה של 3% הראשונים של הסרטון. למרות שיש לכך מגבלות כמו 'auto', ההורדה של רק 3% מהסרטון מאפשרת לכם לחסוך בעלויות השימוש בשרת או בנתונים בהשוואה להורדה של הסרטון כולו, ועדיין להבטיח שחלק מהסרטון יישמר באופן מקומי כדי שהסרטון יופעל במהירות.

preload='none'

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

פוסטר

כדאי להוסיף תמונת פוסטר שתוצג מעל חלון הסרטון לפני שהסרטון יתחיל לפעול:

<video src="myVideo.mp4" poster="/image/myVideoImage.jpg">
בסרטון ללא פוסטר יוצג מסך שחור לפני שהוא יתחיל.
ללא תמונת פוסטר

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

סרטון עם פוסטרים מושך הרבה יותר תשומת לב.
עם תמונת פוסטר

סרטון עם פוסטרים מושך הרבה יותר תשומת לב.

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

רכיבי UI להפעלה

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

הושתק

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

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

לולאה (loop)

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

הפעלה אוטומטית של סרטון

אם רוצים שהסרטון יופעל באופן מיידי (למשל, כסרטון רקע או כסרטון שמופעל בלופ כמו קובץ GIF מונפש), אפשר להוסיף את המאפיין autoplay:

<video src="myVideo.mp4" playsinline autoplay>

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

<video src="myVideo.mp4" playsinline autoplay muted>

סיכום

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