html - how to play html5 video without using autoplay because it buffers EVERYTHING and slows really down page load -

नमूना कोड संदर्भ के लिए पोस्ट के अंत में है।

इतने लंबे समय तक घुमावदार होने के लिए क्षमा करें, बस माध्यम से जाने की कोई कोशिश नहीं की जा सकती है।

ऐसा लगता है कि मैंने एक कोने के कुछ हिस्सों में खुद को चित्रित किया है मेरे पास एक शो टॉगल फ़ंक्शन है जो ठीक काम करने लगता है। मेरे पास डीआईवी की एक छोटी सी सेना है, जो कि प्रत्येक दिखाए गए और छिपे हुए हैं जब मेनू आइटम क्लिक किए जाते हैं। यह एक वीडियो गैलरी है बटन एक JQuery स्क्रिप्ट वाले स्लाइडर में हैं और एक HTML सूची में हैं। सीएसएस का उपयोग डीआईवी आईडी के साथ किया जाता है

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

BTW मैं प्रत्येक के लिए वीडियो का उपयोग कर रहा हूँ, लेकिन यह एक आधार के रूप में है, टी कुछ वीडियो की तुलना में अधिक के लिए एक समाधान प्रदान करने लगते हैं।

शायद मेरा वीडियो प्रारूप गलत है, लेकिन मैं .m4v एक्सटेंशन में QuickTime Pro के बाहर सहेजा h264 वीडियो का उपयोग कर रहा हूं। मैं यह भी पता लगाने की कोशिश कर रहा हूं कि प्रारूप स्वत: चला सकता है, लेकिन मुझे पता है कि ओजीवी ऐसा नहीं कर सकता है इसलिए मैं उस पर बहुत उम्मीद नहीं लगा रहा हूं। इसके अलावा, मैं एक फ्लैश फ़ॉलबैक जोड़ूंगा।

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

  & lt; स्क्रिप्ट & gt; & LT;! ----- जावास्क्रिप्ट ----- & gt; फ़ंक्शन छिपाने ALL () {tag = document.getElementsByTagName ("div"); (एक्स = 0; एक्स & lt; tag.length; x ++) के लिए {//alert(tag[x].getAttribute('id ')); अगर (टैग [x] .getAttribute ('id')। इंडेक्सओफ़ ("छिपाना")! = -1) {//alert(tag[x].getAttribute('id ')); टैग [x] .style.display = "none"; }}} समारोह शो (आईडी) {el = document.getElementById (आईडी); अगर (el.style.display == "कोई नहीं") (छिपाना सभी (); El.style.display = "block"; } अन्य {el.style.display = "none"; Document.getElementById ('छिपाना')। Style.display = ""; }} & Lt; / script & gt; & Lt;! ----- div स्लाइडर के अंदर बटनों की सूची ----- & gt; & Lt; li & gt; & Lt; div id = "मेनू समूह" & gt; & Lt; div id = "MoviePicL1" & gt; & Lt; span style = "कर्सर: पॉइंटर" onClick = "शो ('hide1')" & gt; & lt; img src = "चित्र / पोस्टर / मूवी 1 छवि" & gt; & lt; / span & gt; & Lt; / div & gt; & Lt; div id = "MoviePicL2" & gt; & Lt; span शैली = "कर्सर: पॉइंटर" onClick = "शो ('hide2')" & gt; & lt; img src = "चित्र / पोस्टर / मूवी 2image" & gt; & lt; / span & gt; & Lt; / div & gt; & Lt; div id = "MoviePicL3" & gt; & Lt; span style = "कर्सर: पॉइंटर" onClick = "शो ('छुपा 3')" & gt; & lt; img src = "चित्र / पोस्टर / मूवी 3 छवि" & gt; & lt; / span & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / li & gt;  

वे क्या कर रहे हैं ये हैं:

  & lt; div id = "hide2" style = "display: none;" & gt; & Lt; div id = "VideoContainerDiv" class = "mybox" & gt; & Lt; वीडियो आईडी = "मूवी 1_रेल" चौड़ाई = "580" ऊंचाई = "326" नियंत्रण preload = "none" & gt; & Lt; source src = "वीडियो / मूवी 1_रेल" प्रकार = "वीडियो / ओग" & gt; & lt; / source & gt; & Lt; source src = "वीडियो / मूवी 1_आरेल" प्रकार = "वीडियो / एमपी 4" & gt; & lt; / source & gt; & Lt; / वीडियो & gt; & Lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;  

ठीक है, जब आप दिखाए जाते हैं तो आप वीडियो ऑब्जेक्ट पर प्ले () कॉल कर सकते हैं।