علامات <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 لتحديد حجم العناصر بناءً على أبعاد إطار العرض، وسيكون 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: كان يتطلّب في السابق إيماءة مستخدم، ولكنّه بدأ في تخفيف هذا الشرط في الإصدارات الأخيرة. للحصول على التفاصيل، يُرجى الاطّلاع على سياسات <video> الجديدة لنظام التشغيل iOS.

حتى على الأنظمة الأساسية التي تتيح ميزة التشغيل التلقائي، عليك التفكير في ما إذا كان تفعيلها مناسبًا:

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

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

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

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

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