Как играть видео динамически, когда его источник меняется

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 dynamicaly ??

Answer 1

Вам не нужно добавлять новые теги source. Только установите адрес нового vidoe на атрибут src текущего тега source. Обратите внимание, что после изменения src вам необходимо загрузить vidoe с помощью .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(); 
}