javascript - Chrome 66 के साथ डेस्कटॉप पर उपयोगकर्ता द्वारा पहले दस्तावेज़ में इंटरैक्ट नहीं किए जाने के कारण "निर्विरोध(वादे में) DOMException: play() विफल रहा है?




google-chrome video (9)

मुझे त्रुटि संदेश मिल रहा है ..

अनकैप्ड (वादे में) DOMException: play () विफल रहा क्योंकि उपयोगकर्ता ने पहले दस्तावेज़ के साथ बातचीत नहीं की थी।

.. जब आप Chrome संस्करण 66 का उपयोग करके डेस्कटॉप पर वीडियो चलाने का प्रयास कर रहे हैं।

मुझे एक विज्ञापन मिला, जो निम्नलिखित 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>

तो क्या क्रोम v66 के ऑटोप्ले ब्लॉकर को पार करना वास्तव में उतना ही आसान है, जितना कि webkit-playsinline="true" , playsinline="true" , और autoplay="" <video> एलिमेंट को playsinline="true" ? क्या इसके कोई नकारात्मक परिणाम हैं?


अद्यतन करें

यदि यह तकनीक किसी भी अधिक काम नहीं करती है - एक और विकल्प है। आप एक छोटा और बहुत शांत (-60db) ऑडियो शामिल कर सकते हैं और इसे छिपे हुए बटन के क्लिक हैंडलर के अंदर खेल सकते हैं। उसके बाद, अन्य सभी ऑडियो / वीडियो फ़ाइलों को प्रत्यक्ष उपयोगकर्ता सहभागिता के बिना खेलने की अनुमति होगी। आप http://adventure.land/sounds/loops/empty_loop_for_js_performance.wav से एक मूक ऑडियो ले सकते हैं और इसे आधा सेकंड (या कम) में काट सकते हैं।

एक बहुत ही आसान उपाय है - बस अपने पेज में एक बटन जोड़ें, इसे अदृश्य करने के लिए स्टाइल करें और फिर play() से पहले कॉल बटन button.click() विधि play()

क्रोमियम संस्करण 70.0.3538.67 (आधिकारिक बिल्ड) (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. पुनः लोड करें क्रोम

Html 5 तत्वों पर ऑटोप्ले करने के लिए क्रोम 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>

मेरा मानना ​​है कि क्रोम 66 अद्यतन उपयोगकर्ताओं के टैब पर यादृच्छिक शोर पैदा करने वाले टैब को रोकने की कोशिश कर रहा है। इसलिए म्यूट की गई संपत्ति ऑटोप्ले को फिर से काम करती है।


आप अपने videoElement अंदर muted विशेषता को अपने कोड काम के लिए उम्मीद के अनुसार जोड़ देना चाहिए। बलो देखो ।।

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

स्रोत के रूप में मान्य वीडियो लिंक जोड़ना न भूलें


मूसमोव इवेंट लिसेंटनर का उपयोग करने का प्रयास करें

var audio = document.createElement("AUDIO")
document.body.appendChild(audio);
audio.src = "./audio/rain.m4a"

document.body.addEventListener("mousemove", function () {
    audio.play()
})

मेरे पास एंड्रॉइड फोन पर खेलने के कुछ मुद्दे थे। कुछ प्रयासों के बाद मुझे पता चला कि जब डेटा सेवर होता है तो कोई ऑटो प्ले नहीं होता है:

यदि डेटा सेवर मोड सक्षम है, तो कोई ऑटोप्ले नहीं है। यदि डेटा सेवर मोड सक्षम है, तो ऑटोप्ले मीडिया सेटिंग्स में अक्षम है।

Source


सबसे अच्छा समाधान मुझे पता चला कि वीडियो को म्यूट करना है

एचटीएमएल

<video loop muted autoplay id="videomain">
  <source src="videoname.mp4" type="video/mp4">
</video>

सवाल का जवाब हाथ में ...
नहीं, इन विशेषताओं को रखने के लिए पर्याप्त नहीं है, ऑडियो के साथ एक मीडिया को ऑटोप्ले करने में सक्षम होने के लिए आपको अपने दस्तावेज़ में उपयोगकर्ता-हावभाव को पंजीकृत करना होगा।

लेकिन, यह सीमा बहुत कमजोर है: यदि आपने मूल दस्तावेज पर यह उपयोगकर्ता-इशारा प्राप्त किया है, और आपका वीडियो एक 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>

इसका अर्थ है कि आपका विज्ञापन संभवतः इसलिए चला पा रहा था क्योंकि आपने मुख्य पृष्ठ पर एक उपयोगकर्ता-इशारा प्रदान किया था।

अब, ध्यान दें कि सफारी और मोबाइल क्रोम की तुलना में कठोर नियम हैं, और आपको उपयोगकर्ता-ईवेंट हैंडलर से ही <video> या <audio> एलिमेंट पर प्रोग्राम play() विधि पर कम से कम एक बार ट्रिगर करने की आवश्यकता होगी।

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>

और अगर आपको ऑडियो की आवश्यकता नहीं है, तो बस इसे अपने मीडिया से न जोड़ें, केवल वीडियो ट्रैक वाले वीडियो को ऑटोप्ले करने की भी अनुमति है, और आपके उपयोगकर्ता के बैंडविड्थ उपयोग को कम कर देगा।


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