我正在使用视频元素在我的网站上显示视频。我使用海报属性来显示带有一些文本和播放按钮的图像。我使用 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 解决这个问题吗？
最佳答案
我知道很久以前就有人问过这个问题，但我想看看是否有人对此有一个很好的解决方案，但结果是空的，所以我想分享我的。
回答您的问题；是的，您可以使用 Javascript 或 CSS 修复此问题。
我想出的解决方案是使用 Javascript 在单击视频时添加控件属性。因此，就像使用 JS 处理播放和暂停的点击事件一样，您只需同时添加或删除属性“controls”即可。
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute
el.setAttribute('controls','');
https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute
el.removeAttribute('controls');
测试
- Chrome (56):可以正常工作，控件会快速淡入和淡出，当鼠标在视频上移动时再次显示
- Firefox (52):可以正常工作，直到鼠标在视频上移动后控件才会显示
- Safari (10):有效，控件保持可见，直到鼠标移出视频
- 边缘:未测试:(
关于javascript - 仅在视频播放时进行视频控制 (html5)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36650551/