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

2019-06-28 21:21:09 阅读：189 来源： 互联网

标签：javascript youtube youtube-api google-chrome google-chrome-extension

我正在编写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 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)();
    }
});

但是当我运行此代码时,playEideo函数未定义为playerElement.

知道我做错了什么吗？

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

解决方法:

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

标签：javascript,youtube,youtube-api,google-chrome,google-chrome-extension
来源： https://codeday.me/bug/20190628/1319879.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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