Javascript, динамически изменять URL-адрес видео - URL-адрес видео установлен / Показан только плакат-заполнитель - PullRequest
2 голосов
/ 10 июля 2020

Я хочу динамически изменять URL-адреса двух видео. Моя проблема в том, что URL-адрес первого видео изменяется и воспроизводится правильно, а второе видео просто меняет URL-адрес видео, не воспроизводя его. Во втором видео по-прежнему отображается плакат-заполнитель.

Без изменения Video.source.sr c моя страница выглядит так: image

<div class="container-fluid" id="container">
    <div class="cocoen">
        <video loop autoplay muted poster="img/placeholder_0.png">
            <source type="video/mp4">
        </video>
        <video loop autoplay muted poster="img/placeholder_1.png">
            <source type="video/mp4">
        </video>
    </div>
  

При попытке установить источники видео (да, я знаю, что оба URL-адреса видео одинаковы, это только для тестовых целей: p)

var urls = ["img/small_1.mp4", "img/small_1.mp4"];
var sources = $("video > source").toArray();
sources[0].src = urls[0];
sources[1].src = urls[1];

startVideos();

Работает только первый (левый): enter image description here But the Sources are correctly set on both videos. enter image description here

I want to change the URLS more then Once, so just setting the URLS in the HTML isnt an Option. If i set the src of video#1 to movie1 in html and video#2.src to movie2 and use JS to set video#1.src = movie2 and video#2.src=movie1 only the left video changes in display even tho the html has the correct src's.

image

function reduceRetryOnError(array, callbackFunction, functionToRetry) {
    success = array.reduce((acc, value) => acc && callbackFunction(value));
    if (!success) {
        console.log("Reduce failed: Retry in 300 ms");
        setTimeout(functionToRetry(), 300);
    }
}

function startVideos() {
    function startVideo(video) {
        if (!video) {
            return false;
        }

        if (video.paused) {
            video.play();
        }

        return true;
    }
    reduceRetryOnError($("video").toArray(), startVideo, startVideos);
}

Я также попытался поставить на паузу и снова запустить видео с помощью функции запуска.

Ty in advanced.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...