Question

I'm using the video element to show a video on my website. I used the poster attribute to show an image with some text and a play button on it. With Javascript I defined that if you click on the video element/poster, the video starts. Now i want the controls of the video (play/pause-button, sound, full-screen) only shown when the video is played, so you can pause the video or adjust the volume. I added the controls attribute but now it also show the controls when the video is not played.

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

Can i fix this with some javascript or css?

Answer 1

我知道这已被问了很久，但是我想知道是否有人对此有了一个很好的解决方案，因为我认为我分享了它。

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

我提出的解决方案是在点击视频时使用Javascript添加controls属性。因此，使用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）：工作，控件在鼠标移出视频之前保持可见
边缘：没有测试:(

Answer 2

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

HTML：使用onclick =＆＃34; this.play＆＃34;点击海报时播放视频。

<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/

Video controls only when video plays (html5)

2 个答案: