嵌入 youtube html5 播放器显示没有全屏按钮

Posted 2023-05-08

【中文标题】嵌入 youtube html5 播放器显示没有全屏按钮

【英文标题】：embed youtube html5 player shows no fullscreen button

【发布时间】：2013-05-11 23:13:03

【问题描述】：

我在我的 php 文件中包含以下 YouTube 播放器，但播放器未显示全屏按钮。切换到 Flash 播放器有效（无论是通过将 url 从 /embed 更改为 /v 还是禁用 &html5=1）。我做错了什么？

这里有一个例子：http://jonnyrimkus.square7.ch/stuff/youtube_html5_fullscreen.php

<script>

var tag = document.createElement(\'script\');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName(\'script\')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


function onYouTubeIframeAPIReady() 
  player = new YT.Player(\'player\', 
    playerVars: 
      \'allowfullscreen\': \'true\',                
      \'allowscriptaccess\': \'always\'
    ,
    events: 
      \'onReady\': onYouTubePlayerReady,
      \'onStateChange\': playerStateChange,
      \'onError\': playerStateError
    
  );

</script>   
<iframe id="player"   border="0" frameborder="0" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1&playerapiid=lastfmplayer&autoplay=1&html5=1&fs=1&origin=http://jonnyrimkus.square7.ch"></iframe>

【问题讨论】：

示例链接已更新：rimkus.it/stuff/youtube_html5_fullscreen.php

【参考方案1】：

如果 Youtube 播放器位于另一个没有 allowfullscreen 属性的 iframe 中，全屏按钮也将不可见。

与 Google 的 documentation 所说的不同（截至 2014 年 11 月），查询字符串中的 fs 属性似乎不会影响全屏的可见性。可见性似乎受到iframe 中的allowfullscreen 属性的影响，youtube 播放器在实例化过程中默认放置该属性。也就是说，如果您将播放器嵌入到另一个 iframe 中，您还应该将该 iframe 标记为 allowfullscreen（或其所有变体 webkitallowfullscreen mozallowfullscreen）

<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
       <!-- YT player-->
</iframe>

【参考方案2】：

您现在使用 iframe api 的方式什么也不做，该 api 被绑定在一个空元素上，例如<div id="player"></div>，id 是new YT.Player 函数中的第一个参数。

要使用 iframe api 加载 youtube 视频，您需要在正文中添加以下内容：

<div id="player"></div>

<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);


function onYouTubeIframeAPIReady() 
    player = new YT.Player('player', 
        height: 480,
        width: 640,
        videoId: "36XdO9Iv9ew",
    );

</script>

使用 iframe api 时无需明确指定您要启用全屏。

你也可以只使用 iframe 而不使用 api，你需要在使用时指定你想要全屏。

<iframe   frameborder="0" id="player" allowfullscreen="1" title="YouTube video player" src="http://www.youtube.com/embed/36XdO9Iv9ew?enablejsapi=1"></iframe>

只使用 iframe 标签会快一点，但如果你想使用 iframe api 的额外功能，你别无选择。

带有示例的页面（另请查看来源）：http://qnet.co/yt

您也可以自己实现全屏功能（Youtube 不需要，但仍然很酷）：

var goFullscreen = function(id) 
  var el = document.getElementById(id);
  if (el.requestFullScreen) 
    el.requestFullScreen();
   else if (el.mozRequestFullScreen) 
    el.mozRequestFullScreen();
   else if (el.webkitRequestFullScreen) 
    el.webkitRequestFullScreen();
  


var leaveFullscreen = function() 
  if (document.cancelFullScreen) 
    document.cancelFullScreen();
   else if (document.mozCancelFullScreen) 
    document.mozCancelFullScreen();
   else if (document.webkitCancelFullScreen) 
    document.webkitCancelFullScreen();
  

让 Youtube 播放器全屏显示：goFullscreen('player')，离开全屏显示：leaveFullscreen()

requestFullscreen和cancelFullscreen的不同版本是针对不同浏览器的，因为标准还没有完全完善

有关 Javascript 全屏的更多信息：http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/（相对旧文档，但仍然有效）

题外话：用php回显这样的字符串是没有用的，你可以将它粘贴到文件的正文中php标签之外。

【讨论】：

您好，感谢您的详细帮助，它有效。此外，此代码位于 iframe 内，要在其中拥有全屏按钮，我必须将 allowfullscreen="1" 添加为 iframe 的属性。 （非标准 html）但不知道为什么....另外在上面的例子中，您必须在 youtube 上激活 html5 测试。是否可以强制html5播放器？

据我所知，无法强制使用 html5，因此它仍处于试用阶段。如果你手头有太多时间，你可能会成功，但我认为这不值得。

【参考方案3】：

这在 2014 年 7 月仍然是一个问题，您只是想知道 Google 是否会解决此问题。实际上，您可以通过使用 UA Spoofer 在客户端以另一种方式强制 Flash 播放器，例如对于 Google Chrome 浏览器，Chrome Web Store - djflhoibgkdhkhhcedjiklpkjnoahfmg 然后欺骗不理解 HTML5 的浏览器。

实际上 HTML5 视频仍然是一场灾难，视频的颗粒状尖峰锯齿边缘和人字形图案虽然微弱，但仍然让人分心。而 Flash 平滑、完美、可靠且边缘锐利，图案伪影为零。

HTML5 - 仍然大拇指向下，我不会把它强加给用户。

哦，是的，但全屏仍然不会出现在这样的嵌入中 Rick Astley - Never Gonna Give You Up @ viewpure embed http://viewpure.com/dQw4w9WgXcQ

您可以使用上面的示例来玩弄不同的浏览器插件。