علامات <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>. على سبيل المثال، يبدأ تشغيل الفيديو عند الدقيقة 1 و5 ثوانٍ باستخدام الرمز #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 لتحديد حجم العناصر استنادًا إلى سمات مساحة العرض.max-width: 100%

بالنسبة إلى محتوى الوسائط في إطارات 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. وهذا يعني أنّه قد يحدث تأخير في بدء التشغيل على الأجهزة الجوّالة لا يحدث على أجهزة الكمبيوتر المكتبي. اطّلِع على التشغيل السريع مع تحميل الصوت والفيديو مسبقًا أو مدوّنة Steve Souders للحصول على مزيد من التفاصيل.

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