Lig*_*ght 11 javascript youtube
好吧,我认为这是一个主要的Youtube错误,但我没有找到任何关于它的报告.
我有一个使用JavaScript Fullscreen API在全屏浏览器中显示的Web应用程序.
在网络应用程序中有一个嵌入式Youtube播放器.当您以全屏模式打开Youtube播放器时,再次单击Youtube的全屏按钮以退出播放器的全屏,它不会响应!
我确信这与浏览器已经处于全屏模式这一事实有关,因此存在某种冲突.
我创建了一个简化的示例,可以在这里查看:http: //run.plnkr.co/CjrrBGBvrSspfa92/
编辑:上面的html文件的代码在这里:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/b-6B2zyoFsI" frameborder="0" allowfullscreen></iframe>
<button id="btn">GO FULLSCREEN</button>
<script type="text/javascript">
document.getElementById("btn").addEventListener("click", function() {
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
});
</script>
</body>
</html>
小智 4
问题是我做了一些搜索，发现 Youtube 在使用JavaScript 全屏 API时不知道视频是否全屏，Google 也没有提供进入或退出全屏的 API 调用。因此，当您单击该按钮并进入全屏时，您会看到播放器的全屏按钮未被按下。因此，为了返回到窗口视图，用户有两种选择：1）单击按钮两次（第一次，播放器尝试进入全屏并且按钮更改状态，第二次，播放器进入窗口模式) - 这是解决方案 2) 单击键盘上的 Esc。
我检查了 HTML5 播放器。
此外，我尝试在 YouTube 的 iframe 中注入一个按钮，这样我就可以选择它来退出全屏，但它不起作用......实际上是愚蠢的。
这应该有效：
<div id="videoplayer"></div>
<p><button id="btn">GO FULLSCREEN</button></p>
<script type="text/javascript">
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('videoplayer', {
height: '380',
width: '500',
videoId: 'h7ArUgxtlJs',
fs: 1
});
}
document.getElementById("btn").addEventListener("click", function() {
var elem = document.getElementById('videoplayer');
var requestFullScreen = elem.requestFullscreen || elem.msRequestFullscreen || elem.mozRequestFullScreen || elem.webkitRequestFullscreen;
if (requestFullScreen) {
requestFullScreen.bind(elem)();
}
});
</script>
我相信您可以使用经典的嵌入。
| 归档时间： |
|
| 查看次数： |
2515 次 |
| 最近记录： |