صوتی و تصویری

همانطور که در ماژول تصاویر یاد گرفتید، HTML جاسازی رسانه در یک صفحه وب را امکان پذیر می کند. در این بخش، ما به فایل‌های صوتی و تصویری، از جمله نحوه جاسازی آن‌ها، کنترل‌های کاربر، ارائه یک مکان‌نمای ثابت تصویر برای ویدیوهای شما، و بهترین روش‌ها، از جمله در دسترس‌سازی فایل‌های صوتی و تصویری، نگاه می‌کنیم.

<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 است. . توضیح این نحو از حوصله این درس خارج است. جیک آرچیبالد پستی دارد که در آن توضیح می دهد که چگونه پارامتر کدک را برای یک ویدیوی 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 گنجانده شده باشد.

پنج مقدار برشماری شده برای ویژگی track 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 را لحاظ کنید. سپس از جاوا اسکریپت برای افزودن کنترل های رسانه ای سفارشی و حذف ویژگی کنترل ها استفاده کنید. برای مثال، می‌توانید یک <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 ، کاربر راهی برای کنترل صدا (یا ویدیو) حتی در صورت خرابی جاوا اسکریپت دارد. فقط زمانی که دکمه جایگزینی نصب شد، ویژگی کنترل ها را حذف کنید.

document.querySelector('[aria-controls]').removeAttribute('controls');

هنگامی که کاربران نمی توانند به کنترل ها دسترسی داشته باشند، همیشه کنترل های خارجی را شامل کنید، مانند ویدیوهای پس زمینه ای که کنترل های آنها در پشت محتوای سایت پنهان است. درک اصول اولیه الزامات دسترسی به رسانه برای پاسخگویی به کاربران با نیازهای مختلف محیطی و حسی، از جمله میلیون‌ها نفر با ناشنوایی و اختلالات بینایی، مهم است. ما به تازگی HTMLMediaElement را لمس کرده‌ایم که چندین ویژگی، روش و رویداد را ارائه می‌کند که توسط HTMLVideoElement و HTMLAudioElement به ارث برده می‌شوند، با HTMLMediaElement که چند ویژگی، روش و رویداد خاص خود را اضافه می‌کند. چندین API رسانه دیگر از جمله API TextTrack وجود دارد. می‌توانید از Media Capture و Streams و MediaDevices API برای ضبط صدا از میکروفون کاربر یا ضبط صفحه نمایش کاربر استفاده کنید. Web Audio API امکان دستکاری صداهای زنده و از پیش ضبط شده و پخش جریانی، ذخیره یا ارسال صدا را به عنصر <audio> می دهد.

درک خود را بررسی کنید

دانش خود را در زمینه صدا و تصویر آزمایش کنید.