仅当视频播放时使用视频控件（html5）

我正在使用视频元素在我的网站上显示视频。我使用海报属性来显示带有一些文字和播放按钮的图像。使用Javascript，我定义了如果你点击视频元素/海报，视频就开始了。现在，我只想播放视频时只显示视频（播放/暂停按钮，声音，全屏）控件，因此您可以暂停视频或调整音量。我添加了控件属性，但现在它还显示不播放视频的控件。仅当视频播放时使用视频控件（html5）

<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来解决这个问题吗？

来源

2016-04-15 Maarten

我知道这是问了一段时间后，但我想看看是否有人有一个很好的解决方案，这是空的，所以认为我分享我的。

要回答你的问题;是的，你可以用Javascript或CSS来解决这个问题。

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

https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute

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

测试

铬（56）：工程，控制淡入并很快淡出，再次显示当鼠标移动视频
火狐（52）：作品，控制不显示直到鼠标上的视频移动
Safari浏览器（10）：工程，控制，直到鼠标移动保持可见视频
边缘之外：没有测试:(

来源

2017-03-08 18:20:40

是的，完整的解决方案是这样的：

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" width="300" height="150" 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/

来源

2017-03-08 19:28:22 l33tstealth

仅当视频播放时使用视频控件（html5）

回答

相关问题