是否有一种方法可以始终在HTML5视频标签中显示视频控件,而不仅仅是在鼠标上方显示它们?
视频代码:
<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的新变化,这不再在该浏览器中工作。如果我找到办法,我会更新帖子。
尽管隐藏控件是HTML5视频规范的一部分,但有两种方法可以通过javascript和CSS实现。
在Javascript中,你可以为每次播放位置改变时都会改变的timeupdate事件添加一个事件处理程序,换句话说,事件总是在视频播放时发生。
假设视频元素的id是'player', 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;
}
工作示例(仅适用于基于web kit的浏览器):https://jsfiddle.net/l33tstealth/t082bjnf/7/
这对我有用
function keepControls () {
video.removeAttribute('controls')
video.setAttribute('controls', '')
}
video.addEventListener('timeupdate', keepControls)