如何使用 javascript 控制 HTML5 视频？答案

【问题标题】：How to control HTML5 video with javascript?如何使用 javascript 控制 HTML5 视频？
【发布时间】：2011-04-28 15:19:02
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案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");
});

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

【讨论】：

【解决方案2】：

1)至于全屏：

2) 也许你可以考虑使用 jQuery 插件和灯箱，也许像 this

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

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

祝你好运！

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：