视频.js 播放时进入全屏模式

Question

我已经搜索了很长时间，但仍然没有找到有效的解决方案。我似乎不能让视频播放器进入全屏模式。虽然API有许多示例，但它们似乎都不起作用。

我当前正在工作的页面包括jQuery版本1.8.2。此外，我正在使用parallax-1.1.js和所需的库以使其正常工作，因此可能也存在问题。

我为客户工作时想要网站具有响应式设计，同时使播放器在单击“播放”按钮时直接进入全屏模式。此功能应在桌面和移动/平板电脑浏览器上都可用。在视频页面上，应该有3个视频播放器，每个播放器都有唯一的ID，并且它们还有一个共同的CSS类。

我尝试的某些代码效果不好。以下是控制视频HTML标记之一的示例JS代码片段。

示例：

player1 = _V_('video-1');

player1.on("play",
    function () {
        this.requestFullScreen();
});

player1.on("ended",
    function () {
        this.cancelFullScreen();
});

该代码生成了以下错误：

Uncaught TypeError: Object [object Object] has no method 'requestFullScreen'

我正在使用最新版本的Google Chrome浏览器。

- Filip Filipovic

---

你知道你正在使用哪个版本的video.js吗？你能分享一个工作代码的链接吗？ - brianchirls

是的，它是4.0.4版本。我不能分享关于该网站的任何信息，因为它正在开发中，所以...抱歉，但这是保密的。 - Filip Filipovic

Answer 1

这里有两个问题需要解决。

首先，在“播放”事件处理程序中无法进入全屏模式。为了安全和良好的用户体验，浏览器只会允许您在用户触发的事件（如“单击”）中触发全屏模式。您不能让每个网页在您访问它时都进入全屏模式，并且您可能会导致视频自动开始播放，这将违反该规则。因此，您需要将其移至实际播放按钮上的“单击”处理程序。

第二个问题是Video.js 4.0.x的一个大问题，即使用Google Closure Compiler进行minified并使用Advanced Optimizations。因此，许多公共属性和方法被混淆，使它们难以/不可能使用。在这种情况下，requestFullScreen现在是player1.Pa()。据我所知，cancelFullScreen根本不存在。

以下是处理此问题的一些选项：

1. 使用混淆的方法名称。我不建议这样做，因为a）名称会随着每个小版本升级而更改（例如4.0.5），b）它会使您的代码难以阅读，c）您无法使用cancelFullScreen。

2. 获取未压缩的video.js副本并自己托管。（您可以使用Uglify或另一个不会干扰方法名称的压缩程序。）Video.js不提供此文件，因此您必须克隆git存储库并自行运行构建脚本。您也无法免费使用video.js的CDN。

3. 使用旧版本的video.js，等待4.x准备就绪。

4. 根本不使用video.js。考虑使用jPlayer和jwPlayer或自己编写。

我推荐2或3。

更新：看起来这个特定问题已经修复，但它还没有被发布。

- brianchirls

---

非常感谢。我会研究一下的。需要测试一下。 - Filip Filipovic

你好。你的建议非常有帮助。在花了一些时间“玩弄”video.js之后，我决定用jPlayer替换它。从那时起，我的头痛问题就解决了。最大的问题就像你所说的那样，是它的方法混淆。再次感谢你的帮助。 - Filip Filipovic

Answer 2

我个人使用的是自定义链接，可以同时触发播放和全屏。

<a class="enter-fullscreen" href="#">Play fullscreen</a>

以下是js部分：

<script type="text/javascript">

    $('.enter-fullscreen').click(function(e) {
        e.preventDefault();
        $('.vjs-play-control').click();
        $('.vjs-fullscreen-control').click();
    });

</script>

这个东西虽有改进空间，但它简单易用且功能齐备。

- Alain Tiemblo

---

由于某种原因，全屏播放在我的情况下可以正常工作，但视频无法自动播放。当播放器处于全屏模式时，我需要再次点击播放按钮来启动视频播放。你能帮忙吗？ - John Grischam

Answer 3

一种解决问题的简单方法：

document.querySelector('.vjs-big-play-button').addEventListener('click', player.requestFullscreen)

视频全屏播放，点击播放按钮即可开始播放。

- oldsea

---

双击播放器也会进入全屏模式。使用这种解决方案，它不会触发。 - Avatar

Answer 4

在 video.js 文件中找到这些行

BigPlayButton.prototype.handleClick = function handleClick(event) {

        var playPromise = this.player_.play();

并添加

BigPlayButton.prototype.handleClick = function handleClick(event) {

        var playPromise = this.player_.play();
        document.getElementsByClassName('vjs-fullscreen-control')[0].click()
        // exit early if clicked via the mouse
        if (this.mouseused_ && event.clientX && event.clientY) {
            silencePromise(playPromise);
            return;
        }

- Hamzeh Salhi