Cách ẩn nút toàn màn hình của thẻ video trong HTML5

Question

Tôi cần phải ẩn nút toàn màn hình của thẻ video trong HTML5. Có cách nào để đạt được điều đó không?

Cảm ơn.

Answer 1

Tôi nghĩ bạn không thể làm điều đó mà không ẩn tất cả các điều khiển. Bạn có thể sử dụng dom methods của nó để thực hiện điều khiển của riêng bạn và thiết kế chúng để tìm chính xác giống như xây dựng trong điều khiển

Hoặc bạn cũng có thể sử dụng plugin html5 video bên ngoài để thực hiện điều này

Answer 2

Tôi nghĩ rằng bạn có thể thực hiện điều này bằng cách thay đổi css cho #document fragments, đây là các thông số kỹ thuật DOM1 và được hỗ trợ bởi tất cả các trình duyệt, nhưng về kiểu dáng, tôi không chắc chắn. Các giải pháp sau đây là webkit cụ

video::-webkit-media-controls-fullscreen-button { 
    display: none; 
} 
video::-webkit-media-controls-play-button {} 
video::-webkit-media-controls-timeline {} 
video::-webkit-media-controls-current-time-display{} 
video::-webkit-media-controls-time-remaining-display {} 
video::-webkit-media-controls-mute-button {} 
video::-webkit-media-controls-toggle-closed-captions-button {} 
video::-webkit-media-controls-volume-slider {} 

Here is the fiddle cho nó.

Ngoài ra, như @paulitto đề xuất, có thể triển khai các phương pháp DOM sau khi xóa thuộc tính controls từ yếu tố <video>. Tham khảo this tutorial để biết thêm.

PS: Làm thế nào tôi tìm thấy? Đi tới Chrome> Công cụ dành cho nhà phát triển> Cài đặt (biểu tượng bánh răng)> Trong phần tử tìm kiếm Hiển thị bóng tác nhân người dùng DOM, chọn hộp. Bạn sẽ có thể kiểm tra DOM bóng bên dưới và kiểu dáng tương ứng của chúng.

Answer 3

Bạn chỉ cần phải viết mã này trong css của bạn:

video::-webkit-media-controls-fullscreen-button { 
    display: none; 
} 

Và nút fulscreen sẽ ẩn

Answer 4

HTML5 công trình toàn màn hình kiểm soát ở khác nhau trong Firefox và Google Chrome Trong chrome nó hiển thị tùy chọn tải xuống thay vì toàn màn hình