الصوت والفيديو

كما تعلّمت في وحدة الصور، يتيح 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 هو Advanced Video Coding Main Profile Level 4.2. شرح هذا التركيب يتجاوز نطاق هذا الدرس. لمزيد من التفاصيل، يمكنك الاطّلاع على مشاركة Jake Archibald حول كيفية تحديد مَعلمة الترميز لفيديو 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 لإضافة عناصر تحكّم مخصّصة في الوسائط وإزالة السمة 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، يمكن للمستخدم التحكّم في الصوت (أو الفيديو) حتى إذا تعذّر تشغيل JavaScript. لا تزِل السمة controls إلا بعد إنشاء زر بديل.

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

يجب تضمين عناصر التحكّم الخارجية دائمًا عندما لا يتمكّن المستخدمون من الوصول إلى عناصر التحكّم، مثلاً في الفيديوهات التي يتم تشغيلها في الخلفية والتي تكون عناصر التحكّم فيها مخفية خلف محتوى الموقع الإلكتروني. من المهم فهم أساسيات متطلبات تسهيل استخدام الوسائط لتلبية احتياجات المستخدمين المختلفة من حيث البيئة والحواس، بما في ذلك الملايين من الأشخاص الذين يعانون من ضعف السمع ومشاكل في الرؤية. لقد تطرّقنا للتو إلى HTMLMediaElement الذي يوفّر عدة سمات وطرق وأحداث موروثة من كل من HTMLVideoElement و HTMLAudioElement، مع إضافة HTMLMediaElement بعض السمات والطرق والأحداث الخاصة به. تتوفّر العديد من واجهات برمجة التطبيقات الخاصة بالوسائط، بما في ذلك TextTrack API. يمكنك استخدام واجهتَي برمجة التطبيقات Media Capture and Streams وMediaDevices من أجل تسجيل الصوت من ميكروفون المستخدم أو تسجيل شاشة المستخدم. تتيح واجهة برمجة تطبيقات Web Audio معالجة الصوت المباشر والمسجّل مسبقًا وبثه أو حفظه أو إرساله إلى العنصر <audio>.

التحقّق من فهمك

اختبِر معلوماتك حول الصوت والفيديو.