סרטון ואודיו

כפי שלמדתם במודול תמונות, 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 הוא רמה 4.2 של Advanced Video Coding. הסבר על התחביר הזה הוא הרבה יותר את ההיקף של השיעור הזה. לג'ייק ארצ'יבלד יש פוסט שבו מוסבר איך לקבוע את פרמטר הקודק של סרטון 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 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 שמוסיף מספר מאפיינים, שיטות ואירועים משלו. יש עוד כמה ממשקי Media APIs, כולל TextTrack API. אפשר להשתמש בסטרימינג וסטרימינג של מדיה ואת ממשקי ה-API של MediaDevices להקלטת אודיו מהמיקרופון של המשתמש או להקליט מסך של משתמש. ב-Web Audio API מאפשרת לבצע מניפולציות על האודיו וההקלטות בשידור חי או שהוקלט מראש, וגם לשמור אותו או לשלוח אותו לרכיב <audio>.

בדיקת ההבנה

בוחנים את הידע שלכם לגבי אודיו ווידאו.