Video.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。

Answer 1

这里有两个问题要解决。

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

第二个问题是Video.js 4.0.x的一个大问题，那就是使用带有高级优化功能的 Google Closure编译器将其缩小了 。 因此，许多公共属性和方法被混淆了，使其难以使用。 在这种情况下， requestFullScreen现在为player1.Pa() 。 而且，据我所知， cancelFullScreen根本不存在。

以下是一些处理方法：

1. 使用混淆的方法名称。 我不建议这样做，因为a）名称随每次次要版本升级（例如4.0.5）而更改，并且b）它将使您的代码不可读，并且c）您不能使用cancelFullScreen 。

2. 获取未缩小的副本video.js并自己托管。 （您可以使用Uglify或其他不会破坏方法名称的压缩程序。）Video.js不提供此文件，因此您必须克隆git repo并自行运行构建脚本。 而且您无法免费使用video.js的CDN。

3. 使用旧版本的video.js并等待4.x准备好黄金时间。

4. 完全不要使用video.js。 考虑使用jPlayer和jwPlayer或自己动手。

我建议2或3。

更新：似乎已解决了此特定问题，但尚未将其发布。

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>

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

Answer 3

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

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

视频进入全屏状态，并且播放按钮的正常事件导致其开始播放。

Answer 4

在video.js文件中转到此行

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

        var playPromise = this.player_.play();

并添加

BigPlayButton.prototype.handleClick =函数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;
        }