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

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

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

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

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

使用模糊方法名称。我不推荐这个，因为a）名称会随着每个次要版本的升级而改变（例如4.0.5）和b）它会使你的代码不可读，并且c）你不能使用cancelFullScreen。< / p>
获取未经缩小的复制video.js并自行托管。（您可以使用Uglify或其他不会破坏方法名称的minifier。）Video.js不提供此文件，因此您必须克隆git repo并自行运行构建脚本。而且你没有获得免费使用video.js的CDN的优势。
使用older version的video.js并等待4.x准备好进入黄金时段。
根本不要使用video.js.考虑jPlayer和jwPlayer或自己动手。

我推荐2或3。

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

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;
        }

Video.js在播放时进入全屏

4 个答案: