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

Question

我正在编写一个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）使用我在这里找到的代码完成的：

$("#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函数是playerElement的undefined。

知道我做错了什么吗？

PS。我希望我的播放器保持HTML5。

Answer 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等工具不允许在其代码片段中运行帧。

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

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