HTML5 视频和 jQuery：点击时显示/隐藏控件答案

【问题标题】：HTML5 video & jQuery: show/hide controls on clickHTML5 视频和 jQuery：点击时显示/隐藏控件
【发布时间】：2014-09-28 03:12:01
【问题描述】：

我设置了一个 jQuery click 函数来播放/暂停 HTML5 视频，我想知道如何同时显示/隐藏控件。因此，我想最初隐藏控件 - 即显示海报图形时 - 然后在单击视频播放时显示它们（并且在单击视频暂停时再次隐藏它们。）

我设置了一个小提琴here。

非常感谢您的帮助。

$("video#click").click(function(){
    this.paused?this.play():this.pause();
    return false;
});

#click {
   max-width: 500px;
   height: auto;
   cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<video preload="auto" id="click">
    <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
</video>

【问题讨论】：

标签： jquery html5-video

【解决方案1】：

由于内置媒体控件的行为方式，这比看起来应该的要复杂一些。第一个挑战是您无法知道用户是否在积极地与控件交互。因此，如果您在用户单击时隐藏控件，那么您将在他们寻找或调整音量时隐藏它们。所以我建议你不要让视频在点击时暂停，但你仍然可以让它在点击时播放。

第二个挑战是当用户使用控件进行搜索时，视频会暂停并触发“暂停”事件。因此，您必须仅在鼠标按钮未按下时删除控件。这就是它的样子。

var $video = $("#click"), //jquery-wrapped video element
    mousedown = false;

$video.click(function(){
    if (this.paused) {
        this.play();
        return false;
    }
    return true;
});

$video.on('mousedown', function () {
    mousedown = true;
});

$(window).on('mouseup', function () {
    mousedown = false;
});

$video.on('play', function () {
    $video.attr('controls', '');
});

$video.on('pause', function () {
    if (!mousedown) {
        $video.removeAttr('controls');
    }
});

您可能还希望对触摸事件执行相同的操作，并且您可能希望过滤以确保它只是鼠标左键。我将把它留给你。

这是一个工作示例的链接： http://jsbin.com/soyate/1/edit

【讨论】：