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




google-chrome video html5-video (9)

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

एचटीएमएल

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

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

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


  1. ओपन chrome://flags/#autoplay-policy
  2. उपयोगकर्ता के हावभाव सेट करना आवश्यक नहीं है
  3. रिलॉन्च क्रोम

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


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

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

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


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

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

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

अद्यतन करें

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

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


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

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

Source


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

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();
}

क्रोम, फ़ायरफ़ॉक्स, आईई, या किसी भी मानक-डरावने एसवीजी उपयोगकर्ता एजेंट में एसवीजी तत्वों के लिए मूल्यों को बदलने / सेट करने के दो तरीके हैं:

गुणों के माध्यम से ट्रांसफॉर्म को संभालना

// Getting
var xforms = myElement.getAttribute('transform');
var parts  = /translate\(\s*([^\s,)]+)[ ,]([^\s,)]+)/.exec(xforms);
var firstX = parts[1],
    firstY = parts[2];

// Setting
myElement.setAttribute('transform','translate(30,100)');

पेशेवर : सेट करने और समझने के लिए सरल (मार्कअप के समान)।
विपक्ष : आप जो चाहते हैं उसे ढूंढने के लिए स्ट्रिंग मान को पार्स करना होगा; एनिमेटेड मानों के लिए, एनीमेशन सक्रिय होने पर बेस वैल्यू के लिए नहीं पूछ सकता है; गंदा लगता है।

एसवीजी डोम बाइंडिंग के माध्यम से ट्रांसफॉर्म को संभालना

// Getting
var xforms = myElement.transform.baseVal; // An SVGTransformList
var firstXForm = xforms.getItem(0);       // An SVGTransform
if (firstXForm.type == SVGTransform.SVG_TRANSFORM_TRANSLATE){
  var firstX = firstXForm.matrix.e,
      firstY = firstXForm.matrix.f;
}

// Setting
myElement.transform.baseVal.getItem(0).setTranslate(30,100);

पेशेवर : अपने आप तारों को पार्स करने की कोशिश करने की आवश्यकता नहीं है; मौजूदा ट्रांसफॉर्म सूचियों को संरक्षित करता है (आप सूची में केवल एक ही बदलाव पूछ सकते हैं या ट्विक कर सकते हैं); आपको वास्तविक मूल्य मिलते हैं, स्ट्रिंग नहीं।
विपक्ष : पहले समझने में भ्रमित हो सकता है; सरल मूल्य निर्धारित करने के लिए अधिक verbose; SVGTransform.matrix , ब्राउज़र समर्थन की कमी से रोटेशन, स्केल या SVGTransform.matrix मान निकालने के लिए कोई सुविधाजनक तरीका नहीं है

आपको एक उपकरण मिल सकता है जिसे मैंने डीओएम की खोज में मदद के लिए लिखा था।

  1. http://objjob.phrogz.net/svg/object/131 जाएं
  2. "विरासत गुण / विधियां दिखाएं" पर क्लिक करें? चेकबॉक्स
  3. देखें कि SVGRectElement में एक transform प्रॉपर्टी है जो एक SVGAnimatedTransformList
  4. SVGAnimatedTransformList करने वाले गुणों और विधियों को देखने के लिए SVGAnimatedTransformList पर क्लिक करें।
  5. अन्वेषण करें!




javascript google-chrome video html5-video