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

كما تعلمت في وحدة الصور، يعمل 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 من الملف الشخصي الرئيسي لترميز الفيديو المتقدم. شرح بناء الجملة هذا أبعد بكثير من نطاق هذا الدرس. نشر Jake Aribald مشاركة تشرح فيه كيفية تحديد مَعلمة برنامج الترميز لفيديو 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 لبعض الخصائص، والأساليب والأحداث الخاصة بها. هناك العديد من واجهات برمجة التطبيقات للوسائط الأخرى، بما في ذلك TextTrack API. يمكنك استخدام الخيار التقاط الوسائط وبثّها. وواجهات برمجة التطبيقات MediaDevices لتسجيل الصوت من ميكروفون المستخدم أو تسجيل شاشة المستخدم واجهة برمجة تطبيقات Web Audio تتيح معالجة الصوت والبث المباشر والمُسجَّل مسبقًا أو حفظه أو إرساله إلى العنصر <audio>.

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

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