تعرض HTMLMediaElement.play() وعدًا

Jeff Posnick

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

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

يؤدي استدعاء play() على عنصر <video> أو <audio> إلى عرض وعد الآن. إذا نجح التشغيل، فسيتم تنفيذ الوعد، وإذا فشل التشغيل، يتم رفض الوعد مع رسالة خطأ تشرح الخطأ. يتيح لك هذا كتابة تعليمات برمجية بديهية كما يلي:

var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
    playPromise.then(function() {
    // Automatic playback started!
    }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
    });
}

بالإضافة إلى رصد ما إذا كانت طريقة play() ناجحة أم لا، تتيح لك الواجهة الجديدة المستندة إلى Promise تحديد وقت نجاح طريقة play(). هناك سياقات قد يقرّر فيها متصفّح الويب تأجيل بدء التشغيل، على سبيل المثال، لن يبدأ متصفّح Chrome لأجهزة الكمبيوتر المكتبي تشغيل <video> إلى أن تظهر علامة التبويب. لن يتم تنفيذ الوعد إلا بعد بدء التشغيل، ما يعني أنّ الرمز البرمجي داخل then() لن يتم تنفيذه إلا بعد تشغيل الوسائط. إنّ الطُرق السابقة لتحديد ما إذا كان play() ناجحًا، مثل الانتظار لفترة زمنية محدَّدة لحدث playing وافتراض تعذُّر بدء الحدث في حال لم يتم تنشيطه، تكون عرضةً للنتائج السلبية الخاطئة في سيناريوهات التشغيل المتأخر.

ونشرنا مثالاً مباشرًا لهذه الوظيفة الجديدة. يمكنك عرضه في متصفّح مثل Chrome 50 المتوافق مع هذه الواجهة المستندة إلى الوعد. احذر: ستشغّل الصفحة الموسيقى تلقائيًا عند الانتقال إليها. (بالطبع، لا يحدث ذلك!)

قسم الخطر

لا يتم رفض أي وعود بشأن استخدام "<source>" في نطاق <video> مع "play()".

بالنسبة إلى <video src="not-existing-video.mp4"\>، يتم رفض وعد play() بسبب عدم توفّر الفيديو. بالنسبة إلى <video><source src="not-existing-video.mp4" type='video/mp4'></video>، لا يتم رفض وعد play() مطلقًا. ولا يحدث ذلك إلا في حال عدم توفّر مصادر صالحة.

خطأ Chromium