الفيديو

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

إضافة مقطع فيديو

تعرف على أسهل طرق إضافة الفيديو إلى موقعك وتأكد من ترك أفضل انطباع لدى المستخدمين على أي جهاز.

TL;DR

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

إضافة عنصر الفيديو

أضف عنصر الفيديو لتحميل الفيديو على موقعك وفك ترميزه وتشغيله:

<video src="chrome.webm" type="video/webm">
    <p>متصفحك ليس متوافقًا مع عنصر الفيديو.</p>
</video>

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

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

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm">
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4">
  <p>This browser does not support the video element.</p>
</video>

عندما يحلل المتصفح علامات <source>، فإنه يستخدم السمة الاختيارية type للمساعدة في تحديد الملف المطلوب تنزيله وتشغيله. إذا كان المتصفح يتوافق مع WebM، فسيتم تشغيل chrome.webm، وإلا، فسيتم التحقق مما إذا كان يمكن تشغيل مقاطع فيديو MPEG-4. يمكنك الاطلاع على A Digital Media Primer for Geeks لاستكشاف المزيد حول آلية عمل الفيديو والصوت على الويب.

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

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

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

باستخدام أدوات مطوِّري متصفح الجوّال، يمكنك مقارنة نشاط الشبكة مع سمات النوع وwithout type attributes. راجع كذلك رؤوس الاستجابة في أدوات مطوِّري المتصفح للتأكد من أن الخادم يعرض نوع MIME المناسب، وإلا فلن تعمل فحوصات نوع مصدر الفيديو.

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

اهتم بتوفير معدل نقل البيانات وجعل الموقع يبدو أكثر سرعة في الاستجابة من خلال استخدام واجهة برمجة تطبيقات Media Fragments لإضافة وقت بدء ووقت انتهاء إلى عنصر الفيديو.

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

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

يمكنك أيضًا استخدام واجهة برمجة تطبيقات Media Fragments لتقديم عدة عروض على مقطع الفيديو نفسه - مثل نقاط التلميح في DVD - بدون الاضطرار إلى ترميز عدة ملفات وعرضها.

باستخدام أدوات مطوِّري برامج المتصفح، راجع Accept-Ranges: bytes في رؤوس الاستجابة:

Chrome Dev Tools screenshot: Accept-Ranges: bytes

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

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

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

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

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

Android Chrome screenshot, portrait: no poster Android Chrome screenshot, portrait: with poster

توفير خيارات بديلة لأنظمة التشغيل القديمة

لا تتوافق جميع تنسيقات الفيديو على جميع أنظمة التشغيل. ويمكنك الاطلاع على التنسقات المتوافقة على أنظمة التشغيل الأساسية والتأكد من توافق الفيديو مع كل منها.

الاطلاع على التنسيقات المتوافقة

يمكنك استخدام canPlayType() للبحث عن تنسيقات الفيديو المتوافقة. وتحتاج هذه الطريقة إلى وسيط سطر ثابت من mime-type وبرامج ترميز اختيارية للخروج بإحدى القيم التالية:

القيمة المعروضة الوصف
(سطر فارغ) الحاوية و/أو برنامج الترميز غير متوافق.
maybe قد تكون الحاوية أو برامج الترميز متوافقة، ولكن يحتاج المتصفح إلى تنزيل فيديو ما للفحص.
probably يبدو أن التنسيق متوافق.

في ما يلي بعض الأمثلة على وسيطات canPlayType() والقيم الناتجة عند التشغيل في Chrome:

النوع الاستجابة
video/xyz (سطر فارغ)
video/xyz; codecs="avc1.42E01E, mp4a.40.2" (سطر فارغ)
video/xyz; codecs="nonsense, noise" (سطر فارغ)
video/mp4; codecs="avc1.42E01E, mp4a.40.2" probably
video/webm maybe
video/webm; codecs="vp8, vorbis" probably

إنتاج الفيديو بعدة تنسيقات

هناك الكثير من الأدوات التي تساعد في حفظ فيديو واحد بعدة تنسيقات مختلفة:

التحقق من التنسيق المستخدم

