动态加载和播放HTML5视频

时间:2013-09-09 17:16:01

标签: javascript html5 html5-video

我正在尝试加载并播放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();
}

我检查了元素并确实更新了视频代码属性,但没有加载或播放视频。

我做错了什么?

1 个答案:

答案 0 :(得分:10)

首先检查你是否给视频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();
}