Chrome không hiển thị video HTML5 cho đến khi trang được thay đổi kích thước

Question

Tôi đang cố tạo một video nền đầy đủ cho trang web mà tôi đang phát triển.

Tôi có tất cả các thẻ video của mình được thiết lập đúng cách và video phát tuyệt vời trong Safari và Firefox nhưng trong Chrome có vấn đề.

Khi tôi nhấn phát trong Chrome, âm thanh sẽ bắt đầu phát nhưng không có video nào xuất hiện. Video chỉ xuất hiện nếu bạn thay đổi kích thước trang hoặc làm điều gì đó khác trực quan như chọn văn bản trên trang. Sau đó trang hiển thị video.

Có cách khắc phục sự cố này hay một cách nào đó để lừa Chrome hiển thị đúng video không? Nó không xuất hiện để được một vấn đề codec vì nó chơi tốt sau khi bạn thay đổi kích thước trang (và kích thước trang không quan trọng, bạn có thể thay đổi kích thước nó trở lại kích thước ban đầu và nó sẽ tiếp tục chơi).

Testsite: Mã www.mashwork.com/testsite

Xem:

#mashvid { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: auto; 
    min-width: 100%; 
    z-index: -5; 
} 

<video preload id="mashvid" poster="images/mashvid_poster.png"> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'> 
     Your browser does not support the video tag. 
</video> 

Answer 1

tôi đã cùng một vấn đề trong chrome. Tôi đã thêm điều khiển vào video và nó đã khắc phục sự cố.

bây giờ tôi giấu các điều khiển khi doc is ready:

$(document).ready(function() { 
    var video = document.getElementById("video"); 
    video.removeAttr("controls"); 
});