如何使用 JavaScript 添加按钮以全屏播放 YouTube 视频？答案

【问题标题】：How to add a button to play YouTube video full screen using JavaScript?如何使用 JavaScript 添加按钮以全屏播放 YouTube 视频？
【发布时间】：2014-12-14 21:25:18
【问题描述】：

我正在编写一个嵌入 YouTube 视频的 Google Chrome 扩展程序：

<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE"
frameborder="0" allowfullscreen>

然后我在下方添加了一个按钮，用户可以单击该按钮以全屏播放此视频：

<a href="#" id="lnkFullScreen">Play full screen</a>

这项工作是通过 JavaScript（和 jQuery）使用代码 I found here 完成的：

$("#lnkFullScreen").click(function(e)
{
    e.stopPropagation();
    e.preventDefault();

    var playerElement = document.getElementById("ytplayer");

    playerElement.playVideo();   //`playVideo` is undefined

    var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
    if (requestFullScreen)
    {
        requestFullScreen.bind(playerElement)();
    }
});

但是当我运行此代码时，playVideo 函数是 undefined 对应于 playerElement。

知道我做错了什么吗？

PS。我希望我的播放器保留在 HTML5 中。

【问题讨论】：

没有足够的代表发表评论。这可能会有所帮助stackoverflow.com/questions/7615380/…
@codemonkeytony：我在我的问题中引用了相同的链接。你有什么特别想指出的吗？
好吧，如果没有别的，你可以只修改宽度和高度。

标签： javascript google-chrome google-chrome-extension youtube youtube-api

【解决方案1】：

在没有 Youtube API 的情况下，有一个小技巧可以做到这一点。您可以将 PHP 变量 &autoplay=1 添加到 <iframe> 的 src 属性中。在添加之前，检查scr 属性是否已经附加了其他变量，如果是，则使用& 而不是? 添加它。然后全屏打开播放器，就大功告成了。

您的 HTML 结构将类似于：

<iframe id="player" type="text/html" width="640" height="360"
        src="http://www.youtube.com/embed/M7lc1UVf-VE"
        frameborder="0" allowfullscreen>
</iframe>
<br/>
<a href="#" id="play-fullscreen">Play full screen</a>

这是您需要的代码：

var fullscreen = document.getElementById('play-fullscreen'),
    player = document.getElementById('player');

fullscreen.addEventListener('click', function (e) {
    if (~player.src.indexOf('?')) player.src += '&autoplay=1';
    else player.src += '?autoplay=1';

    var req = player.requestFullscreen
        || player.webkitRequestFullscreen
        || player.mozRequestFullScreen
        || player.msRequestFullscreen;

    req.call(player);
    e.preventDefault();
});

很遗憾，我无法为您提供一个可行的示例，因为 Stack Overflow 和 JSFiddle、CodePen 等工具不允许在其代码 sn-ps 中运行帧。

【讨论】：

非常好。谢谢你。我能问一下，你是从哪里得到的req 财产？有记录吗？
对于那些不想让它自动播放的人，不要添加autoplay=1 部分。
@c00000fd 我创建了该 req 属性。我为 req 属性分配了全屏功能。顺便说一句，如果您想在用户单击“全屏播放”时播放视频，则需要“autoplay=1”部分。
嗯。有趣的。如果我将它声明为独立变量，例如 var req = player.requestFullscreen || ... 它不起作用。它必须是player 对象的属性。我不明白那部分。
@c00000fd 您也可以将其定义为另一个变量，但是您需要使用req.call(player) 来更改req (see Function.prototype.bind) 的this 对象，因为它是一个函数使用this 变量。我编辑了我的答案，现在看起来更清晰了。

【解决方案2】：

对于 YouTube iFrame 上的全屏首先你必须使用 YouTube Iframe Api 通过添加

<script src="https://www.youtube.com/iframe_api"></script>

将 iframe 包含为

 <iframe id="youtube_videos_url" allowfullscreen="1" class="video-js vjs-default-skin"
              src="http://www.youtube.com/embed/8xXrbKJSp6w?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0" frameborder="0">
      </iframe>

对于按钮

<button id="fs" type="button" data-state="go-fullscreen">Fullscreen</button>

然后是全屏 YouTube 视频的代码

$(document).ready(function () {
    var player = new YT.Player('youtube_videos_url');
    $('#fs').on('click', function () {
        player.playVideo();
        var $$ = document.querySelector.bind(document);
        var iframe = $$('#youtube_videos_url');
        var req = iframe.requestFullscreen
                || iframe.webkitRequestFullscreen
                || iframe.mozRequestFullScreen
                || iframe.msRequestFullscreen;
        req.call(iframe);
    });
});

希望这个功能对你有帮助。

【讨论】：