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

Question

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

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

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

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

score 2 · Accepted Answer

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

然后容器窗口和视频内容都变为全屏。谢谢你们。

score 0 · Accepted Answer

1）至于全屏：

2）也许你可以考虑使用像和灯箱这样的jQuery插件，也许像这样

编辑：并检查@Mzialla 的答案。

3）至于视频播放器，请查看：

祝你好运！

score 0 · Accepted Answer

要隐藏控件，您只需省略 on video 元素上的控件属性。

例如，当用户单击按钮时，您可以进入全屏模式，但当视频以“结束”事件结束时，您似乎无法退出全屏模式。

因此，您不能将 exitfullscreen 与“结束”事件结合使用。

这似乎是在 porpuse 上进行的，因此您只能在用户执行某些操作时进入和退出全屏。

3 回答 3