Могу ли я использовать 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

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

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

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

---

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

в соответствии с документацией вы можете обновить src атрибутов для <video> * <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 video

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

Answer 4

Я обнаружил, что динамическое создание и добавление дочерних элементов 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 5

Я надеюсь, что это должно работать, и, пожалуйста, настройте имя атрибута и идентификатор в соответствии с вашими потребностями.

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 6

Это работает

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

Проверьте это.Этот 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>

Answer 8

Несмотря на то, что Кэмпбелл предоставил правильное решение, более полное решение имеющегося под рукой вопроса о списке воспроизведения (как отмечено в комментариях) предоставляется здесь . Это решение может быть применено ко всем видеоформатам, если оно реализовано правильно (я использовал modernizr , чтобы определить, какой источник будет воспроизводиться для данного браузера, в сочетании с решением, приведенным выше).

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