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

首先，我有多个具有相同课程的视频，里面有一个带有图像背景的按钮。当点击按钮和视频本身时，所有这些都在工作，当视频播放时，按钮会隐藏在中心的按钮。但我真正想要的是检测＆＃34;播放按钮＆＃34;点击＆＃34;视频栏＆＃34;在视频的底部。因为当我点击视频栏内的播放按钮时，中心的按钮不会隐藏。我希望你们能理解我想说的话。提前谢谢。

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

Answer 1

您需要拦截HTML5的播放/暂停/停止等事件＆lt; video＆gt;因此，元素和隐藏/显示中间的播放按钮。

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

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

1 个答案: