Могу ли я использовать JavaScript для динамического изменения источника видео?

Question

Как я могу изменить источник видео с помощью JS?

<video id="myVideoTag" width="670" height="377" autoplay="true" controls="controls">
    <source src="http://www.test.com/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

Answer 1

Конечно, вы можете просто установить src атрибут на source элемент:

document.querySelector("#myVideoTag > source").src = "http://example.com/new_url.mp4"

Или используя jQuery вместо стандартных методов DOM:

$("#myVideoTag > source").attr("src", "http://example.com/new_url.mp4"​​​​)​

Answer 2

Я сталкивался с этой проблемой несколько раз и, основываясь на предыдущем опыте и копании, могу предложить следующие варианты:

• заменить видео тег полностью

да просто вставь заново <video> элемент с новыми источниками. Это простой, но эффективный подход. Не забудьте переинициализировать слушателей событий.

---

• назначить URL видео для video.src

это я видел в ответах здесь, на stackru, а также в источниках на github.

var video = document.getElementById('#myVideo');
video.src = newSourceURL;

Это работает, но вы не можете предоставить опции браузера для выбора.

---

• вызов .load() на элементе видео

согласно документации вы можете обновить src атрибуты для <video>"s <source> теги, а затем позвоните .load() чтобы изменения вступили в силу:

<video id="myVideo">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogg" type="video/ogg" />
</video>

<script>
    var video = document.getElementById('myVideo');
    var sources = video.getElementsByTagName('source');
    sources[0].src = anotherMp4URL;
    sources[1].src = anotherOggURL;
    video.load();
</script>

Тем не менее здесь сказано, что в некоторых браузерах есть проблемы.

Надеюсь, будет полезно иметь все это в одном месте.

Answer 3

Я столкнулся с той же проблемой. По этой теме:

изменение источника на видео теге html5

невозможно изменить src исходного тега. вам придется использовать src самого тега video.

Answer 4

Это работает

<video id="videoplayer1" width="240" height="160" controls>
    <source id="video_res_1" src="" type="video/ogg">
</video>

и в JavaScript

document.getElementById("video_res_1").src = "my video url.ogv";
document.getElementById("videoplayer1").load();

Ключ - функция.load(), которая перезагружает видеоплеер.

Answer 5

Вы не должны пытаться изменить srcатрибут исходного элемента в соответствии с этим примечанием к спецификации.

Динамическое изменение исходного элемента и его атрибута, когда элемент уже вставлен в видео- или аудиоэлемент, не будет иметь никакого эффекта. Чтобы изменить то, что воспроизводится, просто используйте атрибут src непосредственно в медиа-элементе.

Допустим, у вас есть:

      <audio>
    <source src='./first-src'/>
</audio>

Вы можете изменить media src следующим образом:

      <audio src='./second-src'/>
    <source src='./first-src'/>
</audio>

Answer 6

Я надеюсь, что это должно работать

HTML-код ниже

<video controls style="max-width: 90%;" id="filePreview">                        
    <source type="video/mp4" id="video_source">
</video>

JS код ниже

   $("#fileToUpload").change(function(e){
        var source = $('#video_source');
        source[0].src = URL.createObjectURL(this.files[0]);
        source.parent()[0].load();
    }); 

Answer 7

Поскольку другие решения у меня не работали, вот что я сделал:

 <video width="400" controls id="the_id_of_your_video_here">
  <source src="path_to_first_video.mp4" type="video/mp4">
  Your browser does not support HTML video.
</video>

<button type="button" name="button" onclick="changeVid()">Click me to change the video</button>

<script>
function changeVid(){
  var video =  document.getElementById("the_id_of_your_video_here");
  video.src = 'path_to_second_video.mp4'; // Make sure to not use ..\ like in HTML but ../ if you have to give a more complex file path like: '../../myVideoFolder/myVideo.mp4'
  video.load();
}
</script>

Больше ничего не нужно для запуска этого решения - если только я не напортачил...

Answer 8

Я обнаружил, что динамически создавая и добавляя ребенка source элементы сделали свое дело.

var videoElement = document.querySelector('.my-video');
var videoSources = ["video.mp4","video.webm"]
if (videoElement) {
    for (var i = 0; i < videoSources.length; i++) {
        var sourceTag = document.createElement("source");
        sourceTag.type = "video/" + videoSources[i].split('.')[1];
        sourceTag.src = videoSources[i];
        videoElement.appendChild(sourceTag);
    }           
}

Answer 9

Хотя Кэмпбелл предоставил правильное решение, здесь предлагается более полное решение вопроса "специфического для плейлиста" (как отмечено в комментариях). Это решение может быть применено ко всем видеоформатам, если оно реализовано правильно (я использовал http://modernizr.com/, чтобы определить, какой источник будет воспроизводиться для данного браузера, в сочетании с решением, приведенным выше).

Это решение будет работать (и было протестировано) для смены видео в тегах видео HTML5 во ВСЕХ браузерах HTML5, включая IE8.

Answer 10

Проверь это. Этот javascript изменяет источник исходного тега. https://jsfiddle.net/a94zcrtq/8/

<script>
  function toggle() {
            if ($(this).attr('data-click-state') == 1) {
                $(this).attr('data-click-state', 0)
                document.getElementById("source").src = "http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4";
                document.getElementById("videoPlayer").load();
            } else {
                $(this).attr('data-click-state', 1)
                document.getElementById("source").src = "http://techslides.com/demos/sample-videos/small.mp4";
                document.getElementById("videoPlayer").load();
            }
        } 
</script>