Tạo kiểu điều khiển video gốc có trình duyệt

Question

Có thể duyệt qua các trình điều khiển kiểu video gốc của trình duyệt chẳng hạn như video từ thẻ video của HTML5 không?

Tôi không hiểu nếu nó có thể hay không, tôi không thể tìm thấy bất cứ điều gì khác hơn là:

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

nhưng nó dường như được sử dụng Javascript

Tôi muốn làm cho thanh điều khiển vừa với chiều rộng của video; như bạn có thể nhìn thấy từ hình ảnh được đính kèm, thanh điều khiển làm nổi bật chiều rộng của video.

HTML cho hình trên

<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

Bạn không thể tạo kiểu thiết lập kiểm soát mặc định của trình duyệt, nhưng bạn có thể sử dụng (JavaScript) Truyền thông API để xây dựng bộ điều khiển của riêng bạn mà của tất nhiên bạn có thể tạo kiểu theo bất kỳ cách nào bạn thích.

Hãy xem Working with HTML5 multimedia components – Part 3: Custom controls cho bạn biết cách thực hiện điều này.

Answer 2

Bạn có thể tạo kiểu gốc kiểm soát trong một số trình duyệt, sử dụng shadow DOM. Enable bóng dom trong cài đặt thanh tra debug:

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

HTML5 Video Controls - make larger?

Answer 3

Đây là một ví dụ điển hình cho phong cách điều khiển máy nghe nhạc có nguồn gốc (chỉ kiểm tra trong Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn

Để thay đổi độ rộng của trình điều khiển trình phát thanh:

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