我在我的php文件中包含如下YouTube播放器,但播放器未显示全屏按钮。切换到Flash播放器可以正常工作(无论是通过更改/嵌入到/ 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" 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>
答案 0 :(得分:5)
如果Youtube播放器位于另一个没有iframe
属性的allowfullscreen
内,则全屏按钮也不会显示。
与Google documentation所说的(截至2014年11月)不同,查询字符串中的fs
属性似乎不会影响全屏的可见性。可见性似乎受allowfullscreen
中iframe
属性的影响,youtube播放器在实例化期间默认放置该属性。也就是说,如果您将播放器嵌入另一个iframe
内,您还应该为allowfullscreen
(或其所有变体webkitallowfullscreen
mozallowfullscreen
)标记iframe
<iframe src='' frameborder='0' webkitallowfullscreen mozallowfullscreen allowfullscreen>
<!-- YT player-->
</iframe>
答案 1 :(得分: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时,无需明确指定要启用全屏。
您也可以在没有api的情况下使用iframe,在使用时需要指定全屏显示。
<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的额外功能,你别无选择。
包含示例的页面(也请查看来源):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标签之外的文件体内。
答案 2 :(得分:1)
这仍然是2014年7月的一个问题,你只是想知道谷歌是否会解决这个问题。实际上,您可以使用UA Spoofer在客户端以另一种方式强制使用Flash播放器,例如,使用Chrome网络浏览器 - Chrome浏览器 - djflhoibgkdhkhhcedjiklpkjnoahfmg,然后欺骗不理解HTML5的浏览器。
实际上,HTML5视频仍然是一场灾难,而视频和人字形图案虽然微弱,仍然令人分心。而Flash是平滑,完美,可靠和锐利的边缘,没有图案伪影。
HTML5 - 仍然大拇指向下,我不会对用户造成影响。
哦,是的,仍然全屏不会出现在这样的嵌入中 Rick Astley - 永远不会放弃你@ viewpure嵌入 http://viewpure.com/dQw4w9WgXcQ
您可以使用上面的示例来摆弄和插入不同的浏览器插件。