비디오 소스를 javascript/jquery로 변경하십시오.

해결책을 찾았습니다. 아래 1 번과 2 번 편집을 확인하십시오.비디오 소스를 javascript/jquery로 변경하십시오.

이 문제에 관해 많은 질문을 읽었지 만 대부분의 답변에서 "새 비디오를로드했는지 확인하십시오"라고 대답합니다. 아래 코드를 볼 수 있습니다.

이 예제에서 수행하려고하는 것은 일종의 색이 지정된 배경 ("bg"div)이 있고 클릭했을 때 비디오를 맨 위에 표시하려고합니다. 궁극적으로 이것으로 달성하고자하는 것은 페이지에 여러 개의 이미지가 있으며 클릭 한 이미지에 따라 모든 부분 위에 비디오를 오버레이하고 싶습니다. 나는 HTML과 js의 멍청한 놈이다. 그래서 아마 나는 명백한 것을 볼 수 없을 것이다.

다음은 빨간색 500x500 배경을 만들기 위해 test1.mp4를로드하는 코드입니다. 잘 작동합니다. 빨간색 BG가 클릭하면

<!DOCTYPE html> 
<html> 
<head> 

<style> 
#video{ 
    z-index:1; 
} 
#bg { 
    position:absolute; 
    z-index:-1; 
} 
</style> 
</head> 

<body> 
<div id="bg" style="background-color:#900;height:500px;width:500px;" ></div> 
<div> 
    <video id="video" width="480" controls> 
    <source id="vidSrc" src="C:\Users\Biller\test videos\test1.mp4"; type="video/mp4"> 
    Your browser does not support the video tag. 
    </video> 
//the below script creates pause-play controls when I click on the video 
    <script> 
    var myVideo=document.getElementById("video"); 
    myVideo.addEventListener('click',function(){ 
    if (myVideo.paused) 
    myVideo.play(); 
    else 
    myVideo.pause(); 
    }); 
    </script> 
</div> 

<script src="jquery-1.11.0.min.js"></script> 
<script src="myJQuery.js"> </script> 

</body> 
</html>

는 내가 비디오를 변경하려면이 JQuery와 스크립트 (myJQuery.js)를 사용 :

$(document).ready(function() { 

    $("#bg").click(function(){ 
    $("#vidSrc").attr("src","C:\Users\Biller\test videos\test2.mp4"); 
    $("#video")[0].load(); 
    }); 

});

나는 BG 비디오 변경하지만 새로운 비디오 프로그램을 클릭하면 지속 시간이 0:00이고 컨트롤이 작동하지 않습니다. 이 기능을 작동 시키면 비디오를 숨기고 숨김을 취소하고 이에 따라 src URL을 변경합니다. 나는 약간 통찰력을 평가할 것입니다.

편집 - 문제가 발견되었지만 왜 그런 일이 일어나는 지 알 수 없습니다. html 디렉토리에서 (이 경우 'test2.mp4'로) 변경하려는 비디오를 넣으면 잘됩니다. 그러나 그것이 다른 곳이라면 그것이 작동하지 않습니다. 마치 길을 더 이상 인식 할 수없는 것처럼. 그게 어떤 아이디어일까요?

edit2- 좋아, 나는 그것이 백 슬래시 "\"와 관련이 있다는 것을 알았다. 필자가 파일 경로에서 "/"로 바꾸면 작동했습니다. 그래도 원본 HTML에있는 경우 "\"가 올바르게 작동합니다 (즉, src = "C : \ users ...와 같은 동영상 태그에있는 경우).

출처

2014-02-09 Billakosama

이 게시물의 상태는 solution입니다. 너와 같은 문제 야.

http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag

행운을 빕니다!

출처

2014-02-09 08:53:34

하지만 그가 설명하는 문제는 내 PC에는 나타나지 않습니다. 로드 기능은 그가 제공 한 링크에서 잘 작동합니다. - 나는 크롬 btw를 사용하고있다. – Billakosama

비디오 소스를 javascript/jquery로 변경하십시오.

답변

관련 문제