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

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

Doug Sillars

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

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

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

מאפיין הטעינה מראש

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