비디오 시퀀스를 오디오와 동기화하는 방법

Question

나는 일련의 비디오와 오디오 파일을 가지고 있습니다. 오디오 파일 탐색기 컨트롤에서 비디오 파일의 인덱스를 제어하고 싶습니다.

나는 같은 것을 할 수 있도록하고 싶습니다 :

<video mediagroup='test'> 
    <source src='video1.webm' type='video/webm'> // 10secs 
    <source src='video2.webm' type='video/webm'> // 10secs 
    <source src='video3.webm' type='video/webm'> // 10secs 
</video> 
<audio controls='controls' mediagroup='test'> 
    <source src='audio.ogg' type='audio/ogg'> // 30secs 
</audio> 

을 나는 오디오의 21sec로 문질러합니다. 비디오는 1 초의 비디오 3로 스크럽되어야하며 재생 가능해야합니다.

html5 audio/video 속성 mediagroup은 this kind of syncing을 제공하지만 비디오 파일 순서로 어떻게합니까?

내가 자바 스크립트로 이것을 할 수 있다고 생각하지만, 혹시 html로 이것을 수행 할 수있는 방법이 있는지 아는 사람이 있습니까?

Answer 1

당신이하려는 일이 mediagroup 또는 자바가없는 HTML로 가능하다고 생각하지 않습니다. mediagroup은 시간 오프셋을 지원하지 않는 것으로 보입니다. 모든 미디어 요소는 동일한 currentTime 값을 공유해야합니다. 또한 not yet supported in Firefox입니다.

자바 스크립트 구현을 시도하려면 Popcorn Inception으로 시작하여 example을 살펴 보는 것이 좋습니다. 그것은 하나의 마스터 요소에 여러 미디어 (오디오 또는 비디오) 요소를 동기화하고, 이미 처리 된 일시 정지, 재생 및 검색을 처리합니다. (앞으로 몇 주 안에 몇 가지 버그를 수정해야 할 것입니다.)

<source> 요소의 사용이 올바르지 않습니다. 비디오 (또는 오디오) 요소는 브라우저가 나열된 파일 중 하나 이상을 재생할 수없는 경우 나열된 여러 소스를 가질 수 있습니다. 목록의 다른 파일로 폴백 할 수 있습니다. 참조 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source