Question

我正在尝试加载大型HTML5背景视频。使用下面指定的标签，结果是没有吸引力的＆amp;马虎。背景视频加载一半，在遵循css规则并调整大小之前首先显示为小。

CSS：

video{
    position:fixed;
    left:0;
    top:0;
    min-width:100% !important;
    min-height:100% !important;
    z-index:-100;
    background:url('img/poster.jpg') no-repeat;
    background-size:100%;
    -webkit-transition:1s opacity;
    transition:1s opacity
    }

HTML：

<video autoplay="autoplay" loop="" poster="img/poster.jpg" id="videoshow">
    <source src="videos/video.webm" type="video/webm">
    <source src="videos/video.mp4" type="video/mp4">
</video>

使用第三方插件到Jquery，比如BigVideo.js是膨胀的＆amp;车。

我现在要做的就是隐藏视频，只有在像这样加载Jquery后才能看到它，但它不起作用。任何人都可以告诉我，如果我朝着正确的方向前进，或者是否有更直接的方式这样做？ -

$("#videoshow").addEventListener('load', function() {
    var video = document.querySelector('#videoshow');

function checkLoad() {
    if (video.readyState === 4) {
        $("#videoshow").css('display','block');
    }
}

checkLoad();
}, false);

如下所述，我已经实现了以下oncanplay脚本 -

var vid = document.getElementById("videoshow");
vid.oncanplay = function() {
    vid.style.display = 'block';
};

但它的命中与错过......有时视频在屏幕上保持微小的中心，有时它会使css指定100％。我正在使用最新版本的safari＆amp;类似的网站，如AirBnB，Paypal等......不会有这个问题。还有其他建议吗？

Answer 1

尝试使用canplay事件：

当有足够数据可以播放媒体时发送，at 最少几帧。这对应于 HAVE_ENOUGH_DATA readyState。

var video = document.querySelector('#videoshow');
video.on('canplay', function() {
   video.play();
   video.style.display = 'block';
});

如果您遇到尺寸问题，并且因为您有jQuery可用，您可以将css width / height属性更新为精确尺寸：

var video = document.querySelector('#videoshow');
$(video).css({
  width: $(window).width() + 'px',
  height: $(window).height() + 'px'
});
video.on('canplay', function() {
   video.play();
   video.style.display = 'block';
});

清洁和跨浏览器友好的方式加载大背景视频

1 个答案: