我已经搜索了很多关于 HTML5 视频控制的内容,但我一直在用 javascript 控制视频。应用程序中有一条规则你应该知道。
任何时候都不会与浏览器进行任何用户交互。
我想要实现的是
1)以全屏方式打开视频并播放视频
2)当视频结束时,关闭视频和视频将从屏幕上消失,因此将看到 html 内容
3)视频的显示控件将不会在一直。
使用 javascript 实现此类操作的最简单方法是什么?
我已经搜索了很多关于 HTML5 视频控制的内容,但我一直在用 javascript 控制视频。应用程序中有一条规则你应该知道。
任何时候都不会与浏览器进行任何用户交互。
我想要实现的是
1)以全屏方式打开视频并播放视频
2)当视频结束时,关闭视频和视频将从屏幕上消失,因此将看到 html 内容
3)视频的显示控件将不会在一直。
使用 javascript 实现此类操作的最简单方法是什么?
VideoJS是纯基于 CSS 的视频播放器,它是开源的。如果我要用 HTML5 解决这个问题,这是我唯一的选择。
对于视频的控件,VideoJS 一开始就有一些选项。
$("video").VideoJS({
controlsbelow: false,
showControlAtStart: false
});
对于全屏问题,我找到了自己的解决方案,希望与您分享。
因为我知道屏幕尺寸,所以我在所有内容的上方制作了一个面板。
.fullscreen {
width:1280px;
height:800px;
z-index:10001;
top:0;
left:0;
position:fixed;
}
请注意,浏览器处于全屏模式,因此不要将其混为正常的全屏视频内容分辨率。
在我的视频结束时,我将可见性更改为隐藏(显示:无)
$("video").bind("ended", function () {
$("#videoContainer").removeClass("fullscreen").addClass("hidden");
});
然后容器窗口和视频内容都变为全屏。谢谢你们。
要隐藏控件,您只需省略 on video 元素上的控件属性。
例如,当用户单击按钮时,您可以进入全屏模式,但当视频以“结束”事件结束时,您似乎无法退出全屏模式。
因此,您不能将 exitfullscreen 与“结束”事件结合使用。
这似乎是在 porpuse 上进行的,因此您只能在用户执行某些操作时进入和退出全屏。
演示: http: //netkoder.dk/test/test0267.html