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

Ответ 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"​​​​)​

Ответ 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>

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

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

Проверьте это. Этот javascript изменяет src исходного тега. 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>

Ответ 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(), которая перезагружает видеоплеер.

Ответ 7

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

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

Ответ 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);
    }           
}