为 HTML 5 播放器的标准控件添加点击功能答案

【问题标题】：Add click function to standard controls of HTML 5 player为 HTML 5 播放器的标准控件添加点击功能
【发布时间】：2014-08-08 14:22:07
【问题描述】：

我有一个带有自定义播放按钮的视频。

                    <div class="play_btn" ></div>
                    <video class="video">
                    <source src="myvideo.mov" type="video/mp4"></video>

通过以下脚本，我更改了播放/暂停按钮的背景

    $('.play_btn').click(function(e) {
    if ($('.video').get(0).paused){ 
        $('.video').get(0).play();
        $('.play_btn').css({'background':'none'});
    }
    else {
        $('.video:visible').get(0).pause();
        $('.play_btn').css({'background':'url(play.jpg)'});
    }
});

到目前为止效果很好。我现在的问题是，HTML5 播放器有自己的控件。如果我点击那里的播放按钮，我的图像不会改变。我不知道如何给标准控件一个点击事件。

我也尝试过类似的操作：如果视频正在播放/暂停，则更改背景，但没有成功。

有什么建议吗？非常感谢您的帮助！

【问题讨论】：

从您的问题来看，您似乎正在使用视频播放器框架。你是？哪一个？

标签： html5-video

【解决方案1】：

不要在点击处理程序逻辑中显示/隐藏播放按钮，而是使用 HTML5 媒体事件。这样，如果有其他东西播放/暂停视频，您的按钮仍会做出反应。

// in click handler simply play/pause the video
$('.play_btn').click(function(e) {
    if ($('.video').get(0).paused){ 
        $('.video').get(0).play();
    }
    else {
        $('.video:visible').get(0).pause();
    }
});

//on the video playing hide the play button
$('.video').get(0).bind('play', function(e){
    $('.play_btn').css({'background':'none'});
});

//on the video pausing show the play button
$('.video').get(0).bind('pause', function(e){
    $('.play_btn').css({'background':'url(play.jpg)'});
});

您确实应该使用 ID 来引用您的视频标签，因为这样会更快，并使您的代码更简单。

// in click handler simply play/pause the video
$('.play_btn').click(function(e) {
    if ($('#myVideo').paused){ 
        $('#myVideo').play();
    }
    else {
        $('#myVideo').pause();
    }
});

//on the video playing hide the play button
$('#myVideo').bind('play', function(e){
    $('.play_btn').css({'background':'none'});
});

//on the video pausing show the play button
$('#myVideo').bind('pause', function(e){
    $('.play_btn').css({'background':'url(play.jpg)'});
});

【讨论】：