כפי שלמדת במודול תמונות, HTML מאפשר הטמעת מדיה בדף אינטרנט. בקטע הזה נסביר על קובצי אודיו ווידאו, כולל אופן ההטמעה שלהם, אמצעי הבקרה של המשתמשים, הצגת placeholder של תמונות סטטיות בסרטונים ושיטות מומלצות, כולל הגדרת קובצי אודיו וקובצי וידאו נגישים.
<audio> וגם <video>
ניתן להשתמש ברכיבים <video> ו-<audio> כדי להטמיע נגני מדיה ישירות עם המאפיין src, או להשתמש בהם כרכיב מאגר לסדרה של רכיבי <source>, שכל אחד מהם מספק הצעה לקובץ src. אפשר להשתמש ב-<video> כדי להטמיע קובץ אודיו, אבל הרכיב <audio> עדיף להטמעת קובצי אודיו.
התגים הפותחים <video> ו-<audio> יכולים להכיל כמה מאפיינים אחרים, כולל
controls, autoplay, loop, mute, preload והמאפיינים הגלובליים. הרכיב <video> תומך גם במאפיינים height, width ו-poster.
<video src="videos/machines.webm" poster="images/machine.jpg" controls>
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
בדוגמה הזו ב-<video> יש מקור יחיד עם המאפיין src המקשר למקור הווידאו. המאפיין poster
מספק תמונה שאפשר להציג בזמן שהסרטון נטען. לבסוף, המאפיין controls מספק את פקדי הסרטונים של המשתמש.
התוכן החלופי נכלל בין התג הפותח לבין התג הסוגר. אם סוכן המשתמש לא תומך ב-<video> (או ב-<audio>, התוכן הזה יוצג. התג הסוגר </video> נדרש, גם אם אין תוכן בין השניים (אבל תמיד צריך להיות תוכן חלופי , נכון?).
אם אין מאפיין src בתגי ה-<video> או ה-<audio> הפותחים, צריך לכלול רכיב <source> אחד או יותר,
לכל אחד מהם מאפיין src בקובץ מדיה. הדוגמה הבאה כוללת שלוש אפשרויות של קובץ מדיה, תוכן חלופי וכתוביות באנגלית ובצרפתית בין התג הפותח לתג הסוגר.
<video controls poster="images/machine.jpg">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
<p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>
כל צאצא של <source> כולל מאפיין src שמפנה למשאב, והמאפיין type מציין לדפדפן
את סוג המדיה של הקובץ המקושר. זה מונע מהדפדפן לאחזר קובצי מדיה שהוא לא יכול לפענח.
במאפיין type אפשר לכלול פרמטר codecs,
שמציין בדיוק איך המשאב מקודד. רכיבי Codec מאפשרים לכלול אופטימיזציות של מדיה שעדיין לא נתמכות בכל הדפדפנים. ה-codec מופרד מסוג המדיה באמצעות נקודה ופסיק. לדוגמה, ניתן לכתוב את ה-codec באמצעות תחביר אינטואיטיבי, כמו <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, שמציין שקובצי WebM מכילים וידאו VP8 ואודיו מסוג vorbis. לפעמים קשה יותר לפענח את רכיבי ה-Codec, למשל: <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a">, שמציין שקידוד MP4 הוא Advanced Video Coding ראשי ברמה 4.2. הסברת התחביר הזה היא הרבה מעבר
להיקף השיעור הזה. ג'ייק ארצ'יבלד פרסם פוסט שמסביר איך לקבוע את הפרמטר Codec של סרטון AV1 כדי לקבל מידע נוסף.
בעת הצגת סרטון, כברירת מחדל, הפריים הראשון של הסרטון מוצג כצילום סטילס כאשר הוא הופך לזמין.
זה משהו שאפשר לשלוט בו. המאפיין poster מאפשר להציג את המקור של התמונה בזמן הורדת הסרטון ועד להפעלתו. אם הסרטון מופעל ולאחר מכן מושהה, מפרסם הפוסט לא מוצג שוב.
חשוב להגדיר את יחס הגובה-רוחב של הסרטון, כי כשהסרטון נטען, הבדל בגודל בין הפוסטר לבין הסרטון יגרום להזרמה חוזרת ולצביעה מחדש.
יש לכלול תמיד את המאפיין controls boolean. כך ניתן לראות את השליטה של המשתמש, ומאפשרים למשתמשים לשלוט ברמות האודיו, להשתיק את האודיו לחלוטין ולהרחיב את הסרטון למסך מלא.
השמטת הערך controls יוצרת חוויית משתמש שלילית, במיוחד אם כוללים את המאפיין autoplay הבוליאני. חשוב לשים לב שדפדפנים
מסוימים לא ישימו לב להוראה של המאפיין autoplay אם המאפיין הבוליאני muted יושמט, כי הפעלה אוטומטית של
קובץ מדיה היא בדרך כלל חוויית משתמש גרועה, גם כשהוא מושתק ועם פקדים גלויים.
טראקים
צריך לכלול רכיב אחד או יותר של <track> כדי לציין טראקים של טקסט מתוזמנים, בין תג הפתיחה לבין תג הסגירה הנדרש של אודיו ושל וידאו. הדוגמה הבאה כוללת שני קובצי <track>, שמספקים כתוביות טקסט מתוזמנות גם באנגלית וגם בצרפתית.
<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />
קובצי הטראקים, שצוינו במאפיין src, צריכים להיות בפורמט WebVTT (.vtt).
הקבצים צריכים להיות באותו דומיין של מסמך ה-HTML, אלא אם מוסיפים את המאפיין crossorigin.
יש חמישה ערכים ממוינים למאפיין kind של הטראק: subtitles, captions, descriptions, chapters ועוד metadata.
לתמלול ולתרגומים של דו-שיח צריך לכלול את המאפיין subtitles יחד עם המאפיין srclang. הערך של כל מאפיין label
מוצג כאפשרות למשתמש. התוכן של אפשרות ה-VTT שנבחרה מוצג מעל הסרטון. אפשר לסגנן את המראה של הכתוביות על ידי טירגוט לביטוי ::cue/ ::cue().
הערך kind="caption" שמור לתמלול ולתרגומים שכוללים אפקטים קוליים ופרטי אודיו רלוונטיים אחרים.
התוכן הזה אינו מיועד רק לצופים חירשים. ייתכן שמשתמש לא מצא את האוזניות, אז הוא הפעיל את הכתוביות. או שאולי הם לא הצליחו לזהות את נקודות השיחה האחרונות בפודקאסט אהוב, אז הם רוצים לקרוא את התמליל כדי לאשר שהם מבינים.
חשוב מאוד להשתמש בדרכים חלופיות כדי לגשת לתוכן וידאו ואודיו.
kind="description" מיועד לתיאורי טקסט של התוכן החזותי בסרטון למשתמשים שלא יכולים לראות את הסרטון, בין אם הם משתמשים במערכת ללא מסך כמו Google Home או Alexa, ובין אם הם עיוורים.
הוספת כתוביות בפורמט WebVTT מאפשרת גישה לסרטון ללקויי שמיעה. חשוב לזכור שמוגבלות היא חוסר התאמה בין אדם לבין הסביבה הנוכחית שלו. ליקוי שמיעה יכול לנבוע מכך שהמשתמש נמצא בסביבה רועשת, שיש בו רמקולים פגומים או אוזניות שבורות, או אם למשתמש יש אובדן שמיעה או שהוא חירש. תוכן נגיש עוזר להרבה יותר אנשים ממה שאתם חושבים. זה עוזר לכולם.
שיקולים לגבי הפעלת סרטון ברקע
ייתכן שצוות השיווק או העיצוב ירצה שהאתר שלך יכלול סרטון רקע. באופן כללי, המשמעות היא שהם רוצים סרטון מושתק, מופעל אוטומטית בלופ, בלי פקדים. קוד ה-HTML אמור להיראות כך:
<video autoplay loop muted poster="images/machine.jpg" role="none">
<source src="videos/machines.webm" type="video/webm">
<source src="videos/machines.mp4" type="video/mp4">
<source src="videos/machines.ogv" type="video/ogg">
</video>
לא ניתן לגשת לסרטונים ברקע. אין להעביר את התוכן באמצעות סרטוני רקע מבלי לספק למשתמשים שליטה מלאה בהפעלה ובגישה לכל הכתוביות. הסרטון הזה רק דקורטיבי, ולכן הוא כולל את תפקיד ה-ARIA של none ללא תוכן חלופי.
כדי לשפר את הביצועים של סרטונים שמושתקים תמיד, מסירים את טראק האודיו ממקורות המדיה.
אם הסרטון מופעל למשך חמש שניות או פחות, אין צורך במנגנון השהיה כדי לציית להנחיות הנגישות, אבל כל דבר
עם המאפיין loop הבוליאני יופעל בלופ (לפעמים) כברירת מחדל, אם הוא יחרוג מחמש השניות האלה או מכל מגבלת זמן אחרת. כדי לשפר את חוויית המשתמש, הקפידו תמיד לבחור שיטה להשהיית הסרטון. כדי לעשות זאת בקלות רבה יותר, עליך לכלול controls.
בקרי מדיה בהתאמה אישית
כדי להציג פקדים מותאמים אישית של וידאו או אודיו, במקום הפקדים המובנים של הדפדפן, יש לכלול את המאפיין controls. לאחר מכן, משתמשים ב-JavaScript כדי להוסיף פקדי מדיה מותאמים אישית ולהסיר את מאפיין אמצעי הבקרה. לדוגמה, אפשר להוסיף <button> שמשנה את
מצב ההפעלה של קובץ אודיו.
<button id="playPause" aria-controls="idOfAudio"
data-pause-text="Pause audio"
data-play-text="Play audio">Pause audio</button>
הדוגמה הזו כוללת לחצן עם מאפייני dataset שמכיל את הטקסט, שיעודכן כאשר המבקר עובר בין מצבי הפעלה והשהיה. המאפיין aria-controls נכלל עם ה-id של הרכיב שנשלט על ידי הלחצן.
במקרה הזה, האודיו. לכל לחצן ששולט באודיו יש מטפל באירועים.
כדי ליצור פקדים מותאמים אישית, משתמשים ב-HTMLMediaElement.play() וב-HTMLMediaElement.pause(). כשמחליפים את מצב ההפעלה,
ניתן גם להחליף את הטקסט בלחצן:
const pauseButton = document.getElementById('playPause');
pauseButton.addEventListener("click", pauseAndPlay, false);
function pauseAndPlay() {
console.log(this);
const media = document.getElementById(this.getAttribute('aria-controls'));
if (media.paused) {
media.play();
this.innerText = this.dataset.pauseText;
} else {
media.pause();
this.innerText = this.dataset.playText;
}
}
על ידי הכללת המאפיין controls, המשתמש יוכל לשלוט באודיו (או בווידאו) גם אם JavaScript נכשל.
יש להסיר את מאפיין הפקדים רק לאחר יצירת לחצן החלפה.
document.querySelector('[aria-controls]').removeAttribute('controls');
תמיד צריך לכלול פקדים חיצוניים כאשר למשתמשים אין גישה לפקדים, למשל בסרטוני רקע שהפקדים שלהם מוסתרים מאחורי תוכן האתר. חשוב להבין את היסודות של דרישות הנגישות למדיה כדי להתאים למשתמשים בעלי צרכים סביבתיים וחושיים שונים, כולל מיליוני האנשים הסובלים מאובדן שמיעה ולקויי ראייה.
זה עתה נגענו ל-HTMLMediaElement שמספק מספר מאפיינים, שיטות ואירועים שעוברים בירושה גם על ידי HTMLVideoElement וגם על ידי HTMLAudioElement, כאשר HTMLMediaElement מוסיף כמה מאפיינים, שיטות ואירועים משלו. יש כמה ממשקי API של Media אחרים, כולל TextTrack API. אפשר להשתמש בממשקי ה-API של Media Capture and Streams ו-MediaDevices כדי להקליט אודיו מהמיקרופון של המשתמש או כדי להקליט את המסך של המשתמש. Web Audio API מאפשר תמרון אודיו בשידור חי ומוקלט מראש וגם סטרימינג, שמירה או שליחה של האודיו לרכיב <audio>.
בדיקת ההבנה
בחינת הידע שלך באודיו ובווידאו.
למה משמש הרכיב <track>?
על מה שולט המאפיין poster?