Question

我需要加载一个Html5视频100％然后我需要“播放”它并用视频显示我的页面。

我需要这样做，因为我的视频有点大而且没有加载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

您必须使用Media Source Extensions（MSE）来控制它。否则，浏览器将执行其认为最佳的操作，您将无法强制或保证浏览器将加载100％的视频。

查看MSE here (intro)，here (specs)和here (use-case)。

加载Html5Video 100％然后显示页面

2 个答案: