सफारी और क्रोम डेस्कटॉप ब्राउज़र में वीडियो ऑटो प्ले काम नहीं कर रहा है

Question

मैंने यह जानने में काफी समय बिताया कि वीडियो यहाँ क्यों लगाया गया है:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

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

Comments

क्या यह कभी-कभी काम कर रहा है? या बिल्कुल भी काम नहीं कर रहा है ... यहाँ एक उदाहरण है w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay जिसे मैं क्रोम के साथ जांचता हूं, और यह काम करता है।

— तनयादीन

कुछ पृष्ठों पर यह बिल्कुल काम नहीं कर रहा है

— एडम बुबेला

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

— bingeScripter

क्रोम में मेरे लिए काम नहीं कर रहा।

— बॉब द बिल्डर

Answer 1

सबसे अच्छा फिक्स जो मुझे मिल सकता था वह था इस कोड को जोड़ने के बाद </video>

<script>
    document.getElementById('vid').play();
</script>

... सुंदर नहीं, लेकिन किसी तरह काम करता है।

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

<video autoplay muted>
...
</video>

Comments

या आप jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…

— पेंगुइन

या इस तरह से:$("video[autoplay]").each(function(){ this.play(); });

— मार्टिन

अभी भी समस्या है अगर इसके डेवलपर्स को

— http://www.web/updates/2017/09/…/

यह उपयोगकर्ता इंटरैक्शन के बिना अब काम नहीं करेगा AFAIK

— webkit

यह देख stackoverflow.com/questions/43570460/...

— Leandro एच Agostinho

Answer 2

play()अन्य उत्तरों द्वारा सुझाए गए अनुसार jQuery या DOM मैनिपुलेशन का उपयोग करने के बाद , यह अभी भी एंड्रॉइड के लिए क्रोम में वीडियो (ऑटोप्लेइंग नहीं था) (संस्करण 56.0) था।

Developers.google.com में इस पोस्ट के अनुसार , Chrome 53 से, वीडियो के म्यूट होने पर , ब्राउज़र द्वारा ऑटोप्ले विकल्प का सम्मान किया जाता है ।

इसलिए autoplay mutedवीडियो टैग में विशेषताओं का उपयोग करने से संस्करण 53 से क्रोम ब्राउज़र में वीडियो को ऑटोप्ले किया जा सकता है।

उपरोक्त लिंक से अंश:

वीडियो के लिए म्यूट किए गए ऑटोप्ले को Android के लिए 53 के संस्करण के रूप में क्रोम द्वारा समर्थित किया गया है। प्लेबैक एक वीडियो तत्व के लिए स्वचालित रूप से शुरू होगा, अगर यह देखने में आता है कि दोनों autoplayऔर mutedसेट हैं [...]

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>

• म्यूटेड ऑटोप्ले को सफारी द्वारा iOS 10 और बाद में सपोर्ट किया गया है।
• ऑटोप्ले, म्यूट किया गया है या नहीं, पहले से ही फ़ायरफ़ॉक्स और यूसी ब्राउज़र द्वारा एंड्रॉइड पर समर्थित है: वे किसी भी तरह के ऑटोप्ले को ब्लॉक नहीं करते हैं।

Comments

मुझे सफारी 11 में यह मुद्दा मिला जहां एक पृष्ठभूमि वीडियो (कोई ऑडियो) स्वचालित रूप से नहीं चलेगा। जोड़ा जा रहा है mutedऔर autoplayचाल थी। धन्यवाद!

— dmbaughman

तो फिर ऑटोप्ले, साउंड ऑन, यूट्यूब के लिए क्यों काम करता है? साइट की स्थापना के बाद से इसने इस तरह से काम किया है।

— ज़ेवियर

Answer 3

ऐसा होता है कि डेस्कटॉप पर सफारी और क्रोम वीडियो टैग के आसपास डोम हेरफेर को पसंद नहीं करते हैं। जब प्लेप्लेथ्रू इवेंट ने आरंभिक पृष्ठ लोड होने के बाद वीडियो टैग के आसपास DOM को बदल दिया है तो भी ऑटोप्ले विशेषता सेट होने पर भी वे प्ले ऑर्डर को फायर नहीं करेंगे । मूल रूप से मेरे पास एक ही मुद्दा था जब तक कि मैंने वीडियो टैग के आसपास एक .wrap () jQuery को हटा नहीं दिया था और उसके बाद उम्मीद के मुताबिक इसे ऑटोप्ले किया गया था।

