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>

使用代码I found here：

通过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的{{1}}函数为undefined。

知道我做错了什么吗？

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

Answer 1

没有Youtube API，有一个小技巧可以做到这一点。您可以将PHP变量&autoplay=1添加到src的{{1}}属性中。在添加之前，请检查<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>

不幸的是，我无法为您提供一个有效的示例，因为Stack Overflow和JSFiddle，CodePen等工具不允许在其代码段中运行帧。

Answer 2

适用于YouTube iFrame的全屏首先，您必须使用YouTube Iframe Api 通过添加

>nul

将iframe包含为

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

按钮

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

然后是全屏YouTube视频的代码

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

我希望借助此功能可以帮助您。

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

2 个答案: