始终显示视频控件 [英] Always showing video controls

问题描述

是否有一种方法可以始终在HTML5视频代码中显示视频控件，而不仅仅是在MouseOver上显示它们?

Is there a way to Always show the video controls in the HTML5 video tag instead of just showing them on MouseOver?

视频代码:

<table cellpadding="0" cellspacing="0">
  <tr>
    <td runat="server" width="680px" height="383px" id="vContainer">
      <div style="z-index: 1;" runat="server" id="cont">
        <div runat="server" style="background: rgba(200, 200, 200, 0.6) url('/images/Play.png') no-repeat center center;" id="img">
        </div>
        <video id="player" style="z-index: 1; border: 1px solid #000000;" width="100%" height="100% "
          title="" controls runat="server">
          <source runat="server" id="ffVideo" type="video/ogg" />
          <source runat="server" id="mp4Video" type="video/mp4" />
        </video>
        <embed id="playerOld" width="680px" height="383px" autostart="false" allowfullscreen="true"
          title="" style="display: none" type="application/mp4" runat="server" />
      </div>
    </td>
  </tr>
</table

>

推荐答案

2017年11月更新:请注意，由于Safari 11的新更改，该浏览器不再可用.如果有办法，我将更新帖子.

Update November 2017: Please note due to new changes in Safari 11, this is no longer working in that browser. I will update the post if I find a way.

即使隐藏控件是HTML5视频规范的一部分.有两种方法可以通过javascript来实现，而另一种可以通过CSS来实现.

Even though hiding controls is part of the HTML5 video spec. There are two ways to accomplish this one via javascript and the other via CSS.

在Javascript中，您可以为timeupdate事件添加事件处理程序，该事件处理程序会在每次播放位置更改时发生更改，换句话说，该事件始终在播放视频时发生.

In Javascript, you can add an event handler for the timeupdate event which changes every time the play position has changed, in other words, the event is always occurring while the video is playing.

假设视频元素的ID被称为播放器"，则JavaScript代码如下所示:

Assuming the id for the video element is called 'player', javascript code would look like this:

JS:

//assign video element to variable vid
var vid = document.getElementById("player");

function videoTimeUpdate(e)
{
    //set controls settings to controls,this make controls show everytime this event is triggered
    vid.setAttribute("controls","controls");
}

//add event listener to video for timeupdate event
vid.addEventListener('timeupdate', videoTimeUpdate, false);

上面的工作示例在这里: https://jsfiddle.net/l33tstealth/t082bjnf/6 /

Working sample of the above is here: https://jsfiddle.net/l33tstealth/t082bjnf/6/

第二种方法是通过CSS，但这仅适用于基于WebKit的浏览器，因此受到限制.您可以强制控制栏始终显示.

The second way to do this is through CSS but this will only work for WebKit based browsers, thus limited. You can force the controls bar to always show.

该CSS如下所示:

CSS:

video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

工作示例(仅在基于Web套件的浏览器中有效): https://jsfiddle.net/l33tstealth/t082bjnf/7/

Working sample (only works in web kit based browsers): https://jsfiddle.net/l33tstealth/t082bjnf/7/

这篇关于始终显示视频控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！