使用jQuery啓動視頻元素中斷正常控件

Question

我在我的網站上有一個html5 video元素和poster屬性。我有一個jQuery函數，執行以下操作。

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

這工作正常：如果我點擊海報視頻開始播放。但是，如果我點擊嵌入式視頻控件中的播放按鈕，海報會走路，但視頻不會開始播放。如果我註釋掉jQuery的click-poster-to-start函數，控件就可以工作。

我該如何同時工作？

感謝

Answer 1

我不知道爲什麼它ocures，但也許這是你的一個替代選擇。

地方的視頻標籤下一個div：

<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(); 
     }); 
    }); 
} 
}); 

我希望它幫你。這對我來說可以。當然，你必須根據你的頁面設置高度，寬度和位置。