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

Posted 2023-05-07

【中文标题】如何强制 html5 视频完全加载？

【英文标题】：How to force a html5 video to load fully?

【发布时间】：2014-09-01 19:12:49

【问题描述】：

我在一个页面上有几个 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");

【问题讨论】：

帖子已更新。就像我说的，我尝试了 onloaddata 并尝试检查是否 readyState === 4（但同样，新手）。

你是如何使用onloadeddata的？？那不是jQuery函数？

我现在不记得了，我昨天试过了，但它是关于全屏 - 使 video1.play() 仅 onloadeddata 以防止在没有加载视频的情况下全屏触发。

【参考方案1】：

您的源标签中可能有错字。尝试将 '"type="video/' 更改为 '"type=video/"'。现代浏览器不再需要 type 属性，因此请尝试完全删除 '"type="video/'+data[index]["Typ"]+'。我没有足够的信息来测试您的代码，但它看起来像是语法错误。

【参考方案2】：

来自MediaAPI docs，

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

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

【讨论】：

感谢您的回答。如何确定“从新页面返回”？凭借我非常少的 javascript 知识，我假设我应该能够添加一个事件侦听器，例如：when "comingBackToPage" load() ?

我很难说这是否可行。我问了一位更高级的同事，他设法找到了解决方案 - 我真的不明白为什么很遗憾我无法在这里描述它。 +1 虽然让我意识到 load() 可能意味着两种不同的东西。

但答案不正确。 load 方法实际上做了同样的事情，如果你构建一个视频并将其插入到 dom 中，那就完成了。在此之后立即调用 load 不会加载视频，它会重置并重新解析视频元素。如果您更改子源元素，这很有用。

【参考方案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>