如何在 DOM 之后加载视频 HTML5 并循环播放？

Posted 2023-05-07

【中文标题】如何在 DOM 之后加载视频 HTML5 并循环播放？

【英文标题】：How to load video HTML5 after DOM and play in loop?

【发布时间】：2015-07-05 12:45:07

【问题描述】：

我在 DOM 之后加载视频 html5 并循环播放时遇到问题。在 DOM 之后正确加载视频，但是当视频再次开始播放时再次加载。我想加载一次视频并重播。

<video id="video" muted="true" style="width: 100% !important; height: auto !important;">
            <source type="video/mp4" id="mp4">
            <source type="video/webm" id="webm">
</video>

我的脚本

var video = $('#video')[0];
var mp4Vid = $('#mp4');
var webmVid = $('#webm');   
mp4Vid.attr('src', "video/video.mp4");
webmVid.attr('src', "video/video.webm");
video.load();
video.play();
var videoloop = video;
videoloop.addEventListener('ended', function() 
    this.play();    
, false);

编辑// 问题解决了 这是因为我将 Chrome 设置为“禁用缓存（在 devtools 打开时）

【问题讨论】：

将代码包装在一个`$(function() );`中以在dom加载后执行

我在 DOM 之后正确加载了此代码和视频，但是当再次播放此视频时，再次从服务器下载并播放。我想下载一次视频并循环播放。

【参考方案1】：

尝试使用preload="auto"，页面加载时应该会加载整个视频

<video preload="auto" id="video" muted="true" style="width: 100% !important; height: auto !important;">
            <source type="video/mp4" id="mp4">
            <source type="video/webm" id="webm">
</video>

【讨论】：

此解决方案不起作用，DOM 后视频未加载

你确定吗？仅 IE 不支持 preload 属性。在您的 javascript 中删除该行：video.load();

问题已解决。这是因为我将 Chrome 设置为“禁用缓存（当 devtools 打开时）现在视频正在从缓存中播放