Comments

अच्छा है कि यह .wrap () के साथ काम नहीं करता है। हालाँकि, जहाँ तक मैं बता सकता हूँ, कोड की जरूरत है (। 0) काम करने के लिए: $ ("# vid")। Get (0) .play ();

— Mattsoave

@mattsoave .get(0)या सिर्फ$('#vid')[0].play()

— शत्रुघ्न

अक्टूबर 2017, टैग में विशेषता के बावजूद वीडियो ऑटोप्लेइंग नहीं करना अभी भी सफारी में एक मुद्दा है। Mattsoave / pmrotule द्वारा सुझाए गए अनुसार [0] .play () का उपयोग करके समस्या हल की गई।

— डॉन कुलेन

Answer 4

Google ने केवल ऑटोप्ले वीडियो के लिए अपनी नीति बदल दी है, यह होना चाहिए muted

आप यहाँ देख सकते हैं

तो बस म्यूट जोड़ें

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

Comments

नई नीति पर जॉन पैलेट की टिप्पणी । वह Google Chrome के उत्पाद प्रबंधक और मीडिया Muter हैं ।

— डूमजुनकी

Answer 5

मेरे लिए मुद्दा यह था कि टैग के mutedभीतर विशेषता को जोड़ना आवश्यक था video। अर्थात:

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`

Comments

— विंडोज

क्रोम पर अगर मैं म्यूटेड डिसएबल साउंड जोड़ता हूं। मैं यह नहीं चाहता

— lisarko8077

Answer 6

क्रोम ध्वनि के साथ ऑटो प्ले वीडियो की अनुमति नहीं देता है, इसलिए इस तरह mutedके videoटैग में विशेषता जोड़ना सुनिश्चित करें

<video width="320" height="240"  autoplay muted>
  <source src="video.mp4" type="video/mp4">
</video>

Comments

यह कुछ भी नया नहीं जोड़ता है। स्वीकार किए जाते हैं जवाब पहले से ही इस का उल्लेख है। साथ ही दूसरा उत्तर विस्तार से दिया गया है।

— सैमुअल फिलिप

Answer 7

मुझे अभी अपने वीडियो के साथ यही मुद्दा मिला है

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

खोज के बाद, मुझे एक समाधान मिला है:

अगर मैं वीडियो को सामान्य रूप से "सही" करने के लिए "प्रीलोड" विशेषताएँ सेट करता हूं

Comments

यदि ऑटोप्ले मौजूद है तो प्रीलोड विशेषता को ब्राउज़र द्वारा अनदेखा किया जाता है।

— सेदात बस्तर

Answer 8

पृष्ठ के नीचे नीचे दिए गए कोड को जोड़ने से मेरे लिए काम किया। मुझे नहीं पता कि यह क्यों काम करता है :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);

Comments

कारण यह है कि आप बफर के भीतर वीडियो लोड होने की प्रतीक्षा कर रहे हैं तब आप इसे खेलते हैं।

— जोसेफ ब्रिग्स

Answer 9

इसे इस्तेमाल करे:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>

Answer 10

var video = document.querySelector('video'); video.muted = true; video.play()

केवल इस समाधान ने मेरी मदद की, <video autoplay muted ...>...</video>काम नहीं किया ...

Answer 11

अन्य किसी भी उत्तर ने मेरे लिए काम नहीं किया। मेरा काम वीडियो पर एक क्लिक को ट्रिगर करना था; हैकी (क्योंकि उस टाइमआउट की जरूरत है) लेकिन यह ठीक काम करता है:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);

Comments

Chrome पर कुछ भी मेरे लिए काम नहीं किया। ऊपर .play () फिक्स (हैक) के साथ मुझे एक "अनटूट्ड (वादा में) DOMException: मिल रहा था। प्ले () अनुरोध को पॉज़ () करने के लिए एक कॉल द्वारा बाधित किया गया था।" कंसोल में। पृष्ठ पर कुछ अन्य jQuery फ़ंक्शन थे, इसलिए सोचा कि एक टाइमर क्रोम को खुद को छाँटने के लिए पर्याप्त समय देगा। इसने काम कर दिया। मैंने $ (दस्तावेज़) में 0.5 सेकंड का टाइमर सेट किया है। ()

— Orbonia

Answer 12

हमने हाल ही में एक एम्बेडेड वीडियो के साथ एक समान मुद्दे को संबोधित किया और पाया कि ऑटोप्ले और म्यूट किए गए गुण हमारे कार्यान्वयन के लिए पर्याप्त नहीं थे।

हमने एक तीसरी "playinline" विशेषता को कोड में जोड़ा और इसने iOS उपयोगकर्ताओं के लिए समस्या को ठीक किया।

यह फिक्स उन वीडियो के लिए विशिष्ट है जिन्हें इनलाइन चलाया जाना है। से https://webkit.org/blog/6784/new-video-policies-for-ios/ :

IPhone पर, तत्वों को अब इनलाइन खेलने की अनुमति होगी, और प्लेबैक शुरू होने पर स्वचालित रूप से फुलस्क्रीन मोड में प्रवेश नहीं करेगा। iPhone पर प्लेबैक के लिए playinline विशेषताओं के बिना तत्वों को फुलस्क्रीन मोड की आवश्यकता होती रहेगी। जब एक चुटकी इशारे के साथ फुलस्क्रीन से बाहर निकलते हैं, तो बिना playinline के तत्व इनलाइन खेलना जारी रखेंगे।

Answer 13

Google ने ऑटोप्ले नीति को अपडेट किया। ऑटोप्ले केवल म्यूट मोड पर काम करता है। लिंक की जाँच करें https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Comments

वीडियो मौन है, प्रश्न की जाँच करें

— एलेक्स एंजेलिको

Answer 14

इसे इस्तेमाल करे:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

इस तरह से मैं इसे सामान्य रूप से करता हूं। लूप, नियंत्रण और ऑटोप्ले को एक मूल्य की आवश्यकता नहीं है जो वे बूलियन विशेषता हैं।

Answer 15

इसका कारण यह है कि क्रोम अब html5 वीडियो में ऑटो प्ले को रोक रहा है, इसलिए डिफ़ॉल्ट रूप से वे ऑटो प्ले की अनुमति नहीं देंगे। इसलिए हम क्रोम फ्लैग सेटिंग्स का उपयोग करके इस सेटिंग्स को बदल सकते हैं। यह सामान्य मामले के लिए संभव नहीं है इसलिए मुझे एक और समाधान मिल गया है। यह सही काम कर रहा है ... (प्रीलोड जोड़ें = "ऑटो")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">

var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();  

Answer 16

उपरोक्त वर्णित सभी समाधानों की कोशिश में दो घंटे बिताए।

यह वही है जो आखिरकार मेरे लिए काम करता है:

var vid = document.getElementById("myVideo");
vid.muted = true;

Answer 17

सफारी आईफोन पर जब बटर कम होता है और आईफोन लो पॉवर मोड पर होता है, तो यह `ऑटोप्ले ' जीतता है , भले ही आपके पास निम्नलिखित विशेषताएं हों: आपके वीडियो HTML टैग पर ऑटोप्ले, लूप, म्यूटेड, प्लेसीनलाइन सेट।

