加载 Html5Video 100% 然后显示页面

Question

我需要加载一个 Html5 视频 100% 然后我需要 "play" 它并显示我的视频页面。

我需要这样做，因为我的视频有点大，它在没有负载的情况下启动 100% 并冻结

Answer 1

在 JS 中创建元素：

var obj = document.createElement('video');
$(obj).attr('id', 'example_video_test');
$(obj).attr('width', '640');
$(obj).attr('data-height', '264');
$(obj).attr('controls', ' ');
$(obj).attr('poster', '../oceans-clip.jpg');


source = document.createElement('source');
$(source).attr('type', 'video/mp4');
$(source).attr('src', '../oceans-clip.mp4');
$(obj).append(source);


if ( document.getElementById('example_video_test').readyState === 4 ) {
    // it's loaded
}

P.S：此代码未经测试，可能需要进行少量更改

readyState == 4 ==> Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption.

Answer 2

您必须使用媒体源扩展 (MSE) 来控制它。否则浏览器会做它认为最好的事情，您将无法强制或保证浏览器会加载 100% 的视频。

查看 MSE here (intro), and here (specs) and here (use-case)。

加载 Html5Video 100% 然后显示页面

Load Html5Video 100% then show Page

html

video

jquery

html5-video