如何添加一个按钮使用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屋!