علامات <video> و <source>

Derek Herman

Joe Medley

Sam Dutton

أعددت ملف فيديو للويب بشكل صحيح. أنّك قدّمت المقاسات والدقة الصحيحتين لقد أنشأت أيضًا ملفات WebM و MP4 منفصلة للمتصفّحات المختلفة.

لكي يتمكّن أي مستخدم من مشاهدة الفيديو الخاص بك، عليك إضافته إلى صفحة ويب. ويتطلّب إجراء ذلك بشكل صحيح إضافة عنصرَي HTML: عنصر <video> وعنصر <source>. بالإضافة إلى الأساسيات حول هذه العلامات، توضّح هذه المقالة السمات التي يجب إضافتها إلى هذه العلامات لتوفير تجربة مستخدم جيدة.

تحديد ملف واحد

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

<video src="chrome.webm" type="video/webm">
    <p>Your browser cannot play the provided video file.</p>
</video>

تحديد تنسيقات ملفات متعددة

يُرجى الاطّلاع على أساسيات ملفات الوسائط لمعرفة أنّ بعض المتصفحات لا تتوافق مع تنسيقات الفيديوهات نفسها. يتيح لك عنصر <source> تحديد تنسيقات متعددة كخيار احتياطي في حال عدم توافق متصفّح المستخدم مع أحدها.

ينتج المثال أدناه الفيديو المضمّن الذي يتم استخدامه كمثال في وقت لاحق في هذه المقالة.

<video controls>
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
  <p>Your browser cannot play the provided video file.</p>
</video>

تجربة التأثير على Glitch

عليك دائمًا إضافة السمة type إلى حدث علامات <source> مع أنّها اختيارية. يضمن ذلك تنزيل المتصفّح للملف الذي يمكنه تشغيله فقط.

يتميز هذا الأسلوب بعدة مزايا مقارنةً بعرض نصوص HTML مختلفة أو نصوص برمجية مختلفة من جهة الخادم، وخاصةً على الأجهزة الجوّالة:

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

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

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

تحديد وقتَي البدء والانتهاء

وفِّر معدل نقل البيانات واجعل موقعك أكثر استجابة: استخدِم أجزاء الوسائط لإضافة وقتَي البدء والانتهاء إلى عنصر الفيديو.

لاستخدام مقتطف وسائط، أضِف #t=[start_time][,end_time] إلى عنوان URL للوسائط. على سبيل المثال، لتشغيل الفيديو من الثانية 5 إلى 10، حدِّد:

<source src="video/chrome.webm#t=5,10" type="video/webm">

يمكنك أيضًا تحديد الأوقات في <hours>:<minutes>:<seconds>. على سبيل المثال، يبدأ #t=00:01:05 الفيديو عند دقيقة واحدة وخمس ثوانٍ. لتشغيل الدقيقة الأولى فقط من الفيديو، حدِّد #t=,00:01:00.

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

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

لحسن الحظ، يمكنك إجراء ذلك في أدوات المطوّرين في المتصفّح. في Chrome مثلاً، يمكنك العثور عليه في لوحة الشبكة. ابحث عن العنوان Accept-Ranges وتأكَّد من أنّه يظهر على النحو التالي: bytes. في الصورة، رسمت مربعًا أحمر حول هذا العنوان. إذا لم تظهر لك القيمة bytes، عليك التواصل مع مزوّد الاستضافة.

تضمين صورة ملصق

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

<video poster="poster.jpg" ...>
  …
</video>

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

الإجراءات غير المُوصى بها

بدون ملصق احتياطي، سيبدو الفيديو غير متاح.

الإجراءات الموصى بها

يظهر ملصق احتياطي كما لو تم التقاط الإطار الأول.

التأكّد من أنّ الفيديوهات لا تتجاوز حدود الحاوية

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

يمكنك التحكّم في أبعاد الفيديو باستخدام CSS. إذا لم تكن خدمة مقارنة الأسعار (CSS) تستوفي جميع احتياجاتك، يمكنك الاستعانة بمكتبات JavaScript والإضافات، مثل FitVids، حتى في ما يتعلق بالفيديوهات من YouTube ومصادر أخرى. ويمكن أن تؤدي هذه الموارد إلى زيادة أحجام حمولات البيانات على الشبكة، ما يكون له عواقب سلبية على أرباحك ومحافظ المستخدمين.

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

بالنسبة إلى محتوى الوسائط في إطارات iframe (مثل فيديوهات YouTube)، جرِّب أسلوبًا متجاوبًا (مثل الأسلوب الذي اقترحه "جون سورداكوفسكي").

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class="video-container">
  <iframe
    src="//www.youtube.com/embed/l-BA9Ee2XuM"
    frameborder="0"
    width="560"
    height="315"
  ></iframe>
</div>

التجربة

قارِن بين النموذج الاستجابة والإصدار غير الاستجابة. كما ترى، فإن الإصدار الذي لا يستجيب لا يعد تجربة مستخدم رائعة.

اتجاه الجهاز

لا يشكّل اتجاه الجهاز مشكلة في شاشات الكمبيوتر المكتبي أو أجهزة الكمبيوتر المحمول، ولكنه مهم جدًا عند التفكير في تصميم صفحات الويب للأجهزة الجوّالة و أجهزة الكمبيوتر اللوحي.

يُبلي متصفّح Safari على iPhone بلاءً حسنًا في التبديل بين الوضع العمودي والوضع الأفقي:

قد تواجه مشاكل في اتجاه الجهاز على جهاز iPad وChrome على Android. على سبيل المثال، بدون أي تخصيص، يظهر الفيديو الذي يتم تشغيله على جهاز iPad في الوضع الافقي على النحو التالي:

يمكن أن يؤدي ضبط الفيديو على width: 100% أو max-width: 100% باستخدام CSS إلى حلّ العديد من مشاكل تنسيق اتجاه الجهاز.

تشغيل تلقائي

تتحكّم سمة autoplay في ما إذا كان المتصفّح سينزّل فيديو ويشغّله على الفور. وتعتمد الطريقة الدقيقة التي يعمل بها على النظام الأساسي والمتصفّح.

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

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

• Safari: كان يتطلّب في السابق لفتة من المستخدم، ولكن تم تخفيف هذا القيد في الإصدارات الحديثة. لمعرفة التفاصيل، يُرجى الاطّلاع على السياسات الجديدة المتعلّقة بـ <الفيديو> لنظام التشغيل iOS.

حتى على المنصات التي تتيح تشغيل الفيديو تلقائيًا، عليك التفكير في ما إذا كان من الأفضل تفعيل هذه الميزة:

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

التحميل المسبق

تقدّم السمة preload تلميحًا للمتصفّح بشأن مقدار المعلومات أو المحتوى المطلوب تحميله مسبقًا.

تختلف تأثيرات سمة preload على المنصات المختلفة. على سبيل المثال، يخزّن Chrome 25 ثانية من الفيديو على أجهزة الكمبيوتر المكتبي، ولكن لا يخزّن أي فيديو على أجهزة iOS أو Android. وهذا يعني أنه على الأجهزة الجوّالة، قد تحدث تأخيرات عند بدء تشغيل التشغيل لا تحدث على سطح المكتب. لمزيد من التفاصيل، يُرجى الاطّلاع على التشغيل السريع باستخدام التحميل المُسبق للصوت والفيديو أو مدونة "ستيف سودرز".

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