אודיו ווידאו

כמו שלמדתם במודול תמונות, שפת 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 שמציין בדיוק איך המשאב מקודד. קודקים מאפשרים לכם לכלול אופטימיזציות של מדיה כשיפורים מתקדמים (רכיבים שלא נתמכים בכל הדפדפנים). הקודק מופרד מסוג המדיה באמצעות נקודה ופסיק. לדוגמה, אפשר לכתוב את הקודק באמצעות תחביר אינטואיטיבי, כמו <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis"> שמציין שקובצי WebM מכילים וידאו VP8 ואודיו vorbis.

יכול להיות שיהיה קשה יותר לפענח קודקים, כמו <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> שמציין שהקידוד של MP4 הוא Advanced Video Coding Main Profile Level 4.2. הסבר על התחביר הזה חורג מהיקף השיעור הזה. פרטים נוספים זמינים בפוסט של ג'ייק ארצ'יבלד בנושא קביעת פרמטר הקודק של סרטון AV1.

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

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

תמיד צריך לכלול את מאפיין הערך הבוליאני controls. כך פקדי המשתמשים גלויים, והמשתמשים יכולים לשלוט בעוצמת הקול, להשתיק את האודיו לגמרי ולהרחיב את הסרטון למסך מלא. השמטה של 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 playsinline 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 של מדיה, כולל TextTrack API. אתם יכולים להשתמש בממשקי ה-API של Media Capture and Streams ושל MediaDevices כדי להקליט אודיו מהמיקרופון של המשתמש או להקליט את המסך של המשתמש. ‫Web Audio API מאפשר לערוך אודיו בשידור חי או אודיו שהוקלט מראש, להזרים אותו, לשמור אותו או לשלוח אותו לרכיב <audio>.

בדיקת ההבנה

אפשר לבדוק את הידע שלכם באודיו ובווידאו.