HTML5 में असीम रूप से लूपिंग वीडियो ऑन-लोड खेलें

Question

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

पहले मैंने इसके माध्यम से Flashऔर किया होगा FLVPlayback, लेकिन मैं Flashएचटीएमएल 5 क्षेत्र में स्पष्टता लाना पसंद करूंगा । मुझे लगता है कि मैं जावास्क्रिप्ट का उपयोग कर सकता हूँ setTimeoutएक चिकनी लूप बनाने के लिए, लेकिन मुझे वीडियो को एम्बेड करने के लिए क्या उपयोग करना चाहिए? वहाँ कुछ है कि वहाँ जिस तरह से वीडियो स्ट्रीम FLVPlaybackहोगा होता है?

Answer 1

पाश विशेषता यह करना चाहिए:

<video width="320" height="240" autoplay loop>
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>

क्या आपको लूप विशेषता के साथ कोई समस्या है (जैसा कि हमारे पास अतीत में था), videoEndघटना को सुनें और play()जब यह आग लग जाए तो विधि को कॉल करें ।

Note1: मैं Apple के iPad / iPhone पर व्यवहार के बारे में निश्चित नहीं हूं, क्योंकि उनके पास कुछ प्रतिबंध हैं autoplay।

नोट 2: loop="true"और autoplay="autoplay"पदावनत हैं

Comments

वाकई अच्छी सलाह है सर। मैंने घटना javascriptको सुनने के लिए उपयोग करना समाप्त कर दिया videoEnd, और जो मैं बता सकता हूं उससे शुरुआत में वापस लूपिंग करना, loopसभी ब्राउज़रों द्वारा विशेषता का समर्थन नहीं किया गया है। IOS उपकरणों के लिए, वे autoplayiOS 5 द्वारा किसी भी तरह से आकार या रूप में समर्थन नहीं करते हैं , इसलिए मैंने मोबाइल के लिए केवल एक बैकबैक छवि का उपयोग किया है। एक बार फिर धन्यवाद।

— स्टीफमिकेल

<video loop = "true"> का उपयोग करना अमान्य है w3.org/TR/html-markup/video.html - या तो <video loop = "loop"> या just <video loop> का उपयोग करें - यह नियम लगभग सभी HTML5 टैगों के लिए है (या तो सिर्फ tagname, या tagname = XHTML5 के लिए "tagname")

अपडेट के लिए @vaxquis धन्यवाद, अगली बार आपी परिवर्तन संपादित करने के लिए आपका स्वागत है!

— longi

कोई समस्या नहीं है, दोस्त, हमेशा मदद करने के लिए खुश। फिर भी, मैं एचटीएमएल-टाइप 'लूप' के साथ एक्सएचटीएमएल-टाइप विशेषताओं 'ऑटोप्ले = "ऑटोप्ले" को नहीं मिलाऊंगा - मैं या तो <वीडियो ... ऑटोप्ले लूप>, HTML5 या <वीडियो के रूप में पार्सबल के साथ जाऊंगा। " ऑटोप्ले = "ऑटोप्ले" लूप = "लूप">, HTML5 या XHTML5 के रूप में पार्स करने योग्य है। मिक्सिंग स्टाइल एक मार्कअप बनाता है जो अभी भी एक्सएचटीएमएल के रूप में अमान्य है लेकिन HTML के लिए अनावश्यक रूप से क्रिया करता है।

आम तौर पर, autoplayकेवल सफारी में काम करता है यदि आप भी उपयोग करते हैं muted: webkit.org/blog/7734/auto-play-policy-changes-for-macos

— andreyrd

Answer 2

अप्रैल 2018 की स्थिति के अनुसार, क्रोम (कई अन्य प्रमुख ब्राउज़रों के साथ) अब आवश्यकताmuted भी विशेषता।

इसलिए, आपको उपयोग करना चाहिए

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

Answer 3

IPhone के लिए यह काम करता है यदि आप भी playinline जोड़ते हैं:

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

Comments

autoPlay loop muted playsInline

— JSX के

Answer 4

आप इसे निम्न दो तरीके से कर सकते हैं:

1) loopवीडियो तत्व में विशेषता का उपयोग करना (पहले उत्तर में उल्लिखित):

2) और आप endedमीडिया इवेंट का उपयोग कर सकते हैं :

window.addEventListener('load', function(){
    var newVideo = document.getElementById('videoElementId');
    newVideo.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    newVideo.play();

});