嵌入youtube html5播放器显示没有全屏按钮 [英] embed youtube html5 player shows no fullscreen button

问题描述

我在我的php文件中包含了如下的youtube播放器：
但播放器没有显示全屏按钮。
切换到flash播放器
（无论是通过更改/嵌入到/ v还是禁用& html5 = 1），
都有效。我做错了什么？

I include the youtube player as follows in my php file: but the player does not show the fullscreen button. switching to the flash player (whether through changing the url from /embed to /v or by disabling &html5=1) works. what am I doing wrong?

这里有例子： 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" width="425" height="356" 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>

推荐答案

你现在使用iframe api的方式什么也没做，api被绑定在一个空元素上，如< div id =player>< / div> ，id是该元素中的第一个参数新YT.Player 功能。

The way you are using the iframe api now does nothing, the api is made to bind on an empty element, like <div id="player"></div>, the id is the first argument in the new YT.Player function.

要使用iframe api加载YouTube视频，您需要在正文：

In order to load a youtube video with the iframe api you need this in the body:

<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时，无需明确指定要启用全屏。

There is no need to explicitely specify you want to enable fullscreen when using the iframe api.

您也可以在没有api的情况下使用iframe，在使用时需要指定全屏显示。

You can also just use the iframe without the api, you'll need to specify you want fullscreen when you use it.

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

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

Just using the iframe tag is a bit faster, but if you want to use the extra features of the iframe api you have no choice.

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

A page with examples (also check the source): http://qnet.co/yt

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

You can also implement the fullscreen feature yourself (not needed for Youtube, but still cool):

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

and to make the Youtube player go fullscreen with: goFullscreen('player'), and leave fullscreen with: leaveFullscreen()

requestFullscreen和cancelFullscreen的不同版本适用于不同的浏览器，因为标准尚未完全完成

The different versions of requestFullscreen and cancelFullscreen are for different browsers, because the standard is not yet completely finished

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

More info on Javascript Fullscreen: http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ (relative old document, but still valid)

偏离主题：使用php回显这样的字符串是没用的，你可以粘贴它在php标签之外的文件中。

off-topic: It is useless to echo such a string with php, you can just paste it in the body the file outside of the php tags.

这篇关于嵌入youtube html5播放器显示没有全屏按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！