الصوت والفيديو في HTML: استخدام audio وvideo وtrack

تنفيذ الصوت والفيديو في HTML بصورة موثوقة

عند إضافة وسائط إلى صفحة، لا يقتصر القرار على ظهور مشغل. ينبغي أن يستطيع الزائر فهم طبيعة الملف وتشغيله وإيقافه، وأن تتوفر بدائل عندما لا يدعم المتصفح الصيغة المستخدمة. يساعد عنصر audio أو video الأصلي في تقليل الاعتماد على إضافات خارجية، لكنه لا يعفي من اختبار الوصول والأداء.

الفرق بين captions وsubtitles

الترجمة النصية للحوار تساعد من لا يفهم لغة الصوت، بينما تتضمن captions عادةً أيضًا أصواتًا ذات معنى مثل جرس الإنذار أو الموسيقى التي تؤثر في فهم المشهد. اختر المسار الذي يخدم الجمهور، وراجع التزامن والدقة يدويًا بدل الاكتفاء بوجود ملف ترجمة.

الأداء وحقوق الاستخدام

تجنب تنزيل ملف فيديو ضخم تلقائيًا إذا لم يكن مطلوبًا عند فتح الصفحة. اختر ترميزًا مدعومًا، واختبر على اتصال بطيء، ولا تجعل الصوت يبدأ تلقائيًا بطريقة تفاجئ المستخدم. استخدم ملفات تملك حقوقها أو لديك إذن بنشرها، واذكر مصدر المادة عند الحاجة. إذا كان الوسيط خارجيًا، فقيّم أثر تضمينه على الخصوصية والأداء، خصوصًا عندما يحمل إطارًا أو نصوص تتبع من مزود آخر.

فحص سريع قبل النشر

• تأكد من أن أزرار التشغيل قابلة للاستخدام باللمس ولوحة المفاتيح.
• أضف ترجمة أو نصًا بديلًا للمحتوى الصوتي المهم عند الحاجة.
• اختبر تحميل الوسيط عند انقطاع الشبكة أو فشل مصدر واحد.
• لا تستخدم الفيديو وحده لنقل تعليمات مهمة دون نص مكافئ.

راجع مرجع video في MDN وإرشادات WAI للوسائط الصوتية والمرئية عند بناء تجربة شاملة.

قائمة مراجعة جودة الوسائط المضمّنة

قبل نشر الصوت أو الفيديو، تحقق من أن المحتوى يعمل في سياق الصفحة وليس فقط عند فتح الملف مباشرة. قد يكون المسار صحيحًا لكن نوع MIME غير مناسب، أو قد تمنع سياسة المصدر تشغيل الوسيط داخل إطار. افحص لوحة الشبكة ورسائل Console إذا لم يعمل الملف، ولا تفترض أن المشكلة في عنصر HTML نفسه.

اختيار الصيغ والبدائل

إذا كانت لديك ملفات بصيغ متعددة، يمكنك توفير أكثر من عنصر source مع type مناسب كي يختار المتصفح ما يدعمه. لا تضف نسخًا كثيرة بلا حاجة؛ اختر صيغًا تناسب الجمهور وحجم الملف وجودة الصوت أو الصورة. اختبر الملف على أجهزة حقيقية لأن دعم الترميز قد يختلف حتى عندما يتعرف المتصفح على امتداد الملف.

توفير بدائل للمحتوى

المحتوى التعليمي أو الإخباري المهم ينبغي ألا يعتمد على الصوت أو الصورة وحدهما. وفر ترجمة دقيقة للفيديو، ونصًا أو ملخصًا للمادة الصوتية عندما يكون ذلك ضروريًا لفهم المعلومة. إذا كان الفيديو يشرح خطوات، ففكر في نص يتيح البحث داخل المحتوى والرجوع إلى الخطوة المطلوبة.

تجربة المستخدم والأداء

لا تجعل الفيديو يبدأ بصوت تلقائي، وتأكد من أن التحكم بالإيقاف متاح. راقب حجم التنزيل الأولي، خصوصًا في الصفحات التي تحتوي على عدة ملفات وسائط. إذا كان الفيديو أسفل الصفحة، فقد يكون التحميل الكسول مناسبًا، لكن اختبر ألا يتأخر ظهوره عندما يصل المستخدم إليه بسرعة عبر التمرير.

سجّل اختبارًا لكل متصفح وجهاز أساسي في جمهورك، بما في ذلك فشل الاتصال وملف غير متاح. راجع مرجع source في MDN ودليل WAI للوسائط.