मेरे द्वारा काम करने के दौरान घूमना, वीडियो प्ले को ट्रिगर करने के लिए उपयोगकर्ता के हावभाव घटना के लिए है:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

आप वेब साइट में iOS के लिए उपयोगकर्ता के हावभाव और वीडियो नीतियों के बारे में अधिक पढ़ सकते हैं:

https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 18

मेरे पास एक ऐसा मामला था, जिसमें अलग-अलग फाइलपेट्स के आदेश के साथ कुछ करना था। इसे बदलने की कोशिश करें और देखें कि क्या मदद करता है।

Answer 19

मैंने सभी दृश्यमान वीडियो चलाने के साथ शुरुआत की, लेकिन पुराने फोन अच्छा प्रदर्शन नहीं कर रहे थे। तो अभी मैं एक वीडियो खेलता हूं जो खिड़की के केंद्र के सबसे करीब है और बाकी को रोक देता है। वेनिला जेएस। आप चुन सकते हैं कि आप कौन सा एल्गोरिदम पसंद करते हैं।

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}

Answer 20

मैंने उसी समस्या को हल किया,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

पेज दिखाए जाने के बाद आपको वीडियो लॉन्च करना होगा।

Answer 21

के autoPlayलिए अदला-बदली का प्रयास करें autoplay।

यह कई बार मामला संवेदनशील लगता है। बहुत विचित्र है क्योंकि यह autoplayमेरे लिए काम करता है, लेकिन केवल अगर मैं भी इसमें शामिल हूंcontrols