एचटीएमएल 5 वीडियो

Question

पर ब्लैक लोड फ्लैश निकालें मैं एक ऑनलाइन गेम के लिए एक वेबसाइट बना रहा हूं जो मैं खेलता हूं। शीर्षलेख में मेरे पास एक HTML5 वीडियो है जो बहुत संक्षिप्त रूप से खेला जाता है (1 सेकंड)। इंटरनेट एक्सप्लोरर में कोई समस्या नहीं है, हालांकि क्रोम में वीडियो लोड होने के साथ ही ब्लैक स्क्रीन का एक बहुत ही संक्षिप्त फ्लैश है। क्या कोई तरीका है कि मैं इस फ्लैश को हटा सकता हूं, या विफल रहा हूं, पृष्ठभूमि से मिलान करने के लिए इसे सफ़ेद बना सकता हूं? आप देख सकते हैं कि मेरा मतलब क्या है http://testingfortagpro.meximas.com/। यदि आप इसे IE और क्रोम में आज़माते हैं तो आप वीडियो लोड करने में अंतर देखेंगे। वैकल्पिक रूप से इसे लागू करने का कोई बेहतर तरीका है? मैंने एनिमेटेड जीआईएफ का उपयोग करने की कोशिश की है हालांकि गुणवत्ता में काफी कमी आई है।

धन्यवाद!

Answer 1

इस blog post के पोस्टर अनुभाग निम्नलिखित इंगित करता है: "। आप एक पोस्टर छवि निर्दिष्ट नहीं करते हैं ब्राउज़र सिर्फ एक काले तत्व के आयामों भरने बॉक्स प्रदर्शित कर सकता है"

तो आप बस video तत्व को सफेद रंग की एक पृष्ठभूमि रंग जोड़कर इसे ठीक नहीं कर पा रहे हैं ... लेकिन आप तो जैसे एक साधारण सफेद पोस्टर छवि जोड़ सकते हैं:

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" > 
 
    <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4"> 
 
</video>

Answer 2

आप पारदर्शी gif पोस्टर का उपयोग कर सकते हैं:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 

लेकिन उस फ़ायरफ़ॉक्स में निमिष खत्म करने के लिए पर्याप्त नहीं था। मैं वीडियो छुपा कर समाप्त हो गया है जब तक यह खेल रहा है:

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);"> 

समयबाह्य एडजस्ट आप मनचाहे ढंग से। ऑटोप्ले का उपयोग नहीं करते समय, मुझे इसे 400 एमएस तक बढ़ा देना पड़ा।

Answer 3

मुझे एक ही समस्या थी और सीएसएस डिस्प्ले का उपयोग करके वीडियो तत्व को छुपाकर इसे ठीक किया गया: जब तक वीडियो तत्व संकेत नहीं देता तब तक यह अपने ऑनलोडेडडेटा ईवेंट के माध्यम से लोडिंग समाप्त नहीं कर लेता है, और उस घटना के जवाब में मैं डिस्प्ले सेट करता हूं: ब्लॉक।

जो काले फ्लैश से छुटकारा पा लिया।

Answer 4

वीडियो टैग में पोस्टर एट्रिब्यूट में डालकर ब्लैक बॉक्स को फ्लैशिंग से नहीं रोका गया जब उपयोगकर्ता पेज को रीफ्रेश करता था, हालांकि मैंने 'प्रीनलोड' ईवेंट पर छुपा कार्य किया था और अब ब्लैक फ्लैश चला गया है।

$(window).on('beforeunload', function() { 
    $("video").hide(); 
}); 

Answer 5

मेरे पास फ़ायरफ़ॉक्स में एक ही ब्लिंकिंग समस्या थी, यहां तक ​​कि एक पोस्टर विशेषता सेट के साथ भी। मैंने वीडियो टैग में पृष्ठभूमि-छवि जोड़कर इसे ठीक किया जो मेरे वीडियो के पहले फ्रेम से मेल खाता था।

Answer 6

$ (विंडो) .on ('preunload', फ़ंक्शन() {$ ("वीडियो")। छुपाएं();});

यह विंडो अनलोड होने से पहले वीडियो तत्व को छुपाएगा और अगले दस्तावेज़ को लोड करेगा।