Làm cách nào để ẩn video trong HTML?

❮ Đối tượng video

Thí dụ

Bật điều khiển cho video

tài liệu. getElementById("Video của tôi"). điều khiển = đúng;

Tự mình thử »

---

Định nghĩa và cách sử dụng

Thuộc tính điều khiển đặt hoặc trả về việc video có hiển thị các điều khiển video tiêu chuẩn hay không

Thuộc tính này phản ánh thuộc tính điều khiển

Khi xuất hiện, nó chỉ định rằng các điều khiển video sẽ được hiển thị

Điều khiển video nên bao gồm

• Chơi
• Tạm ngừng
• tìm kiếm
• Âm lượng
• chuyển đổi toàn màn hình
• Chú thích/Phụ đề (nếu có)
• Theo dõi (nếu có)

---

Hỗ trợ trình duyệt

Kiểm soát tài sảnCó9. 0CóCóCó

---

cú pháp

Trả lại thuộc tính điều khiển

Đặt thuộc tính điều khiển

đối tượng video. điều khiển = đúng. sai

Giá trị tài sản

Giá trịMô tảđúng. falseChỉ định xem một video có hiển thị các điều khiển hay không

• true - Cho biết rằng các điều khiển được hiển thị
• sai - Mặc định. Cho biết rằng các điều khiển KHÔNG được hiển thị

---

---

chi tiết kỹ thuật

Giá trị trả về. Boolean, trả về true nếu các điều khiển video được hiển thị, nếu không, nó trả về giá trị falseDefault. sai

---

Thêm ví dụ

Thí dụ

Tìm hiểu xem các điều khiển video có hiển thị không

var x = tài liệu. getElementById("Video của tôi"). điều khiển;

Tự mình thử »

Thí dụ

Bật, tắt và kiểm tra trạng thái điều khiển

var x = tài liệu. getElementById("Video của tôi");

chức năng enableControls() {
x. điều khiển = đúng;
x. trọng tải();
}

chức năng vô hiệu hóaControls() {
x. điều khiển = sai;
x. trọng tải();
}

hàm checkControls() {
cảnh báo (x. điều khiển);
}

Tự mình thử »

---

Trang liên quan

tài liệu tham khảo HTML. thuộc tính điều khiển HTML

---

❮ Đối tượng video

Khi chúng tôi sử dụng các phần tử video HTML5 để xây dựng ứng dụng với Kurento, OpenVidu, Jitsi hoặc bất kỳ thư viện RTC nào khác, chúng tôi muốn ẩn hoàn toàn các điều khiển video

Chúng tôi có thể ẩn các điều khiển bằng cách không thêm thuộc tính controls vào phần tử video

 autoplay playsinline>

Ngay cả khi không có thuộc tính controls trên các thành phần, người dùng vẫn có thể xem phần điều khiển bằng cách nhấp chuột phải vào video và bật show controls

Người dùng có thể kích hoạt các điều khiển

Để tránh trường hợp này, chúng ta có thể áp dụng một thuộc tính CSS duy nhất để làm cho phần tử video không bao giờ là mục tiêu của các sự kiện con trỏ

 autoplay playsinline style="pointer-events: none;">

Thuộc tính CSS ở trên làm cho phần tử video không lắng nghe các sự kiện con trỏ. Do đó, người dùng không thể kích hoạt các điều khiển bằng cách nhấp chuột phải vào menu

document.addEventListener("DOMContentLoaded", function() { initialiseMediaPlayer(); }, false);


function initialiseMediaPlayer() {

    mediaPlayer = document.getElementById('media-video');

    mediaPlayer.controls = false;

    mediaPlayer.addEventListener('volumechange', function(e) { 
        // Update the button to be mute/unmute
        if (mediaPlayer.muted) changeButtonType(muteBtn, 'unmute');
        else changeButtonType(muteBtn, 'mute');
    }, false);  
    mediaPlayer.addEventListener('ended', function() { this.pause(); }, false); 
}

Để chạy chương trình trên ta lưu tên file “anyName. html(chỉ mục. html)”. Nhấp chuột phải vào tệp và chọn tùy chọn “Mở bằng Máy chủ Trực tiếp” trong trình chỉnh sửa Visual Studio Code

đầu ra

Điều này sẽ tạo ra đầu ra sau trên bảng điều khiển -

Trong đầu ra mẫu ở trên, thẻ video đã bị tắt. Nếu bạn muốn kích hoạt, chỉ cần bình luận dòng trên i. e