Javascript 需要在悬停或播放时显示HTML5视频控件

我想在一个页面上隐藏多个HTML5视频的控件。如果用户将鼠标悬停在视频上，则应显示控件。如果单击播放按钮，则即使鼠标离开视频元素，控件也应保持可见

我似乎无法使用以下代码使其工作。有人能发现问题吗

var$video=$（'.video'）；
$video.on（'mouseover'，show）；
$video.on（'mouseleave'，hide）；
函数show（）{
$（this.attr（'controls'，''）；
}
函数hide（）{
var显示=假；
this.onplaying=函数（）{
isplay=true；
}
如果（！显示）{
$（this.removeAttr（'controls'）；
}
}

无论您在

onplaying

处理程序上设置了什么，每次执行

show（）

时，您仍然将

isPlaying

设置为false，因此它将始终删除控件。试着改变一下你的逻辑。类似于视频停止、暂停或以其他方式更改状态时的句柄。使用这些更改显示控件时的逻辑。

检查此代码。它能根据你的要求工作。使用

$（'.video'）.get（0）。在
if
条件中暂停
函数，以设置
isplay=True


var$video=$（'.video'）；
$video.on（'mouseover'，show）；
$video.on（'mouseleave'，hide）；
函数show（）{
$（this.attr（'controls'，''）；
}
函数hide（）{
var显示=假；
如果（！$（'.video'）。获取（0）。暂停）{
isplay=true；
}
如果（！显示）{
$（this.removeAttr（'controls'）；
}
}
我们无法真正控制这种行为，因为它是由浏览器内部管理的。我们所能做的就是指定
控件
属性，其余的由浏览器来完成

例如：在Firefox（编写时为v59b）中，当播放视频时，即使设置了
控件
属性，当鼠标位于元素外部时，控件也会淡出-如果不播放，它们会显示，这与您所追求的正好相反。当用户将鼠标移到视频元素外时，无法强制控件保持可见

正确处理这种跨浏览器和精确期望行为的唯一方法是为播放器构建自定义控件UI。这当然意味着需要更多的代码来处理各种事件，以便您可以更新和管理UI；对于特定于平台/浏览器的外观，这可能也是一个挑战。但另一方面，它会给你粮食控制

另一种方法是查看一些将视频元素包装到自定义UI控件中的库，看看它们是否允许您强制控件在给定条件下保持可见。请参见示例作为起点

一个小但不完整的示例（根据需要添加功能、事件处理程序和设计）：


var$container=$（“#video1”）；
var$video=$container.children（“视频”），video=$video[0]
var$controls=$container.children（“.controls”）；
var$play=$controls.children（“按钮”）；
//控制可见性
$container.on（“mouseover mouseout”，函数（e）{
$controls.css（“display”，e.type==“mouseout”和&video.paused？“none”：“block”）；
});
//播放或暂停
$play.on（“单击”，切换）；
$video.on（“单击”，切换）；
函数切换（）{
视频[video.pause？“播放”：“pause”]（）；
}
//todo:覆盖更多事件（搜索、错误等）
$video.on（“播放暂停结束”，更新）；
//更新控件UI元素（todo:更新时间/进度等）
函数updateUI（）{
$play.text（video.Pause？“play”：“Pause”）
}
.container{
位置：相对位置；
显示：内联块；
字号：0；
}
.container>控件{
位置：绝对位置；
底部：0；
宽度：100%；
背景：rgba（255255,0.3）；
填充：7px；
框大小：内容框；
z指数：10000；
}

玩
更新-唯一的跨浏览器解决方案是自定义控件
在悬停和播放时可以看到Chrome和Firefox控件。作为一个额外的奖励，它反应灵敏。注意：如果您想看到Firefox和Chrome在全屏上正常运行，请参阅Plunker属性
controls
is boolean：

// by id video.
document.getElementById("video1").controls = true; //show
document.getElementById("video1").controls = false; //hide.

//or all video by tag name:
document.getElementsByTagName("video").controls = true; //show
document.getElementsByTagName("video").controls = false; //hide.

我希望这会有所帮助。
在任何基于webkit的浏览器中，您都可以很容易地做到这一点。下面是一个内联js的自包含示例，包括对键盘访问的支持

在游戏中保持控制打开是最棘手的方面。它需要CSS伪选择器或访问媒体播放器的阴影dom。如果您需要支持Firefox，您可能需要研究阴影dom的样式（或创建自定义控件）


视频[控制]：-webkit媒体控制面板{
显示：flex！重要；
不透明度：1！重要；
}
/*不需要*/
录像带{
宽度：15em；
高度：自动；
}
/*/不需要*/

退房


视频[控制]：-webkit媒体控制面板{
显示：flex！重要；
透明度：1！重要
}
变量$video=$（“.video”）；
$video.on（“鼠标悬停”，函数（）{
this.dataset.over=true；
this.controls=true；
}),
$video.on（“mouseout”，function（））{
this.dataset.over=false；
如果（这个暂停）
此参数=假；
})

视频：：-webkit媒体控件{
不透明度：0
}
视频：：-webkit媒体控件：悬停{
不透明度：1
}
谢谢您的帮助。我尝试了你的代码，得到错误
未捕获类型错误：无法读取未定义的属性“暂停”
。我将
if（！$（'.video'）.get（0）.暂停）{
更改为
if（！$（this.get（0）.暂停）{
，错误消失了，但播放视频时mouseleave上的控件仍在消失。有什么想法吗？嗯，我无法播放，因为找不到视频。我刚刚编辑了你的答案并添加了一个开源MP4。请尝试p
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video class=video>

    <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>

<style>

    video[controls]::-webkit-media-controls-panel {
        display:flex!important;
        opacity:1!important
    }
</style>

<script>

    var $video=$(".video");
    $video.on("mouseover",function() {
        this.dataset.over = true;
        this.controls = true;
    }),
    $video.on("mouseout",function() {
        this.dataset.over = false;
        if (this.paused)
            this.controls = false;
    })
</script>