هل تريد معرفة التنسيق الذي اختاره المتصفح بالفعل؟

في جافا سكريبت، يمكنك استخدام الخاصية currentSrc في الفيديو لعرض المصدر المستخدم.

للاطلاع على ذلك عمليًا، يمكنك الرجوع إلى هذا العرض التجريبي: يختار كل من Chrome وFirefox ما يلي chrome.webm (نظرًا لأنه الخيار الأول في قائمة المصادر الممكنة التي يتوافق معها هذان المتصفحان) بينما يختار Safari ما يلي chrome.mp4.

استخدام حجم الفيديو المناسب

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

TL;DR

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

التحقق من حجم الفيديو

قد يختلف الحجم الفعلي لإطار الفيديو عن أبعاد عنصر الفيديو (كما هو الحال عندما لا تظهر الصورة باستخدام أبعادها الحقيقية).

وللتحقق من حجم ترميز الفيديو، يمكنك استخدام عنصر الفيديو videoWidth وخصائص videoHeight. يعرض كل من width وheight أبعاد عنصر الفيديو التي ربما يكون تم تحديد حجمها باستخدام CSS أو سمات العرض والطول المضمَّنة.

التأكد من عدم تجاوز مقاطع الفيديو لحدود الحاويات

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

Android Chrome screenshot, portrait: unstyled video element overflows viewport Android Chrome screenshot, landscape: unstyled video element overflows viewport

يمكنك التحكم في أبعاد الفيديو باستخدام جافا سكريبت أو CSS. تتيح مكتبات جافا سكريبت والمكوِّنات الإضافية أيضًا مثل FitVids إمكانية الحفاظ على الحجم ونسبة العرض إلى الارتفاع المناسبة، حتى بالنسبة إلى مقاطع فيديو Flash من YouTube والصادر الأخرى.

يمكنك استخدام استعلامات وسائط CSS لتحديد حجم العناصر بناءً على أبعاد إطار العرض؛ ويعتبر max-width: 100% الخيار الصديق.

