IPhone पर HTML5 वीडियो ऑटोप्ले

Question

मुझे किसी तरह की अजीब समस्या है। मैं एक लूप बैकग्राउंड वीडियो के साथ एक वेबसाइट बनाने की कोशिश करता हूं। कोड इस तरह दिखता है:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

यह अधिकांश ब्राउज़रों पर पूरी तरह से ठीक काम करता है (आईई इस ऑब्जेक्ट-फिट चीज़ के साथ संघर्ष करता है लेकिन मुझे कोई आपत्ति नहीं है) लेकिन आईफोन पर वीडियो ऑटोप्ले नहीं होगा लेकिन आईपैड पर यह करता है। मैं पहले से ही आईओएस के लिए नई नीतियां पढ़ता हूं और मुझे लगता है कि मैं आवश्यकताओं को पूरा करता हूं (अन्यथा आईपैड ऑटोप्ले नहीं होगा)। मैंने कुछ अन्य परीक्षण किए:

• ओवरलेइंग डिव को हटाने से यह ठीक नहीं होगा
• Z-index को हटाने से यह ठीक नहीं होगा
• वाईफ़ाई या सेलुलर एक फर्क नहीं पड़ता
• वीडियो फ़ाइलों का भी फर्क नहीं पड़ता

क्या मैं इसे गलत कर रहा हूं या iPhone केवल वीडियो को ऑटोप्ले नहीं करेगा और हमेशा सहभागिता की आवश्यकता है? मैं केवल iOS 10 की परवाह करता हूं, मुझे पता है कि iOS 9 पर आवश्यकताएं अलग थीं

Comments

आप यहां कुछ मदद पा सकते हैं: stackoverflow.com/questions/41360490/… व्यक्तिगत रूप से, मेरे पास अभी तक एक iPhone पर ऑटोप्ले करने के लिए उन सभी युक्तियों और एपल्स नीतियों का पालन करने के बाद भी कोई भी वीडियो प्राप्त करने के लिए नहीं है।

— मार्क

मुझे यह पता लगाने में घंटों लग गए। हर किसी के घंटे बचाने की कोशिश करने के लिए मैंने एक ब्लॉग में अपने निष्कर्ष निकाले हैं। आशा है कि इससे सहायता मिलेगी। medium.com/@BoltAssaults/…

— BoltCoder

Answer 1

क्या playsinlineविशेषता मदद करती है?

यहाँ मेरे पास क्या है:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

playsinlineयहाँ पर टिप्पणी देखें : https://webkit.org/blog/6784/new-video-policies-for-ios/

Comments

Halleluja! इसके लिए धन्यवाद, लगभग एक दर्जन अन्य समाधानों को बिना किसी लाभ के लेने की कोशिश की थी।

— tolmark

playsinlinemutediPhone पर कम पावर मोड क्विक को ध्यान में रखते हुए मेरे साथ काम किया

— Ken

यह उत्तर है।

— JCraine

playsinlineदिन बचा लिया !!!! धन्यवाद दोस्त। BTW, नई ब्राउज़र नीतियाँ मांग करती हैं कि यदि आप किसी वीडियो को ऑटोस्टार्ट करना चाहते हैं, तो उसे म्यूट कर दें या आप ऐसा नहीं कर पाएंगे। क्रोम के लिए +1 से @ken उदाहरण: [ Developers.google.com/web/updates/2017/09/…/

— Nuno Prata

यदि आप रिएक्ट का उपयोग कर रहे हैं, तो ध्यान दें कि विशेषता playsinlineको कैमसेल में लिखा जाना चाहिए playsInline:। अन्यथा यह काम नहीं करेगा।

— क्वेंटिन डी

Answer 2

आईओएस 10+ वीडियो ऑटोप्ले इनलाइन की अनुमति देते हैं। लेकिन आपको अपने iPhone पर "लो पावर मोड" बंद करना होगा।

Comments

महान टिप, लेकिन मेरे पास इस बारे में एक प्रश्न है जो मैंने प्रस्तुत किया: stackoverflow.com/questions/50400902/…

— मैथ्यू

मैंने आखिरी घंटे बिताए या यह समझने की कोशिश की कि मेरे वीडियो अपने आप क्यों नहीं चल रहे थे। इसके लिए शुक्रिया!

— lior

इसके लिए शुक्रिया!

— निकिता रोजातनेव

यह ध्यान देने योग्य है कि हम उपयोगकर्ता के उपकरण और लो पावर मोड को चालू नहीं कर सकते। केवल एक चीज जो हम कर सकते हैं वह है उपयोगकर्ता को बेहतर अनुभव के लिए "लो पावर मोड को बंद" करने के लिए प्रेरित करना

— मुहम्मद ओसामा

मेरे साथ भी हुआ और जब तक मुझे आपकी पोस्ट नहीं मिली, मुझे पागल कर दिया। मैं पहले से ही सफारी 11 और 11.1 के चश्मे को देख रहा था अगर वे शायद पूरी तरह से ऑटोप्ले को निष्क्रिय कर देते थे लेकिन यह केवल कम पावर मोड था ... एक देवता का जीवन कठिन हो सकता है। :-)

— हकीकी

Answer 3

एक वेबसाइट में वीडियो ऑटोप्ले के लिए आपके द्वारा किए गए सभी संघर्षों को दूर करने के लिए यहां छोटी सी हैक है:

1. चेक वीडियो चल रहा है या नहीं।
2. ट्रिगर वीडियो, बॉडी क्लिक या टच जैसी घटनाओं पर चलता है।

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

इसलिए यह जांचने के लिए स्क्रिप्ट है कि क्या वीडियो चल रहा है:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

और फिर आप शरीर के ईवेंट श्रोताओं को संलग्न करके वीडियो को ऑटोप्ले कर सकते हैं:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

ध्यान दें: autoplay विशेषता बहुत बुनियादी है जिसे इन लिपियों के अलावा पहले से ही वीडियो टैग में जोड़ने की आवश्यकता है।

आप इस लिंक पर कोड के साथ काम करने का उदाहरण देख सकते हैं:

जब डिवाइस कम पावर मोड / डेटा सेविंग मोड / सफारी ब्राउज़र समस्या में है तो वीडियो को ऑटोप्ले कैसे करें

Answer 4

मुझे एक समान समस्या थी और मैंने कई समाधान की कोशिश की। मैंने इसे 2 विचारों को लागू करने के लिए हल किया।

1. कोड dangerouslySetInnerHtmlएम्बेड करने के लिए उपयोग करना <video>। उदाहरण के लिए:

<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
    </video>`}}
/>

2. वीडियो वजन का आकार बदलना। मैंने देखा कि मेरा iPhone 3 मेगाबाइट से अधिक के वीडियो को ऑटोप्ले नहीं करता है । इसलिए मैंने 4mb से 500kb से कम में जाने के लिए एक ऑनलाइन कंप्रेसर टूल ( https://www.mp4compress.com/ ) का उपयोग किया

इसके अलावा, @boltcoder को उनके गाइड के लिए धन्यवाद : ऑटोप्ले ने मोबाइल पर रिएक्ट का उपयोग करके एचटीएमएल 5 वीडियो को म्यूट कर दिया (सफ़ारी / माइक्रोफ़ोन 10-12 )