HTML5 동영상 - 여러 소스 변경

Question

Google에서이 문제와 관련하여 여러 사이트를 찾았으며 이에 대한 몇 가지 질문을 발견했습니다. 이는 분명히 답변되었지만 지난 1 ~ 2 주 동안 그냥 전혀 작동하지 않는 것 같아서, 나는 이것을 다시보고 싶었다.

저는 몇 개의 캔버스 태그 (cv1-3)에서 사용되는 여러 비디오 태그 (vd1-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 = '...'"라는 것을 기억하는 한 작동했지만 적어도 두 개의 비디오 파일을 갖고 싶습니다. 자, 여기에서 볼 수 있듯이 id는 소스를 사용하여 (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; 

Answer 1

간단이 솔루션을 함께했다 귀하의 동영상 중 하나를 재생할 것입니다. JavaScript로 새 소스를로드하는 경우 속성을 vd1으로 간단하게 쿼리하여 재생중인 동영상을 결정하고 해당 형식으로 새 동영상을로드 할 수 있습니다. 이 시점에서 나는 모든 source 요소를 제거하고 video.src을 새 값으로 설정하기 만하면됩니다.