क्रोम एचटीएमएल 5 वीडियो प्रदर्शित नहीं करता है जब तक पेज का आकार बदल नहीं जाता

Question

मैं विकसित होने वाली वेबसाइट के लिए एक पूर्ण पृष्ठभूमि वीडियो बनाने का प्रयास कर रहा हूं।

मेरे पास मेरे वीडियो टैग ठीक से सेट हैं, और यह सफारी और फ़ायरफ़ॉक्स में बहुत अच्छा है, लेकिन क्रोम में समस्याएं हैं।

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

क्या इसके लिए कोई फिक्स है, या क्रोम को सही ढंग से प्रस्तुत करने में क्रोम को ट्रिक करने का कोई तरीका है? यह एक कोडेक मुद्दा प्रतीत नहीं होता है क्योंकि जब आप पेज का आकार बदलते हैं तो यह ठीक है (और पृष्ठ का आकार कोई फर्क नहीं पड़ता है, आप इसे मूल आकार में आकार बदल सकते हैं और यह खेलना जारी रखेगा)।

Testsite: www.mashwork.com/testsite

देखें कोड:

#mashvid { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: auto; 
    min-width: 100%; 
    z-index: -5; 
} 

<video preload id="mashvid" poster="images/mashvid_poster.png"> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'> 
     Your browser does not support the video tag. 
</video> 

Answer 1

मैं क्रोम के भीतर एक ही समस्या थी। मैंने वीडियो में नियंत्रण जोड़े और यह समस्या ठीक कर दी।

मैं अब नियंत्रण छिपाने के एक बार दस्तावेज़ तैयार है:

$(document).ready(function() { 
    var video = document.getElementById("video"); 
    video.removeAttr("controls"); 
});