Dynamically Load and Play HTML5 video

Question

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

Here's my 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>

Here's my JS:

function loadVideo(id)
{
    var video = document.getElementById('video');
    var mp4 = document.getElementById('mp4');

    mp4.src = "vidz/" + id;

    video.load();
    video.play();
}

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?

Answer 1

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

like

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