javascript - ويب - كيفية التعامل مع "لم يتم اكتشافه(الوعد) DOMException: play() فشل لأن المستخدم لم يتفاعل مع المستند أولاً." على سطح المكتب مع Chrome 66؟




جوجل عصر ويب (9)

أتلقى رسالة الخطأ ..

لم يتم اكتشافه (الوعد) DOMException: play () لأن المستخدم لم يتفاعل مع المستند أولاً.

.. عندما تحاول تشغيل الفيديو على سطح المكتب باستخدام الإصدار 66 من Chrome.

لقد وجدت إعلانًا بدأ التشغيل تلقائيًا على موقع ويب باستخدام HTML التالي:

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://ds.serving-sys.com/BurstingRes/Site-2500/Type-16/1ff26f6a-aa27-4b30-a264-df2173c79623.mp4"
    autoplay=""></video>

إذن ، هل من السهل تجاوز حاجز التشغيل التلقائي لـ Chrome v66 بنفس سهولة إضافة webkit-playsinline="true" ، و playsinline="true" ، و autoplay="" إلى عناصر <video> ؟ هل هناك أي عواقب سلبية لهذا؟


تحديث

إذا لم تنجح هذه التقنية بعد الآن - فهناك خيار آخر. يمكنك تضمين صوت قصير وهادئ للغاية (-60db) وتشغيله داخل معالج النقر فوق الزر المخفي. بعد ذلك ، سيتم السماح بتشغيل جميع ملفات الصوت / الفيديو الأخرى دون تفاعل مباشر مع المستخدم. يمكنك أن تأخذ صوتًا صامتًا من http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav وتقطعه إلى نصف ثانية (أو أقل).

هناك حل سهل للغاية - ما عليك سوى إضافة زر إلى صفحتك ، button.click() ليكون غير مرئي ، ثم استدعاء أسلوب button.click() قبل play()

يعمل مثل السحر في Chromium الإصدار 70.0.3538.67 (Official Build) (64 بت)

var btn = document.getElementById('btn');
document.addEventListener(btn,myPlay,false);
btn.click();

function myPlay()
{
  document.getElementById('movie').play();
}
<video
    title="Advertisement" id="movie"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm"
    ></video>
    <button type="button" style="z-index:-1;opacity:0;position: absolute;left:-1000px;" id="btn"></button>


  1. افتح chrome://flags/#autoplay-policy
  2. الإعداد لا يلزم لفتة المستخدم
  3. أعد تشغيل Chrome

اكتب Chrome: // الإشارات في شريط العناوين

البحث: التشغيل التلقائي

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

السياسة المتبعة عند تحديد ما إذا كان الصوت أو الفيديو مسموحًا بتشغيله تلقائيًا.

- Mac و Windows و Linux و Chrome OS و Android

عيّن هذا على " لا توجد إيماءات المستخدم مطلوبة "

أعد تشغيل Chrome ولا يلزمك تغيير أي رمز


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

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

لذلك خذ على سبيل المثال هذا الكمان ، وهو فقط

<video src="myvidwithsound.webm" autoplay=""></video>

عند التحميل لأول مرة ، وإذا لم تنقر فوق أي مكان ، فلن يعمل ، لأنه ليس لدينا أي حدث مسجل حتى الآن.
ولكن بمجرد النقر فوق الزر "تشغيل" ، فإن المستند الأصل (jsfiddle.net) تلقى إيماءة للمستخدم ، والآن يتم تشغيل الفيديو ، على الرغم من أنه يتم تحميله تقنيًا في مستند مختلف.

ولكن المقتطف التالي ، لأنه يتطلب منك النقر فعليًا على زر " تشغيل شفرة المقتطف" ، سيتم تشغيله تلقائيًا.

<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" autoplay=""></video>

هذا يعني أن إعلانك ربما كان قادرًا على اللعب لأنك قدمت إيماءة للمستخدم إلى الصفحة الرئيسية.

الآن ، لاحظ أن Safari و Mobile Chrome لديهما قواعد أكثر صرامة من ذلك ، وسيطلبان منك تشغيل ما لا يقل عن مرة واحدة بطريقة play() بطريقة برمجية على عنصر <video> أو <audio> من معالج حدث المستخدم نفسه.

btn.onclick = e => {
  // mark our MediaElement as user-approved
  vid.play().then(()=>vid.pause());
  // now we can do whatever we want at any time with this MediaElement
  setTimeout(()=> vid.play(), 3000);
};
<button id="btn">play in 3s</button>
<video
  src="https://upload.wikimedia.org/wikipedia/commons/transcoded/2/22/Volcano_Lava_Sample.webm/Volcano_Lava_Sample.webm.360p.webm" id="vid"></video>

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


لجعل التشغيل التلقائي على عناصر html 5 يعمل بعد تحديث chrome 66 ، تحتاج فقط إلى إضافة خاصية muted إلى عنصر الفيديو.

لذلك الفيديو الخاص بك الحالية HTML

<video
    title="Advertisement"
    webkit-playsinline="true"
    playsinline="true"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay=""></video>

يحتاج فقط إلى muted="muted"

<video
    title="Advertisement"
    style="background-color: rgb(0, 0, 0); position: absolute; width: 640px; height: 360px;"
    src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    autoplay="true"
    muted="muted"></video>

أعتقد أن تحديث chrome 66 يحاول إيقاف علامات التبويب التي تحدث ضوضاء عشوائية على علامات تبويب المستخدمين. لهذا السبب تجعل خاصية كتم الصوت تشغيل التشغيل التلقائي مرة أخرى.


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

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


واجهت بعض المشكلات في Android Phone. بعد محاولات قليلة ، اكتشفت أنه عند تشغيل "توفير البيانات" ، لا توجد ميزة تشغيل تلقائي:

لا يوجد تشغيل تلقائي إذا تم تمكين وضع " توفير البيانات ". إذا تم تمكين وضع توفير البيانات ، يتم تعطيل التشغيل التلقائي في إعدادات الوسائط.

Source


يجب أن تكون قد أضفت سمة muted داخل videoElement الخاص بك لعمل التعليمات البرمجية كما هو متوقع. انظر أدناه

<video id="IPcamerastream" muted="muted" autoplay src="videoplayback%20(1).mp4" width="960" height="540"></video>

لا تنس إضافة رابط فيديو صالح كمصدر


تمديد عنصر DOM ، والتعامل مع الخطأ ، وانخفاض درجة بأمان

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

// JavaScript
// Wrap the native DOM audio element play function and handle any autoplay errors
Audio.prototype.play = (function(play) {
return function () {
  var audio = this,
      args = arguments,
      promise = play.apply(audio, args);
  if (promise !== undefined) {
    promise.catch(_ => {
      // Autoplay was prevented. This is optional, but add a button to start playing.
      var el = document.createElement("button");
      el.innerHTML = "Play";
      el.addEventListener("click", function(){play.apply(audio, args);});
      this.parentNode.insertBefore(el, this.nextSibling)
    });
  }
};
})(Audio.prototype.play);

// Try automatically playing our audio via script. This would normally trigger and error.
document.getElementById('MyAudioElement').play()

<!-- HTML -->
<audio id="MyAudioElement" autoplay>
  <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
  <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>




html5-video