CODEWITHSUNDEEP
javascriptjqueryhtmlhtml5-video
Pawan
Pawan

Reputation: 32321

How to play video dynamically when its source is changed

I have got a 

<input type="file" id="howtovideo" name="howtovideo" accept="video/mp4"> </span>

When its changed , i am calling the below function to play video dynamically 

$("#howtovideo").on('change', function() {
    loadVideo();
});

function loadVideo(){
    alert('loadVideo called');
    var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
    var video = document.getElementById('video');
    var source = document.createElement('source');
    source.setAttribute('src', newsrc);
    video.appendChild(source);
    video.play();
}

But nothing is happening and there are no errors in console demo. Could you please let me know how to play vdeo dynamicaly ??

Upvotes: 0

Views: 1282

Answers (1)

Mohammad
Mohammad

Reputation: 21489

You don't need to add new source tag. Only set address of new video to src attribute of current source tag. Note that after changing src, you need to load video using .load() and then play video. Also if you have jQuery, use it to finding elements.

$("#howtovideo").on('change', function(){
    loadVideo();
});

function loadVideo(){
    var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
    $('#video > source').attr('src', newsrc);
    $("#video")[0].load();
    $("#video")[0].play();
}

Upvotes: 1

Related Questions