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

您的源代码中可能有拼写错误。尝试更改＆＃39;＆＃34;输入=＆＃34;视频/＆＃39;到＆＃39;＆＃34;输入=视频/＆＃34;＆＃39;。现代浏览器不再需要type属性，因此请尝试删除＆＃39;＆＃34; type =＆＃34; video /＆＃39; + data [index] [＆＃34; Typ＆＃34 ;] +＆＃39;完全。我没有足够的信息来测试您的代码，但它看起来像语法错误。

Answer 2

来自MediaAPI文档，

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

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

Answer 3

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

Unfortunatley，如果是长视频，大多数浏览器都无法完全下载该视频。在移动浏览器明确iOS的情况下。 preload属性不起作用。所以这样的方式看起来像这样：

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

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

3 个答案: