jQuery - 如何在点击时检测视频栏播放按钮而不是视频本身
jQuery -How to detect video bar play button on click and not the video itself
这是我的 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;
});
});
首先,我有多个具有相同 类 的视频,并且其中有一个按钮,中间有图像背景。当单击按钮和视频本身时,所有这些都在工作,这在视频播放时将按钮隐藏在中心。但我真正想要的是检测视频底部 "video bar" 内的 "play button" onclick。因为当我点击视频栏内的播放按钮时,中间的按钮并没有隐藏。我希望你们能明白我想说什么。提前谢谢你。
您需要拦截 HTML5
$('video').bind('play', function (e) {
// Hide Middle Play button
});
这是我的 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;
});
});
首先,我有多个具有相同 类 的视频,并且其中有一个按钮,中间有图像背景。当单击按钮和视频本身时,所有这些都在工作,这在视频播放时将按钮隐藏在中心。但我真正想要的是检测视频底部 "video bar" 内的 "play button" onclick。因为当我点击视频栏内的播放按钮时,中间的按钮并没有隐藏。我希望你们能明白我想说什么。提前谢谢你。
您需要拦截 HTML5
$('video').bind('play', function (e) {
// Hide Middle Play button
});