동적으로 HTML5 비디오를 대체하는 방법 src

Question

동적으로 페이지에로드하려는 여러 비디오가있는 프로젝트가 있습니다. 내 HTML은 매우 단순한 단일 비디오 태그입니다.

<video controls preload width="520" height="350" id="video"> 
<source src="videos/video0.mp4" type="video/mp4" id="video_source"> 
</video> 

<div id="playlist"> 
    <a href="videos/video1.mp4">Video File Tomorrow</a> 
    <a href="videos/video2.mp4">Video File Tomorrow</a>    
</div> 

이 프로젝트는 Safari에서만 작동해야하기 때문에 MP4 파일 만 사용합니다. 나는 2 개 JS 솔루션을 시도하고 모두 별도의 문제

JS 소스 태그의 src 속성을 업데이트하지만 비디오를로드하지 않습니다이 버전에서 해결 방법 1

$("#playlist a").click(function(){ 
    var video_source_link=$(this).attr("href"); 
    document.getElementById("video_source").setAttribute("src",video_source_link); 
    document.getElementById("video").load(); 
    document.getElementById("video").play(); 
    return false; 
}); 

를 생성하는 것 같다. 내가 사파리에 문제가있어서 프로그램을해야합니다 WebKit2WebProcess.exe 다음과 같은 오류와 충돌 뒤로 버튼을 클릭하면

이 버전에서 해결 방법 2

$("#playlist a").click(function(){ 
     var video_source_link=$(this).attr("href"); 
     document.getElementById("video_source").setAttribute("src",video_source_link); 
     document.getElementById("video_source").load(); 
     document.getElementById("video_source").play(); 
     return false; 
}); 

빈 창에 비디오로드 닫습니다

Answer 1

내부 자식 소스 태그 대신 비디오 태그를 변경해보십시오 :

$("#video")[0].src = $(this).attr("href");

Answer 2

첫째, CHEC을 너 video_source_link. video_source_link이 맞으면 document.getElementById("video").play();을 삭제하는 것이 좋습니다. 또는 비디오 태그에 controls preload을 삭제하는 방법 은요? 그리고 다음 코드는 저에게 도움이됩니다.

HTML

<video width="320" height="240" autoplay> 
    <source id="video_path" src="" type="video/mp4"> 
</video> 

JS

$('#video_path').attr('src', 'path'); 
$('video').load();