javascript - 仅在视频播放时进行视频控制 (html5)

Question

我正在使用视频元素在我的网站上显示视频。我使用海报属性来显示带有一些文本和播放按钮的图像。我使用 Javascript 定义，如果您单击视频元素/海报，视频就会开始。现在我希望视频的控件(播放/暂停按钮、声音、全屏)仅在播放视频时显示，以便您可以暂停视频或调整音量。我添加了控件属性，但现在它在视频未播放时也显示控件。

<video id="video" class="width-100 display-none borderRadius-l breakPointM-display-inline video" poster="splashvideo.png" preload="auto" controls  width="300" height="150">
<source src="video.mp4" type="video/mp4" />
</video>

我可以用一些 javascript 或 css 解决这个问题吗？

Answer 1

我知道很久以前就有人问过这个问题，但我想看看是否有人对此有一个很好的解决方案，但结果是空的，所以我想分享我的。

回答您的问题；是的，您可以使用 Javascript 或 CSS 修复此问题。

我想出的解决方案是使用 Javascript 在单击视频时添加控件属性。因此，就像使用 JS 处理播放和暂停的点击事件一样，您只需同时添加或删除属性“controls”即可。

https://developer.mozilla.org/en/docs/Web/API/Element/setAttributeel.setAttribute('controls','');

https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttributeel.removeAttribute('controls');

测试

• Chrome (56):可以正常工作，控件会快速淡入和淡出，当鼠标在视频上移动时再次显示
• Firefox (52):可以正常工作，直到鼠标在视频上移动后控件才会显示
• Safari (10):有效，控件保持可见，直到鼠标移出视频
• 边缘:未测试:(