javascript - 如何用javascript控制HTML5视频？

Question

我搜索了很多关于 HTML5 视频控制的内容，但我一直坚持使用 javascript 控制视频。应用程序中有一个规则你应该知道。

用户在任何时候都不会与浏览器交互。

我想要实现的是
1) 全屏打开视频并播放视频
2) 视频结束时，关闭视频，视频将从屏幕上消失，因此可以看到 html 内容
3) 视频的显示控件不会一直显示。

使用 javascript 实现此类操作的最简单方法是什么？

Answer 1

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");
});

然后容器窗口和视频内容都变成全屏。 谢谢大家。