动态加载和播放 HTML5 视频

Dynamically Load and Play HTML5 video

本文关键字:HTML5 视频 播放 加载 动态      更新时间:2023-09-26

我正在尝试加载和播放HTML5视频onClick事件。但我无法完成此操作:-/

这是我的HTML5:

<div id="divVideo">
    <video id="video" controls width="560">
        <source id="mp4" type="video/mp4" />
    </video>
</div>
<div onclick="loadVideo('Muse-Animals.mp4');">play</div>

这是我的JS:

function loadVideo(id)
{
    var video = document.getElementById('video');
    var mp4 = document.getElementById('mp4');
    mp4.src = "vidz/" + id;
    video.load();
    video.play();
}

我检查了该元素,它确实更新了视频标签属性,但无法加载或播放视频。

我做错了什么?

首先检查您是否正在为视频 src 提供静态,然后它是否正在播放。如果它正在播放,那么在动态提供它的同时,尝试在 SRC 中提供一个额外的变量以使视频源自行刷新

喜欢

function loadVideo(id)
{
var video = document.getElementById('video');
var mp4 = document.getElementById('mp4');
d = new Date();
mp4.src = "vidz/" + id + d.getTime();
video.load();
video.play();
}