❮ Đố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. saiThê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"];
function enableControls[] {
x. điều khiển = đúng;
x. tải[];
}
function disableControls[] {
x. điều khiển = sai;
x. tải[];
}
function checkControls[] {
alert[x. điều khiển];
}
Trang liên quan
tài liệu tham khảo HTML. thuộc tính điều khiển HTML
Video nền và video tự động phát trên các trang web ngày càng trở nên phổ biến [và có lẽ sẽ sớm trở thành điều bình thường mới]. Nó cũng thường chỉ hiển thị video trên màn hình lớn hơn và ẩn video trên màn hình nhỏ
Một Anti-pattern xuất hiện
Tuy nhiên, theo kinh nghiệm của tôi khi xem hàng trăm trang web trên thiết bị di động và máy tính để bàn – tôi thấy rằng nhiều trang web không hiển thị video trên thiết bị di động chỉ đơn giản là sử dụng CSS để “hiển thị. none” các video trên điện thoại di động
Tuyệt vời – không có video nào xuất hiện trên màn hình. Tuy nhiên, nếu bạn tình cờ mở devTools hoặc chạy WebPageTest trên màn hình có kích thước di động, một bí mật khủng khiếp sẽ xuất hiện
Video nền không hiển thị cho người dùng, nhưng mọi người dùng di động đang tải xuống một phần đáng kể của video [trong ảnh chụp màn hình ở trên - gần 3 MB video chưa xem, chưa sử dụng. ] Vậy chuyện gì đang xảy ra ở đây?
Vì vậy, video được đặt thành tự động phát và bị tắt tiếng [đối với tự động phát trên thiết bị di động], nhưng video bị ẩn do CSS
@media only screen and [max-width: 992px] {
#hero-video { display: none; } /*. hide video on mobile screens*/
#mobile-hero-image {display: inline-block;}
}
@media [min-width: 993px]{
#hero-video {display: inline-block; }
#mobile-hero-image {display: none;}
}
Trên màn hình nhỏ hơn 992px [điểm cắt tùy ý của tôi], video được thay thế bằng trình giữ chỗ hình ảnh. Trên màn hình lớn hơn - ngược lại. Tò mò?
Đây là một vấn đề
Người dùng di động thường sử dụng mạng bị hạn chế hoặc có gói dữ liệu hạn chế [hoặc cả hai. ]
Ở Nhật Bản, web chậm hơn vào cuối tháng do giới hạn dữ liệu, dẫn đến giảm mức độ tương tác. Twitter. com/rKWClaqWUD
– Yoav Weiss [@yoavweiss] ngày 14 tháng 11 năm 2019
Biết rằng một tệp video trên trang web của bạn có thể dễ dàng tăng gấp đôi hoặc gấp ba trọng lượng của trang và biết rằng khách hàng trên thiết bị di động của bạn sẽ không bao giờ nhìn thấy tệp đó – chúng ta nên làm điều gì đó để ngăn việc tải xuống bổ sung này xảy ra
cách khắc phục
Có 2 thay đổi đối với thẻ video
- Chúng tôi sẽ xóa thuộc tính tự động phát khỏi thẻ video. Đừng lo lắng, chúng tôi sẽ sử dụng JavaScript để chèn tự động phát cho màn hình lớn hơn
- Thêm "tải trước = không". Điều này yêu cầu trình duyệt không tải xuống BẤT KỲ video nào cho đến khi nó cần tệp
Không có tính năng tự động phát và tải trước =”none”, thiết bị di động sẽ không tải xuống bất kỳ video nào. Vì vậy, mã của chúng tôi trông giống như thế này
Bây giờ, để thêm lại lệnh tự động phát, chúng tôi chỉ cần sử dụng JavaScript để thêm lại thuộc tính nếu cửa sổ vượt quá ngưỡng 500px của chúng tôi
window.onload = addAutoplay[];
var videoLocation = document.getElementById["hero-video"];
function addAutoplay[] {
if[window.innerWidth >992]{
videoLocation.setAttribute["autoplay",""];
};
}
Giờ đây, khi tải trang, thuộc tính tự động phát được thêm vào màn hình “lớn”. Thuộc tính autoplay có tầm quan trọng cao hơn preload=”none” và do đó, video sẽ bắt đầu tải xuống và phát lại ngay lập tức – giống như hiện nay
Trên thiết bị di động, không có tự động phát và preload=”none” ngăn trình duyệt tải xuống video. Có một trang thử nghiệm và kết quả WebPageTest dành cho Chrome dành cho thiết bị di động cho thấy không xảy ra quá trình tải xuống video
cách tiếp cận khác
Thay vì thêm tự động phát vào “màn hình lớn hơn”, bạn có thể làm ngược lại. xóa tự động phát khỏi màn hình nhỏ hơn
if[window.innerWidth 992]{
var source = document. createElement[‘source’];
source. src = src;
videoLocation. appendChild[nguồn];
};
}
Sự kết luận
Ẩn video khỏi thiết bị di động không ngăn video tải xuống một phần – lãng phí megabyte dữ liệu trên mỗi lần tải trang [và có thể là GB và TB từ máy chủ của bạn. ]. Là nhà phát triển, chúng ta nên thực hiện các bước bổ sung để tránh lãng phí dữ liệu này và bằng cách thêm tham số tự động phát theo chương trình dựa trên kích thước màn hình của thiết bị, chúng ta có thể loại bỏ việc tải xuống video trên thiết bị di động không bao giờ hiển thị video
Kiểm tra trang web của bạn bằng WebPageTest hoặc công cụ dành cho nhà phát triển yêu thích của bạn để xem liệu người dùng di động của bạn có bị buộc phải tải xuống các video mà họ không bao giờ có thể xem hay không và sau đó ngăn điều đó xảy ra
Thẻ ẩn trong HTML là gì?
The xác định trường nhập ẩn . Trường ẩn cho phép nhà phát triển web bao gồm dữ liệu mà người dùng không thể nhìn thấy hoặc sửa đổi khi biểu mẫu được gửi.
Thẻ HTML cho video là gì?
Thẻ video HTML