jQuery - 如何在点击时检测视频栏播放按钮而不是视频本身

Question

这是我的 html 代码:

<div class="video_container">
<button class="play">Play</button>              
<video controls poster="image.png">
<source src="video.mp4" />
<img alt="Img" src="image.png" title="Some Image" /></video>
</div>

jQuery:

jQuery(document).ready(function ($) {
  // Center Play Button Onclick 
  $('button.play').click(function () {
    var play_button = $(this);
    var video = $(this).parent().find('video').get(0);
       if (video.paused) {
          video.play();
          play_button.hide();         
       } else {
          video.pause();
          play_button.show();
       }
       return false;
    });

  // Video Onclick 
  $('video').click(function () {
    var play_button = $(this).parent().find('button.play');
    var video = $(this).get(0);
       if (video.paused ) {
          video.play();
          play_button.hide();   
       } else {
          video.pause();
          play_button.show();
       }
       return false;
  });
});

首先，我有多个具有相同类别的视频，并且其中有一个按钮，中间有图像背景。当单击按钮和视频本身时，所有这些都在工作，这在视频播放时将按钮隐藏在中心。但我真正想要的是检测视频底部“视频栏”内的“播放按钮”onclick。因为当我点击视频栏内的播放按钮时，中间的按钮并没有隐藏。我希望你们能明白我想说的话。提前谢谢你。

演示站点:http://test.stampsize.in/

Answer 1

您需要拦截 HTML5

$('video').bind('play', function (e) {
    // Hide Middle Play button
});