始终显示视频控件

Question

有没有办法始终在HTML5视频标签中显示视频控件而不是仅在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

>

Answer 1

2017年11月更新：请注意，由于Safari 11中的新更改，此浏览器不再有效。如果我找到方法，我会更新帖子。

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

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

假设视频元素的id称为“播放器”，javascript代码将如下所示：

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/

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

这样的CSS看起来像这样：

CSS：

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

工作示例（仅适用于基于webkit的浏览器）：qazxsw poi