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

Posted 2023-05-07

【中文标题】仅在视频播放时进行视频控制 (html5)

【英文标题】：Video controls only when video plays (html5)

【发布时间】：2016-08-07 15:03:38

【问题描述】：

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

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

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

【参考方案1】：

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

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

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

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)：

有效，控件保持可见，直到鼠标移出视频

Edge:

没有测试:(

【参考方案2】：

是的，完整的解决方案如下所示：

html: 使用 onclick="this.play" 单击海报时播放视频。

<video id="video1" class="width-100 display-none borderRadius-l breakPointM-display-inline video" 
poster="https://placehold.it/350x150" preload="auto"   onclick="this.play()">
<source src="video.mp4" type="video/mp4" />
</video>

JS 代码： 添加用于播放和暂停的事件监听器，如果暂停则删除控件，播放时带回控件。

var video1 = document.getElementById('video1');

function videoPausePlayHandler(e) 
    if (e.type == 'playing') 
     //add controls
     video1.setAttribute("controls","controls");
     else if (e.type == 'pause') 
   //remove controls
   video1.removeAttribute("controls");
    


//Add event listeners
video1.addEventListener('playing', videoPausePlayHandler, false);
video1.addEventListener('pause', videoPausePlayHandler, false);

你可以在这里看到它的工作原理：https://jsfiddle.net/pypgjt4r/