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

首先,我有多个具有相同课程的视频,里面有带图像背景的按钮.当点击按钮和视频本身时,所有这些都在工作,当视频播放时,按钮会隐藏在中心的按钮.但我真正想要的是在视频底部的"视频栏"内点击"播放按钮".因为当我单击视频栏内的播放按钮时,中心的按钮不会隐藏.我希望你们能理解我想说的话.先感谢您.

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

Answer 1

您需要拦截HTML5 <video>元素的播放/暂停/停止等事件并相应地隐藏/显示播放按钮.

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