5

我已经搜索了很长时间，但仍然没有找到解决我问题的有效方法。我似乎无法让视频播放器进入全屏模式。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。

4

4 回答 4

9

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

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

第二个是 Video.js 4.0.x 的一个大问题，它是使用 Google Closure Compiler with Advanced Optimizations缩小的。许多公共属性和方法都被混淆了，使得它们难以/不可能使用。在这种情况下，是现在。而且，据我所知，根本不存在。requestFullScreenplayer1.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。

更新：看起来这个特定问题已得到修复，但尚未发布。

于 2013-06-18T13:40:22.930 回答
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>

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

于 2017-02-22T20:12:03.410 回答
1

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

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

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

于 2018-09-23T19:26:11.943 回答
0

在 video.js 文件中转到此行

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

        var playPromise = this.player_.play();

并添加

BigPlayButton.prototype.handleClick = 函数句柄点击（事件）{

        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;
        }
于 2018-09-09T15:44:43.603 回答