我正在尝试绑定play
/pause
and ended
使用 jQuery 的事件但有一个问题:
当我右键单击视频并选择播放或暂停时,图标会正确更改。当我单击播放按钮时,它会更改为暂停,但如果我单击暂停按钮继续播放视频,它不会更改为再次播放。
谁能告诉我哪里出错了?
这是我的代码:
var PlayVideo = function () {
if ($('#video').attr('paused') == false) {
$('#video').get(0).pause();
} else {
$('#video').get(0).play();
}
};
$('#playbtn').click(PlayVideo);
$('#video').click(PlayVideo);
$('#video').bind('play', function () {
$('.playbtn').addClass('pausebtn');
});
$('#video').bind('pause', function () {
$('.playbtn').removeClass('pausebtn');
});
$('#video').bind('ended', function () {
$('.playbtn').removeClass('pausebtn');
});
CSS:
.playbtn {
display: block;
width: 32px;
height: 32px;
margin-left: 10px;
background: url('../images/play.png') no-repeat;
opacity: 0.7;
-moz-transition: all 0.2s ease-in-out; /* Firefox */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-out; /* Opera */
transition: all 0.2s ease-in-out;
}
.pausebtn {
display: block;
width: 32px;
height: 32px;
margin-left: 10px;
background: url('../images/pause.png') no-repeat;
opacity: 0.7;
-moz-transition: all 0.2s ease-in-out; /* Firefox */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.2s ease-in-out; /* Opera */
transition: all 0.2s ease-in-out;
}
没有pause
- HTML5 视频的属性。相反,你应该看看媒体事件和属性 http://www.w3.org/2010/05/video/mediaevents.html.
在你的情况下,这意味着:
if (!$('#video')[0].paused) {
$('#video')[0].pause();
} else {
$('#video')[0].play();
}
顺便说一句:既然你打电话了$('#video')
通常,将其存储在变量中可能是个好主意 - 这样您就不必多次调用 jQuery 选择器。喜欢:
$video = $('#video'); //from now on just use $video instead of $('#video')
EDIT:关于您的评论,如果不看到您正在使用的控件(HTML 和 CSS),很难说清楚,但在任何情况下您可以做的是对触发相同行为的所有事件使用相同的处理程序(并且因为该行为是正确的)pause
它应该在ended
当绑定到同一个处理程序时也是如此)。另外,在您发布的代码中,您正在使用removeClass
结束(可能应该是addClass
)。所以这应该有效:
$('#video').bind('play ended', function () { //should trigger once on any play and ended event
$('.playbtn').addClass('pausebtn'); //might also be $('#playbtn') ???
});
$('#video').bind('pause', function () { //should trigger once on every pause event
$('.playbtn').removeClass('pausebtn'); //might also be $('#playbtn') ???
});
我注意到的另一个问题是你使用#playbtn
一次和.playbtn
下一次。当尝试使用播放按钮执行某些操作时,请确保您在这里引用的是相同的项目。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)