动态加载和播放HTML5视频 [英] Dynamically Load and Play HTML5 video

问题描述

我正在尝试加载并播放HTML5视频onClick事件。但是我无法实现这一点： - /

I'm trying to load and play a HTML5 video onClick event. But i'm not able to accomplish this :-/

这是我的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();
}

我检查了元素，它确实更新了视频标签属性， t加载或播放视频。

I checked the element and it does update the video tag properties, but doesn't load or play the video.

我在做什么错？

What am i doing wrong?

推荐答案

首先检查你是否给视频src静态，然后播放或不播放。
如果它正在播放，那么在动态给它时尝试在src中给出一个额外的变量以使视频源自动刷新

First of all check if you are giving the video src static then it is getting played or not. if it is getting played then while giving it dynamically try giving an extra variable in the src to make the video source refresh itself

像

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();
}

这篇关于动态加载和播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！