إتاحة الوسائط وتحسين تحميلها في الصفحات

تضمين الصوت والفيديو قرار محتوى وأداء في الوقت نفسه. قبل اختيار الصيغة، حدد الأجهزة والمتصفحات المستهدفة، وحجم الملف، وهل يحتاج المستخدم إلى التشغيل الفوري أم يمكن تأجيل التحميل حتى يطلبه. لا تجعل تشغيل الصوت تلقائيًا؛ فهو قد يفاجئ المستخدمين ويؤثر في الوصولية، كما أن المتصفحات الحديثة تقيد التشغيل التلقائي في حالات كثيرة.

وفّر بدائل نصية واضحة

أضف ترجمة نصية متزامنة للفيديو الذي يحتوي على كلام، واستخدم مسار track عند ملاءمته، مع مراجعة دقة الترجمة وتوقيت ظهورها. إذا كان المحتوى يشرح معلومات مرئية لا تظهر في الصوت، فوفّر وصفًا صوتيًا أو وصفًا نصيًا بديلًا حسب الحاجة. أما الصوت المسجل، فاحرص على توفير نص مكتوب عندما يكون ذلك مهمًا لفهم المحتوى أو البحث داخله.

اختيار المصادر والسلوك الاحتياطي

يمكن توفير أكثر من مصدر داخل عنصر الوسائط لزيادة التوافق، لكن ينبغي التأكد من أن الملفات ذات ترميز مناسب وليست نسخًا ضخمة بلا فائدة. استخدم صورة poster للفيديو عند الحاجة إلى معاينة، واجعل أبعادها قريبة من أبعاد المشغل لتقليل القفز البصري. اكتب نصًا احتياطيًا داخل العنصر يوضح أن المتصفح لا يدعم الوسائط، مع رابط مباشر إذا كان ذلك مفيدًا.

قياس الأثر على الأداء

لا تحمّل ملفات فيديو كبيرة لكل زائر إذا كانت الوسائط أسفل الصفحة أو اختيارية. قيّم التحميل الكسول، واستضافة الملفات أو استخدام منصة بث مناسبة، مع الانتباه إلى الخصوصية والتتبع عند التضمين من طرف ثالث. اختبر تجربة المستخدم على شبكة بطيئة، وتأكد من أن أزرار التشغيل ومستوى الصوت تعمل بلوحة المفاتيح، وأن التركيز المرئي واضح.

للتفاصيل التقنية راجع مرجع MDN لعنصر video وإرشادات WAI لإتاحة الصوت والفيديو. لا تعتبر وجود عنصر الوسائط وحده دليلًا على أن المحتوى متاح لجميع المستخدمين.

قائمة فحص عملية قبل نشر الصوت والفيديو

تحقق من أن الملف يعمل في المتصفحات المستهدفة وأن ترميزه لا يفرض تنزيلًا غير ضروري. جرّب بدء التشغيل والإيقاف والتحكم بالصوت والتنقل في المدة، ثم اختبر ما يحدث إذا فشل المصدر الأساسي. يجب ألا يظل المستخدم أمام مساحة فارغة بلا تفسير؛ وفر رسالة واضحة أو رابطًا بديلًا عند الحاجة. افحص كذلك أن عناصر التحكم الأصلية لا تُحجب بتصميم مخصص غير قابل للاستخدام.

راجع النصوص المصاحبة

تأكد من مزامنة الترجمة مع الكلام، وأنها تشمل الأصوات المهمة التي تؤثر في فهم المشهد. إذا كان الفيديو يعرض خطوات أو مخططًا، فاسأل هل يفهم المستخدم الذي لا يرى الصورة ما يحدث من الصوت وحده. عندما تكون الإجابة لا، أضف وصفًا أو نصًا مكملًا. راجع دقة الأسماء والأرقام والمصطلحات التقنية، لأن الترجمة الآلية غير المراجعة قد تغير المعنى.

قِس تكلفة الوسائط

قارن حجم الملف بجودة العرض المطلوبة، وتجنب تحميل ملفات متعددة كاملة إذا لم تكن هناك حاجة إليها. راقب أثر التضمينات الخارجية على الخصوصية والتحميل، واختبر الصفحة عند حظر ملفات تعريف الارتباط أو سكريبتات الطرف الثالث. اجعل قرار الاستضافة مبنيًا على حجم الجمهور ومتطلبات البث والتكلفة، وليس على سهولة نسخ رابط التضمين فقط.