jQuery 및 HTML5 비디오 - 소스 변경 onClick

Question

HTML5 및 jQuery를 사용하여 대화 형 비디오를 만들어야합니다. 내 목표는하는 것입니다

1. 이 video1 끝이 button1 보여줄 때 video1
2. 이 onClickvideo2로 변경하고 button1
3. 숨길 video2
4. On Ended 보여 플레이 button 2, OnClick 변화 video 3-
5. 등 에 ...

내 질문에 내가 뭘 잘못하고 있니? 이것은 내 코드입니다.

<section> 
<video autoplay="autoplay" controls="controls" onended="testEnded()"> 
    <source id="srcWebm" src="media/Madagascar.webm"/> 
</video> 
</section> 

<section id="buttons" class="btnShow"> 
    <ul id="buttons2" hidden> 
     <li><a href="#" id="choice1" onclick="changeSrc1()">VW</a></li> 

    </ul> 
</section> 

함수는 testEnded() (HTML로 적절히 링크 된) 외부 시트이다. 다음과 같이 스크립트입니다 : 내가 실행하면

function changeSrc1() { 
    $('#srcWebm').attr('src','media/VW.webm'); 

} 

function testEnded() { 
     $('#buttons2').removeAttr('hidden'); 
    } 

는 changeSrc1() 아무 반응이 없습니다. 내가 코드를 linting 시도 - 아무런 오류가 ...

어떻게해야합니까? 감사합니다.

Answer 1

해결책을 찾았습니다. 분명히 jQuery는 <source>의 'src'특성 변경을 지원하지 않습니다. 곤충? <video> -tag에서 모든 아이들을 삭제하고 당신은 내가 뭔가 유사한 작업하게 관리해야

Answer 2

그러나

<video id="video" autoplay="autoplay" controls="controls"> 
<source id="srcWebm" src="media/Madagascar.webm"/> 
</video> 

var video = document.getElementById("video"); 
video.src = "your link here"; 

이있다 현재 IE9에서 나에게 이슈를 제시하고있다.

Answer 3

<video> 노드에 삽입 새로운 <source> 요소를 만드는 것보다

Answer 4

이 플러그인을 확인하면 유용 할 수있는 몇 가지 속성이 있습니다.

다운로드 플러그인

http://videojs.com/

API 참조

http://videojs.com/docs/api/

내가 당신을 도움이되기를 바랍니다.