Question

我有一个jQuery点击功能设置来播放/暂停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>

Answer 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

HTML5视频＆amp; jQuery：在点击时显示/隐藏控件

1 个答案: