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

122

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

अनकैप्ड (वादा में) 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>तत्व? क्या इसके कोई नकारात्मक परिणाम हैं?

— स्टीवन
स्रोत

2

मुझे लगता है कि playinline एक iOS चीज है।

— जोश ली

125

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 अद्यतन उपयोगकर्ताओं के टैब पर यादृच्छिक शोर पैदा करने वाले टैब को रोकने की कोशिश कर रहा है। इसलिए म्यूट की गई संपत्ति ऑटोप्ले को फिर से काम करती है।

— जो
स्रोत

एक घंटे के लिए मेरे बाल खींचने के बाद। इसने मेरे मुद्दे को तय किया

— एंडी मैककॉर्मिक

क्या वीडियो चलाने के बाद ऑडियो को सक्षम करने का कोई तरीका है? muteविशेषता या सेटिंग volumeविशेषता को निकालना मदद नहीं करता है।

— निकितहल

MacOs क्रोम वर्जन 74.0.3729.131 पर दोनों स्निपेट्स ब्लैक स्क्रीन देते हैं

— कामिल कीवल्स्कीस्की

@ KamilKiełczewski वीडियो srcअमान्य होने के कारण काली स्क्रीन दिखा रहा था। मैंने स्निपेट अपडेट किया है srcइसलिए वीडियो ऑटो प्ले करता है।

— जो

2

मुझे muted="true"इसके बजाय करना था

— tgordon18

13

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

एचटीएमएल

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

— Moiz
स्रोत

12

खुला हुआ chrome://settings/content/sound
कोई उपयोगकर्ता हावभाव सेट करना आवश्यक है
पुनः लोड करें क्रोम

— मिंग
स्रोत

6

ऑटोप्ले नीति में बदलाव। मुझे क्लिक करें

— मिंग

4

यह केवल डेवलपर के लिए क्रोम ऑटोप्ले पॉलिसी व्यवहार का स्थानीय स्तर पर परीक्षण करने के लिए उपयोग करता है। Developers.google.com/web/updates/2017/09/…/

— टुआन गुयेन

5

मैंने पाया कि कमांड लाइन ध्वज --autoplay-policy=no-user-gesture-requiredइस सेटिंग को प्राप्त करने का प्रोग्रामेटिक तरीका है।

— निकोनियास

27

यह केवल आपके ब्राउज़र के लिए काम करता है, बाकी सब अभी भी प्रभावित होंगे

— koosa

37

इस उत्तर को कौन बढ़ा रहा है? यह superuser.com नहीं है। आपकी स्थानीय मशीन का समाधान स्वीकार्य उत्तर नहीं हो सकता है।

— adripanico

11

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

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

स्निपेट का विस्तार करें

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

अब, ध्यान दें कि सफारी और मोबाइल क्रोम की तुलना में सख्त नियम हैं, और आपको उपयोगकर्ता-इवेंट हैंडलर से 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>

स्निपेट का विस्तार करें

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

— Kaiido
स्रोत

11

मेरे लिए (कोणीय परियोजना में) इस कोड ने मदद की:

HTML में आपको जोड़ना चाहिए autoplay muted

जेएस / टीएस में

playVideo() {
    const media = this.videoplayer.nativeElement;
    media.muted = true; // without this line it's not working although I have "muted" in HTML
    media.play();
}

— Eutrepe
स्रोत

1

बिल्कुल सच और अविश्वसनीय, यहां तक कि Ng8 के साथ, नवीनतम कोणीय संस्करण। कोणीय केवल इस बात की परवाह नहीं करता है कि घटक के HTML टेम्पलेट पर क्या हो रहा है!

— पेड्रो फरेरा

2

और, नए कोणीय के उपयोग के तरीके से @ViewChild()आपको सत्य के लिए स्टैटिक विकल्प सेट करने की आवश्यकता है: @ViewChild('videoPlayer', {static: true}) videoplayer: ElementRef; video: HTMLVideoElement; और फिर: this.video = this.videoplayer.nativeElement;@ngOnInit()

— पेड्रो फरेरा

1

यह मेरा मुद्दा था, HTML में म्यूट किया गया पूरी तरह से नजरअंदाज कर दिया गया था और मुझे इसे JS द्वारा मजबूर करना पड़ा। + 1M आपके जवाब के दिनों की खोज के बाद

— इग्नासियो बस्टोस

यह मेरे मामले में सही जवाब है, पूरी तरह से काम किया है

— हैरी। नईम

