如何在源更改时动态播放视频

Question

我有一个

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

当它改变时，我正在调用下面的函数来动态播放视频

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

但是什么也没有发生，控制台中也没有错误 demo。你能告诉我如何动态播放vdeo吗？？

Answer 1

您不需要添加新的 source 标签。仅将新视频的地址设置为当前 source 标签的 src 属性。请注意，更改src后，您需要使用.load()加载视频，然后播放视频。此外，如果您有 jQuery，请使用它来查找元素。

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

如何在源更改时动态播放视频

How to play video dynamically when its source is changed

html

javascript

jquery

html5-video