如何使用 JavaScript 添加一个按钮来全屏播放 YouTube 视频？

我正在编写一个 Google Chrome 扩展程序，其中嵌入了 YouTube 视频：

<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 完成的在这里找到 https://stackoverflow.com/a/20289540/843732:

$("#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 for playerElement.

知道我做错了什么吗？

附言。我希望我的播放器保留 HTML5。

有一个小技巧可以在不使用 Youtube API 的情况下完成此操作。您可以添加 PHP 变量&autoplay=1 to the src你的属性<iframe>。在添加之前，请检查是否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 等工具不允许框架在其代码片段中运行。