如何添加一个按钮使用JavaScript播放YouTube视频全屏？ [英] How to add a button to play YouTube video full screen using JavaScript?

问题描述

我为Google Chrome扩展程序编写了一个嵌入YouTube视频的代码：

I'm coding a Google Chrome extension where I embed a YouTube video:

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

然后，我添加了一个按钮，该按钮应该允许用户点击以全屏播放此视频：

I then added a button below that should allow a user to click to play this video in full screen:

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

这项工作是通过JavaScript（和jQuery）使用代码I 在这里找到：

The work is done via JavaScript (and jQuery) using the code 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 。

But when I run this code the playVideo function is undefined for playerElement.

我做错了吗？

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

PS. I want my player to remain in HTML5.

推荐答案

有一个小技巧可以在没有Youtube API的情况下执行此操作。您可以将PHP变量& autoplay = 1 添加到< code> src 属性中; IFRAME> 。在添加它之前，检查 scr 属性是否已经附加了其他变量，如果是，则使用& 而不是？。然后以全屏方式打开播放器，就完成了。

There is a little trick to do this without the Youtube API. You can add the PHP variable &autoplay=1 to the src attribute of your <iframe>. Before adding it, check if the scr attribute has already other variables attached, and, if so, add it using & instead of ?. Then open the player in fullscreen, and you're done.

您的HTML结构将如下所示：

Your HTML structure will be something like:

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

以下是您需要的代码：

And here is the code you need:

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

Unfortunately I can't provide you a working example, because Stack Overflow and tools like JSFiddle, CodePen etc don't allow frames running in their code snippets.

这篇关于如何添加一个按钮使用JavaScript播放YouTube视频全屏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！