如何强制html5视频全量加载？

Question

我在一个页面上有几个html5视频。当我第一次进入页面时，它们加载正确-我可以看到正确的帧大小，播放视频等。在转到另一个页面并返回到视频页面后，帧不够高，视频不能播放，没有全屏等。

在我看来，这与视频加载有关。我尝试使用onloadeddata，但没有成功(我可能用错了，新手)。

有没有办法强制加载视频？就像一个循环检查视频是否加载，如果没有-加载它们？

更新:代码如下。

var content = '';
    var index;
    $.post('api/getVideo.php', {id: id}, function(data) {
    //console.log(data);

        for (index = 0; index < data.length; index++) {
            content = content + '<div class="col-md-6 video-col"> <button id="play" class="full-play-button"><i class="fa fa-play"></i></button>' +
                    '<video id="video1" class="video-small"> <source src="'+data[index]["Path"] + '"type="video/'+data[index]["Typ"]+'" class="video-file"> </video><h3 class="video-title">'+
                    data[index]["Tytul"]+'</h3></div>';
        }
    }, "json");

Answer 1

你的source标签中可能有一个拼写错误。尝试将'"type="video/‘改为’“type=video/”“。现代浏览器不再需要类型属性，所以尝试完全删除‘“type=”视频/’+数据索引+‘。我没有足够的信息来测试你的代码，但它看起来像是一个语法错误。

Answer 2

从MediaAPI文档中，

Media API还包含一个load()方法，该方法“使元素重置并开始从头开始选择和加载新的媒体资源”。(加载元素导致浏览器运行media element load algorithm)

您可以在从新页面返回时触发加载。

Answer 3

简而言之，这不是完全可能的。对于短视频，您可以将preload attribute设置为"auto“或空字符串"”。这意味着，您希望浏览器完全预加载源文件。

不幸的是，在长视频的情况下，视频并不能被大多数浏览器完全下载。在移动浏览器情况下，显式iOS。preload属性不起作用。因此，实现方法如下所示：

<video preload="" controls="">
    <source src="my-video.mp4" type="video/mp4" />
    <source src="my-video.webm" type="video/webm" />
</video>