如何使用 javascript 控制 HTML5 视频？

Posted 2023-05-07

【中文标题】如何使用 javascript 控制 HTML5 视频？

【英文标题】：How to control HTML5 video with javascript?

【发布时间】：2011-04-28 15:19:02

【问题描述】：

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

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

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

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

【问题讨论】：

2) ***.com/questions/2954595/html5-video-callbacks

【参考方案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)至于全屏：

Is there a way to make HTML5 video fullscreen?

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

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

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

http://videojs.com/

祝你好运！

【讨论】：

至于 1 是真的，但并非不可能做到。至于 2，它是全屏的，我无法更改。至于 3，这正是我找到的。你部分帮助了我。谢谢。 +1

@Myra 好的，太好了！抱歉，我无法提供更多帮助！感谢您分享您自己的答案！祝你好运！

【参考方案3】：

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

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

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

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

演示：http://netkoder.dk/test/test0267.html