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

#javascript #jquery #html #html5-video

#javascript #jquery #HTML #html5-видео

Вопрос:

У меня есть

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

Но ничего не происходит, и в демо-версии консоли нет ошибок.
Не могли бы вы сообщить мне, как динамически воспроизводить vdeo??

1. Добавьте autoplay атрибут к тегу video.

2. добавьте свой видеоэлемент в dom перед вызовом play() . Или используйте autoplay атрибут для элемента video

3. хотя добавление автозапуска не решает проблему

4. Почему вы добавляете новый source тег к видео? Измените только src атрибут текущего source тега.

5. Спасибо, Мохаммед, не могли бы вы предоставить пример того, как это сделать правильно

Ответ №1:

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