Xóa đèn flash tải đen trên video HTML5

Question

Tôi đã tạo một trang web cho trò chơi trực tuyến mà tôi chơi. Trong tiêu đề, tôi có một video HTML5 phát rất nhanh (1 giây). Trong Internet Explorer, không có vấn đề gì, tuy nhiên trong Chrome khi video đang tải thì có một màn hình đen rất ngắn. Có cách nào mà tôi có thể loại bỏ flash này, hoặc, thất bại, làm cho nó trắng để phù hợp với nền? Bạn có thể thấy những gì tôi có ý nghĩa ở đây http://testingfortagpro.meximas.com/. Nếu bạn thử nó trong IE và Chrome, bạn sẽ thấy sự khác biệt trong cách tải video. Ngoài ra có cách nào tốt hơn để thực hiện điều này? Tôi đã thử sử dụng GIF động nhưng chất lượng được giảm đáng kể.

Cảm ơn!

Answer 1

Phần Poster của blog post điều này chỉ ra như sau: "Nếu bạn không chỉ định một hình ảnh áp phích trình duyệt có thể chỉ hiển thị một hộp đen điền kích thước của phần tử"

Vì vậy, bạn dường như không thể khắc phục điều này bằng cách thêm một background-color màu trắng để các yếu tố video ... nhưng bạn có thể thêm ảnh áp phích màu trắng đơn giản như vậy:

<video width="320" height="240" autoplay="" poster="http://dummyimage.com/320x240/ffffff/fff" > 
 
    <source src="http://testingfortagpro.meximas.com/movie2.mp4" type="video/mp4"> 
 
</video>

Answer 2

Bạn có thể sử dụng trong suốt gif poster:

poster="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 

Nhưng điều đó là không đủ để loại bỏ nhấp nháy trong Firefox. Tôi đã kết thúc bằng cách ẩn video cho đến khi phát:

<video autoplay style="visibility:hidden;" onplay="var s=this;setTimeout(function(){s.style.visibility='visible';},100);"> 

Điều chỉnh thời gian chờ khi bạn thấy phù hợp. Khi không sử dụng tính năng tự động phát, tôi phải tăng lên tới 400 ms.

Answer 3

Tôi đã gặp sự cố tương tự và sửa lỗi bằng cách ẩn phần tử video bằng cách sử dụng hiển thị CSS: không cho đến khi phần tử video báo hiệu nó đã tải xong thông qua sự kiện onLoadedData và phản hồi sự kiện tôi đặt display: block.

Điều đó đã thoát khỏi đèn flash đen.

Answer 4

Đặt thuộc tính áp phích vào thẻ video không ngăn hộp đen nhấp nháy khi người dùng làm mới trang tuy nhiên tôi đã sử dụng chức năng ẩn trên sự kiện 'beforeunload' và giờ đèn flash đen đã biến mất.

$(window).on('beforeunload', function() { 
    $("video").hide(); 
}); 

Answer 5

Tôi gặp sự cố nhấp nháy tương tự trong Firefox, ngay cả với thuộc tính áp phích được đặt. Tôi đã sửa lỗi này bằng cách thêm hình nền vào thẻ video tương ứng với khung hình đầu tiên của video.

Answer 6

$ (cửa sổ) .on ('beforeunload', function() {$ ("video"). Hide();});

Thao tác này sẽ ẩn phần tử video ngay trước khi cửa sổ tải xuống và tải tài liệu tiếp theo.