स्टाइलिंग ब्राउज़र-मूल वीडियो नियंत्रण

Question

क्या ब्राउज़र-मूल वीडियो जैसे एचटीएमएल 5 के वीडियो टैग से वीडियो क्रॉस-ब्राउजर शैली को नियंत्रित करना संभव है?

अगर यह संभव है मुझे समझ नहीं आता या नहीं, मैं के अलावा और कुछ नहीं मिल सकता है:

http://dev.opera.com/articles/view/custom-html5-video-player-with-css3-and-jquery/

लेकिन यह जावास्क्रिप्ट

का उपयोग करने की

मैं करना चाहते हैं लगता है नियंत्रण बार वीडियो चौड़ाई फिट; जैसा कि आप संलग्न छवि से देख सकते हैं, नियंत्रण बार वीडियो चौड़ाई से अधिक है। ऊपर छवि

<div class="video centered-content"> 
    <a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a> 
    <video width="63%" height="60%" id="video" class="video" controls> 
     <source src="<?php echo base_static_url();?>media/video.mp4"> 
     <source src="<?php echo base_static_url();?>media/video.ogv"> 
      <source src="<?php echo base_static_url();?>media/video.webm"> 
      </video> 
     </div> 

Answer 1

के लिए

एचटीएमएल आप ब्राउज़र की डिफ़ॉल्ट नियंत्रण सेट शैली नहीं दे सकते, लेकिन आप (जावास्क्रिप्ट) मीडिया एपीआई का उपयोग कर सकते हैं अपने खुद के नियंत्रण सेट का निर्माण करने की जिनमें से कोर्स आप जिस तरह से चाहें शैली में शैली कर सकते हैं।

Working with HTML5 multimedia components – Part 3: Custom controls पर एक नज़र डालें जो आपको दिखाता है कि यह कैसे किया जा सकता है।

Answer 2

छाया छाया का उपयोग करके आप कुछ ब्राउज़रों में देशी नियंत्रण शैली बना सकते हैं। डिबग निरीक्षक सेटिंग्स में छाया डोम सक्षम करें: https://codepen.io/BainjaminLafalize/pen/GiJwn

की चौड़ाई बदलने के लिए:

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

HTML5 Video Controls - make larger?

Answer 3

यहाँ एक अच्छा देशी प्लेयर नियंत्रण स्टाइलिंग के लिए उदाहरण (बस क्रोम में परीक्षण किया गया) है प्लेयर नियंत्रण बार:

video::-webkit-media-controls-panel { 
    width: 40px; 
}