वाह, विश्वास नहीं कर सकता कि मुझे वास्तव में कोणीय एसएसआर पोस्ट-लोड विचारों के लिए जावास्क्रिप्ट-साइड म्यूटिंग की आवश्यकता थी। इस पूरे समय, मुझे लगा कि HTML समस्या थी।

— आरा

7

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

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

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

— 時雨初
स्रोत

4

DOM एलिमेंट को बढ़ाएं, एरर को हैंडल करें और Gracefully को डीग्रेड करें

नीचे मैं मूल डोम प्ले फ़ंक्शन को लपेटने के लिए प्रोटोटाइप फ़ंक्शन का उपयोग करता हूं, इसके वादे को पकड़ो, और फिर एक प्ले बटन को नीचा दिखाना अगर ब्राउज़र एक अपवाद फेंकता है। यह एक्सटेंशन ब्राउज़र की कमी को संबोधित करता है और किसी भी पृष्ठ में लक्ष्य-तत्व के ज्ञान के साथ प्लग-एन-प्ले है।

// 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>

— Bernesto
स्रोत

यह एक बहुत ही चतुर दृष्टिकोण है, जो किसी भी नीति को नहीं तोड़ता है (क्योंकि प्लेबैक किसी भी तरह से शुरू नहीं होता है), और त्रुटियों को रोकता है। +1

— लोरेटोपार्सी

3

मेरे मामले में, मुझे यह करना था

 // Initialization in the dom
 // Consider the muted attribute
 <audio id="notification" src="path/to/sound.mp3" muted></audio>


 // in the js code unmute the audio once the event happened
 document.getElementById('notification').muted = false;
 document.getElementById('notification').play();

— Shobi
स्रोत

2

Chrome को वीडियो को ऑटोप्ले करने या js (video.play ()) के माध्यम से चलाने के लिए एक उपयोगकर्ता सहभागिता की आवश्यकता है। लेकिन बातचीत किसी भी क्षण, किसी भी तरह की हो सकती है। यदि आप पृष्ठ पर सिर्फ यादृच्छिक क्लिक करते हैं, तो वीडियो ऑटोप्ले होगा। मैंने तब हल किया, एक बटन (केवल क्रोम ब्राउज़रों पर) जो "वीडियो ऑटोप्ले सक्षम करें" कहता है। बटन कुछ भी नहीं करता है, लेकिन बस इसे क्लिक करना, किसी भी आगे के वीडियो के लिए आवश्यक उपयोगकर्ता इंटरैक्शन है।

— Alarik
स्रोत

1

ऑडियो फ़ाइल चलाने का प्रयास करते समय मुझे इसी तरह की त्रुटि का सामना करना पड़ा। सबसे पहले, यह काम कर रहा था, तब इसने काम करना बंद कर दिया जब मैंने एक चेंज में रेकॉर्ड markForCheckरेंडर को ट्रिगर करने के लिए उसी फ़ंक्शन में ChangeDetector की विधि का उपयोग करना शुरू किया, जब एक वादा हल होता है (मेरे पास व्यू रेंडरिंग के साथ एक समस्या थी)।

जब मैं बदल markForCheckकरने के लिए detectChangesइसे फिर से काम करना शुरू किया। मैं वास्तव में यह नहीं समझा सकता कि क्या हुआ था, मैंने इसे यहाँ छोड़ने का सोचा था, शायद यह किसी की मदद करेगा।

— राजा जेम्स एनजो
स्रोत

1

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

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

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

— GNETO डोमिनीक
स्रोत

0

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

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

स्रोत

— मैं करता हूँ
स्रोत

-6

Chrome टाइप करें : एड्रेस-बार में झंडे

खोज: ऑटोप्ले

ऑटोप्ले नीति

ऑडियो या वीडियो को ऑटोप्ले करने की अनुमति है या नहीं यह तय करते समय नीति का उपयोग किया जाता है।

- मैक, विंडोज, लिनक्स, क्रोम ओएस, एंड्रॉइड

करने के लिए "सेट नहीं उपयोगकर्ता हावभाव की आवश्यकता है "

Chrome पुनः लोड करें और आपको कोई कोड नहीं बदलना होगा

— DARKSETH23
स्रोत

24

आप संभवतः प्रत्येक उपयोगकर्ता को सेटिंग्स बदलने के लिए नहीं कह सकते।

— आशीष झंवर

2

यह वास्तव में कुछ लोगों के लिए समस्या को हल कर सकता है (कियोस्क, निजी और स्थानीय वेबसाइट ...), लेकिन ध्वज को Chrome 76 में हटा दिया गया था। अब इसका एकमात्र समाधान यह उत्तर है

— मिलान hvehla