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

我有一个jQuery点击功能设置为播放/暂停HTML5视频，我想知道如何去显示/隐藏控件。因此，我想初步隐藏控件 - 即当海报图形正在显示时 - 然后在点击视频时播放它们（并在点击视频时暂停播放）。HTML5视频和jQuery：点击时显示/隐藏控件

我有一个小提琴设置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>

来源

2014-09-28 nickpish

这是因为内置的媒体控制的行为方式比看起来应该是有点麻烦。第一个挑战是你无法知道用户是否在积极地与控件进行交互。因此，如果您在用户点击任何时候隐藏了控件，那么当他们正在寻找或调整音量时，就会将其隐藏起来。所以我建议你点击时没有视频暂停，但你仍然可以点击播放。

第二个挑战是视频暂停并在用户寻找控件时触发'暂停'事件。所以你必须在鼠标按键没有关闭时才移除控件。以下是它的样子。

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

来源

2014-09-28 19:48:39 brianchirls

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

回答

相关问题