jQuery를 사용하여 비디오 요소를 시작합니다. 일반 컨트롤

Question

내 사이트에 poster 속성의 html5 video 요소가 있습니다. 다음 작업을 수행하는 jQuery 함수가 있습니다.

$('video').click(function(){ 
    $(this).get(0).play(); 
}); 

잘 작동합니다. 포스터를 클릭하면 비디오 재생이 시작됩니다. 그러나 삽입 된 비디오의 컨트롤에서 재생 버튼을 클릭하면 포스터가 작동하지만 비디오가 재생되지 않습니다. jQuery 클릭 포스터 - 시작 기능을 주석 처리하면 컨트롤이 작동합니다.

둘 다 어떻게 작동합니까? 이 ocures 이유

감사

Answer 1

는 나도 몰라,하지만 어쩌면 이것은 당신을위한 다른 옵션입니다.

장소 비디오 태그 아래 사업부 : 절대에

<video id="video" controls="controls"> 
<source src="../video/IMG_0699.mp4.mp4" type="video/mp4" /> 
<source src="../video/IMG_0699.webmhd.webm" type="video/webm" /> 
<source src="../video/IMG_0699.oggtheora.ogv" type="video/ogv" /> 
Your browser does not support the video tag. 
</video> 
<div id="poster"></div> 

설정 위치 :

#poster 
{ 
    position: absolute; 
    width: 320px; 
    height: 213px; 
    border: 2px solid #000000; 
    margin-left: 10px; 
} 
#video 
{ 
    position: absolute; 
width: 320px; 
height: 251px; 
    margin-left: 10px; 
} 

및 JQuery와

$(document).ready(function() { 
controlVideo(); 
function controlVideo(){ 
    $('#poster').click(function() { 
     $('#video').get(0).play(); 
     $(this).click(function() { 
      $('#video').get(0).pause(); 
      controlVideo(); 
     }); 
    }); 
} 
}); 

내가 당신을 도와 희망을 추가 할 수 있습니다. 그것은 나를 위해 잘 작동합니다. 물론 페이지 높이, 너비 및 위치를 설정해야합니다.