Video.js 在播放时进入全屏

Posted 2023-05-08

【中文标题】Video.js 在播放时进入全屏

【英文标题】：Video.js enter fullscreen on play

【发布时间】：2013-06-13 04:23:00

【问题描述】：

我已经搜索了很长时间，但仍然没有找到有效的解决方案来解决我的问题。我似乎无法让视频播放器进入全屏模式。 API 确实有很多示例，但似乎没有一个有效。

我目前正在处理的页面中包含的 jQuery 版本是 1.8.2。另外，我正在使用 parallax-1.1.js 和它正常工作所需的库，因此这也可能是一个问题。

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

我尝试过的一些代码效果不佳。这是一个示例 JS 代码 sn-p 控制视频 html 标记之一。

示例：

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。

【问题讨论】：

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

是的，它是 4.0.4 版本。我无法分享有关该网站的任何信息，因为它正在开发中……抱歉，这是保密的。

【参考方案1】：

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

首先，您不能在“播放”事件处理程序中全屏显示。为了安全和良好的用户体验，浏览器只会让您在用户触发的事件中触发全屏，例如“点击”。您不能让每个网页在访问后立即全屏显示，并且您可以使视频自动开始播放，这将违反该规则。因此，您需要将其移至实际播放按钮上的“点击”处理程序。

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

以下是一些处理方法：

使用经过混淆的方法名称。我不建议这样做，因为 a) 名称会随着每次次要版本升级（例如 4.0.5）而改变 b) 它会使你的代码不可读，c) 你不能使用 cancelFullScreen。

获取未压缩的 video.js 副本并自行托管。 （您可以使用 Uglify 或其他不会与方法名称混淆的压缩程序。） Video.js 不提供此文件，因此您必须克隆 git 存储库并自己运行构建脚本。而且你并没有获得免费使用 video.js 的 CDN 的优势。

使用 video.js 的 older version 并等待 4.x 准备好进入黄金时段。

根本不要使用 video.js。考虑jPlayer 和jwPlayer 或自己动手。

我推荐 2 或 3 个。

更新：看起来这个特定的问题是fixed，但它还没有发布。

【讨论】：

非常感谢。我会调查一下。需要测试一下。

你好。你的建议很有帮助。在“玩”了一段时间 video.js 之后，我决定用 jPlayer 来改变它。从此头疼不已。正如你所说，最大的问题是它的方法的混淆。再次感谢您的帮助。

【参考方案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>

这是可以改进的，但很简单，并且可以完成工作。

【参考方案3】：

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

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

视频全屏显示，播放按钮的常规事件导致视频开始播放。

【讨论】：

双击播放器也带来全屏。使用此解决方案不会触发。

【参考方案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;