بالنسبة إلى محتوى الوسائط في إطارات iframes (مثل مقاطع فيديو YouTube)، جرب طريقة الاستجابة السريعة (على غرار ما يقترحه جون سورداكوسكي](//avexdesigns.com/responsive-youtube-embed/)).

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>

قارن النموذج سريع الاستجابة بـ النسخة بطيئة الاستجابة.

تخصيص مشغِّل الفيديو

تعرض أنظمة التشغيل المختلفة مقطع الفيديو على نحو مختلف. ويجب أن تهتم حلول الجوّال باتجاه الجهاز. استخدم واجهة برمجة تطبيقات Fullscreen للتحكم في عرض ملء الشاشة لمحتوى الفيديو.

تعرض أنظمة التشغيل المختلفة مقطع الفيديو على نحو مختلف. ويجب أن تهتم حلول الجوّال باتجاه الجهاز. استخدم واجهة برمجة تطبيقات Fullscreen للتحكم في عرض ملء الشاشة لمحتوى الفيديو.

كيفية عمل اتجاه الجهاز على الأجهزة المختلفة

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

يؤدي متصفح Safari على iPhone مهمة رائعة من خلال التبديل بين الاتجاه العمودي والأفقي:

لقطة شاشة لفيديو يعمل على متصفح Safari لجهاز iPhone في الاتجاه العمودي لقطة شاشة لفيديو يعمل على متصفح Safari لجهاز iPhone في الاتجاه الأفقي

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

لقطة شاشة لفيديو يعمل على متصفح Safari لجهاز iPad Retina في الاتجاه الأفقي

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

العرض المضمَّن أو بملء الشاشة

تعرض أنظمة التشغيل المختلفة مقطع الفيديو على نحو مختلف. يعرض متصفح Safari على iPhone عنصر الفيديو مضمَّنًا على صفحة الويب، ولكن يشغِّل الفيديو في وضع ملء الشاشة:

لقطة شاشة لعنصر الفيديو على iPhone في الاتجاه العمودي

على Android، يمكن للمستخدمين طلب وضع ملء الشاشة من خلال النقر على رمز ملء الشاشة. ولكن الإعداد الافتراضي هو تشغيل الفيديو مضمَّنًا:

لقطة شاشة لمقطع فيديو يعمل على متصفح Chrome لجهاز Android في الاتجاه العمودي

يشغِّل متصفح Safari على iPad الفيديو مضمَّنًا:

لقطة شاشة لفيديو يعمل على متصفح Safari لجهاز iPad Retina في الاتجاه الأفقي

التحكم في ملء الشاشة بالمحتوى

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

لملء الشاشة بعنصر ما، مثل video:

elem.requestFullScreen();

لملء الشاشة بالمستند بالكامل:

document.body.requestFullScreen();

يمكنك أيضًا الاستماع إلى تغييرات حالة ملء الشاشة:

video.addEventListener("fullscreenchange", handler);

كما يمكنك الاطلاع لمعرفة ما إذا كان العنصر في وضع ملء الشاشة حاليًا أم لا:

console.log("In full screen mode: ", video.displayingFullscreen);

يمكنك أيضًا استخدام الفئة الصورية :fullscreen في CSS لتغيير طريقة عرض العناصر في وضع ملء الشاشة.

على الأجهزة التي تتوافق مع واجهة برمجة تطبيقات Fullscreen، فكر في استخدام الصور المصغَّرة بمثابة عناصر نائبة للفيديو:

للاطلاع على ذلك عمليًا، راجع demo.

المسائل المتعلقة بإمكانية الوصول

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

تضمين التسميات التوضيحية لتحسين إمكانية الوصول

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

باستخدام عنصر المسار الصوتي، تظهر التسميات التوضيحية على النحو التالي:

لقطة شاشة تعرض تسميات توضيحية تظهر باستخدام عنصر المسار الصوتي في Chrome على Android

إضافة عنصر مسار صوتي

من السهل جدًا إضافة تسميات توضيحية إلى الفيديو؛ وذلك من خلال إضافة عنصر مسار صوتي كفرع لعنصر الفيديو:

<video controls>
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.webm" type="video/webm" />
  <source src="https://storage.googleapis.com/webfundamentals-assets/videos/chrome.mp4" type="video/mp4" />
  <track src="chrome-subtitles-en.vtt" label="English captions"
         kind="captions" srclang="en" default>
  <p>This browser does not support the video element.</p>
</video>

توفر سمة عنصر المسار الصوتي src موقع ملف المسار الصوتي.

تحديد التسميات التوضيحية في ملف المسار الصوتي

يتضمن ملف المسار الصوتي تلميحات بالوقت بتنسيق WebVTT:

WEBVTT

00:00.000 --> 00:04.000
رجل يجلس على فرع شجرة ويستخدم جهاز كمبيوتر محمولاً.

00:05.000 --> 00:08.000
انكسر الفرع وبدأ الرجل في السقوط.

...

مرجع سريع

نظرة عامة سريعة حول الخواص على عنصر الفيديو.

سمات عنصر الفيديو

للحصول على القائمة الكاملة بسمات عنصر الفيديو وتعريفاتها، يمكنك الاطلاع على مواصفات عنصر الفيديو.

السمة مدى التوفر الوصف
src جميع المتصفحات عنوان URL للفيديو.
poster جميع المتصفحات عنوان URL لملف الصورة التي يمكن للمتصفح عرضها بمجرد عرض عنصر الفيديو، بدون تنزيل محتوى الفيديو.
preload جميع متصفحات الجوّال تتجاهل التحميل المسبق (preload). تلميحات للمتصفح تشير إلى أهمية تحميل البيانات الوصفية (أو فيديو ما) مسبقًا للتشغيل. الخيارات المتوفرة `لا شيء` و`البيانات الوصفية` و`تلقائي` (راجع قسم التحميل المسبق للحصول على تفاصيل).
autoplay غير متوافقة على iPhone وAndroid وتتوافق مع جميع متصفحات أجهزة سطح المكتب وiPad وFirefox وOpera لنظام التشغيل Android. بدء التنزيل والتشغيل في أقرب وقت ممكن (راجع قسم التشغيل التلقائي).
loop جميع المتصفحات استدارة الفيديو.
controls جميع المتصفحات عرض عناصر التحكم الافتراضية في الفيديو (التشغيل والإيقاف مؤقتًا وما إلى ذلك).

التشغيل التلقائي

في أجهزة سطح المكتب، يطلب autoplay من المتصفح بدء تنزيل الفيديو وتشغيله في الحال وفي أقرب وقت ممكن. في أجهزة iOS وChrome لنظام Android، لا يعمل autoplay؛ ويتعين على المستخدمين النقر على الشاشة لتشغيل الفيديو.

حتى على أنظمة التشغيل التي يتم تمكين التشغيل التلقائي فيها، يجب التفكير جيدًا في جدوى تمكينه:

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

يمكن ضبط سلوك التشغيل التلقائي في Android WebView عبر واجهة برمجة تطبيقات WebSettings. يتم اختيار الإعداد الافتراضي على صواب ولكن يمكن لتطبيق WebView اختيار تعطيله.

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

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

القيمة الوصف
none قد لا يشاهد المستخدم مقطع الفيديو – عدم تحميل أي شيء مسبقًا
metadata يجب تحميل البيانات الوصفية (المدة والأبعاد ومسارات النص) مسبقًا، ولكن بأصغر فيديو.
auto يُعتبر تنزيل الفيديو الكامل مباشرة أمرًا مفضلاً.

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

جافا سكريبت

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

الخصائص

الخاصية الوصف
currentTime الحصول على موضع التشغيل بالثواني أو تعيينه.
volume الحصول على مستوى الصوت الحالي للفيديو أو تعيينه.
muted الحصول على كتم الصوت أو تعيينه.
playbackRate الحصول على معدل التشغيل، السرعة العادية هي 1 للأمام.
buffered معلومات حول مقدار الفيديو الذي يتم تخزينه وتجهيزه للتشغيل (راجع العرض التجريبي).
currentSrc عنوان الفيديو المطلوب تشغيله.
videoWidth عرض الفيديو بالبكسل (قد يكون مختلفًا عن عرض عنصر الفيديو).
videoHeight طول الفيديو بالبكسل (قد يكون مختلفًا عن طول عنصر الفيديو).

لا يتوافق كل من playbackRate (راجع العرض التجريبي) ومستوى الصوت على الجوّال.

الطرق

الطريقة الوصف
load() حمِل مصدر الفيديو أو أعد تحميله بدون بدء التشغيل: على سبيل المثال، عندما يتم تغيير السمة src للفيديو باستخدام جافا سكريبت.
play() تشغيل الفيديو من موقعه الحالي.
pause() وقف الفيديو مؤقتًا في موقعه الحالي.
canPlayType('format') التعرف على التنسيقات المتوافقة (راجع `التعرف على التنسيقات المتوافقة`).

على الجوّال (باستثناء Opera وAndroid) لا يعمل كل من play() وpause() ما لم يتم طلب استجابة لإجراء المستخدم، مثل النقر على زر ما: راجع: see the العرض التجريبي. (وهكذا، لا يمكن بدء التشغيل للمحتوى مثل مقاطع فيديو YouTube المضمَّنة).

الأحداث

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

الحدث الوصف
canplaythrough يتم التشغيل عندما تتوفر بيانات كافية تفيد بأن المتصفح يعتقد أنه يمكن تشغيل الفيديو بالكامل بدون أعطال.
ended يتم التشغيل عندما ينتهي تشغيل الفيديو.
error يتم التشغيل عندما يظهر خطأ.
playing يتم التشغيل عندما يبدأ تشغيل الفيديو لأول مرة بعد الإيقاف المؤقت أو عند إعادة التشغيل.
progress يتم التشغيل من آن لآخر للإشارة إلى أن التنزيل قيد التقدم.
waiting يتم التشغيل عندما يتأخر الإجراء في انتظار اكتمال إجراء آخر.
loadedmetadata يتم التشغيل عندما ينتهي المتصفح من تحميل البيانات الوصفية للفيديو: المدة والأبعاد والمسارات النصية.