एचटीएमएल 5 वीडियो पर पूर्णस्क्रीन जाने पर कस्टम नियंत्रण अभी भी लागू होते हैं?

Question

मैंने अपने HTML5 वीडियो के लिए कस्टम नियंत्रण बनाए हैं, लेकिन मुझे नहीं पता कि जब मैं पूर्णस्क्रीन पर जाता हूं तो उस सीएसएस को अभी भी कैसे लागू किया जाए।

यहां [website] है मैंने अपने नियंत्रणों पर आधारित है।

इस साइट पर, आप देखेंगे कि जब आप पूर्णस्क्रीन बटन पर क्लिक करेंगे तो कस्टम नियंत्रण खो जाएंगे और वीडियो डिफ़ॉल्ट <video> नियंत्रणों पर वापस आ जाएगा।

क्या कोई यह जानता है कि जब आप पूर्णस्क्रीन जाते हैं तो ये कस्टम नियंत्रण स्टाइल/सीएसएस अभी भी कैसे लागू होते हैं?

Answer 1

मैंने अपने स्वयं के प्रश्न का उत्तर दिया, कुंजी यह है कि कस्टम नियंत्रण <div> के अंदर हैं जिसमें वह वीडियो शामिल है जिसे आप पूर्ण स्क्रीन लेना चाहते हैं। नीचे दिए गए मेरे कोड में, यह <div> "वीडियोकंटनर" कहा जाता है।

यहां लिंक है जिसे मैं समझने के लिए उपयोग करता हूं। http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html

यहां दोनों में प्रवेश करने और वेबकिट और मोज़िला ब्राउज़र में पूर्ण स्क्रीन मोड से बाहर निकलने के लिए जे एस कोड है:

var $video=$('video'); 
//fullscreen button clicked 
$('#fullscreenBtn').on('click', function() { 
$(this).toggleClass('enterFullscreenBtn'); 
    if($.isFunction($video.get(0).webkitEnterFullscreen)) { 
       if($(this).hasClass("enterFullscreenBtn")) 
        document.getElementById('videoContainer').webkitRequestFullScreen();       
       else 
       document.webkitCancelFullScreen();  
    } 
    else if ($.isFunction($video.get(0).mozRequestFullScreen)) { 
       if($(this).hasClass("enterFullscreenBtn")) 
        document.getElementById('videoContainer').mozRequestFullScreen(); 
       else 
        document.mozCancelFullScreen(); 
    } 
    else { 
      alert('Your browsers doesn\'t support fullscreen'); 
    } 
}); 

और यहाँ एचटीएमएल है:

<div id="videoContainer"> 
     <video>...<source></source> 
     </video> 
     <div> custom controls 
      <button>play/pause</button> 
      <button id="fullscreenBtn" class="enterFullscreenBtn">fullscreen</button> 
     </div> 
</div> 

Answer 2

कस्टम दिखाएँ नियंत्रक

#customController{ 
    -------------------; 
    -------------------; 
    -------------------; 
    z-index: 2147483647; 
} 

देशी नियंत्रक छुपाएं

video::-webkit-media-controls { 
    display:none !important; 
} 
video::-webkit-media-controls-enclosure { 
    display:none !important; 
}