كما تعلمت في وحدة الصور، يعمل 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 audio. قد يكون فك رموز برامج الترميز أكثر صعوبة، مثل <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> الذي يشير إلى أنّ ترميز MP4 هو المستوى 4.2 من الملف الشخصي الرئيسي للترميز المتقدّم للفيديو. شرح بناء الجملة هذا يتخطى
نطاق هذا الدرس. نشر "جيك أرتشيبالد" مشاركة تشرح كيفية تحديد مَعلمة برنامج الترميز لفيديو AV1
إذا كنت تريد الاطّلاع على المزيد من المعلومات.
عند عرض فيديو، يتم افتراضيًا عرض الإطار الأول من الفيديو كلقطة ثابتة عند توفره.
وهذا أمر يمكن التحكّم فيه. تتيح السمة poster عرض مصدر الصورة أثناء تنزيل الفيديو وحتى تشغيله. إذا تم تشغيل الفيديو وتم إيقافه مؤقتًا بعد ذلك، لا يتم عرض الملصق من جديد.
احرص على تحديد نسبة العرض إلى الارتفاع للفيديو، لأنّه عند تحميل الفيديو، يؤدي الاختلاف في الحجم بين الملصق والفيديو إلى إعادة عرض الصورة وإعادة صياغتها.
ضمِّن السمة controls boolean دائمًا. وهو ما يجعل عناصر التحكم مرئية، ما يوفر للمستخدمين إمكانية التحكم في مستويات الصوت وكتم الصوت تمامًا وتوسيع الفيديو إلى وضع ملء الشاشة.
يؤدي إغفال 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 API
معالجة البث المباشر والمسجّل مسبقًا وبث المحتوى الصوتي أو حفظه أو إرساله إلى العنصر <audio>.
التحقّق من استيعابك
اختبر معلوماتك عن الصوت والفيديو.
ما الغرض من استخدام العنصر <track>؟
ما الذي تتحكم فيه السمة poster؟