HTML5 Video - изменение нескольких источников - PullRequest
Новая
       20

HTML5 Video - изменение нескольких источников

2 голосов
/ 18 апреля 2011

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

Я работаю над демонстрацией, в которой используются несколько тегов видео (vd1-3), которые затем используются в нескольких тегах canvas (cv1-3). 

<video id="vd1" width="480" preload> 
    <source src="jerryclips/Bild01.webm" type="video/webm" id="vd1webm">
    <source src="jerryclips/Bild01.mp4" type="video/mp4" id="vd1mp4">
</video>

<canvas id="cv1" width="160" height="270"></canvas>

Я получил рабочую версию, которая использует одно видео. Теперь я хотел бы иметь возможность динамически изменять клипы, которые воспроизводятся в моих тегах видео и впоследствии в тегах холста. Смена только одного источника работала, насколько я помню, это было просто "vd1.src = '...'", но я хочу, чтобы там было как минимум два видеофайла. Теперь, как вы можете видеть здесь, я попытался использовать идентификаторы для источников (как было предложено в ответе на вопрос здесь по stackoverflow), но я не смог заставить это работать.

Мы смогли получить все исходники с этим небольшим кусочком кода здесь: 

var x = document.getElementById("vd1");

var items = x.getElementsByTagName("source");

for(var i= 0; i < items.length; i++){
    alert(items[i].getAttribute('src'));
}
}, false);

Но я также не смог использовать его, чтобы изменить мои источники. Я думал, что смогу использовать "items [i] .src = ..." или использовать setAttribute, но я не могу заставить что-либо работать.

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

Обновление: В конце концов мы придумали это решение, которое довольно простое и понятное 

var videoPlaying = vd1.currentSrc;
var ext = videoPlaying.substr(videoPlaying.lastIndexOf("."));
vd1.src = "jerryclips/Bild02"+ext;

1 Ответ

4 голосов
/ 19 апреля 2011

Я думаю, что вы слишком усложняете вещи - нет необходимости обновлять несколько источников, так как любой браузер будет воспроизводить только одно из ваших видео.Если вы загружаете новые источники с помощью JavaScript, вы можете просто запросить currentSrc свойство vd1, определить, какое из видео воспроизводится, и загрузить новое видео в этом формате.В этот момент я просто удалил бы все элементы source и установил бы video.src в новое значение.

...