CODEWITHSUNDEEP
javascripthtmlhtml5-video
Ricky
Ricky

Reputation: 3072

Dynamically Load and Play HTML5 video

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?

Upvotes: 13

Views: 62187

Answers (2)

Guillermo
Guillermo

Reputation: 1

If you have the video on antoher folder you can try:

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

    mp4.src = "./vidz/" + id;

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

Upvotes: 0

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

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

Upvotes: 19

Related Questions