使用iframe和JavaScript API制作YouTube视频全屏

前端之家收集整理的这篇文章主要介绍了使用iframe和JavaScript API制作YouTube视频全屏前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个嵌入式YouTube视频与隐藏的控件:
<iframe id="ytplayer" type="text/html" width="400" height="225"
src="http://www.youtube.com/embed/dMH0bHeiRNg?rel=0&controls=0&showinfo=0
&loop=1&hd=1&modestbranding=1&enablejsapi=1&playerapiid=ytplayer"
frameborder="0" allowfullscreen></iframe>

我可以用youtube Javascript API来控制它.

var tag = document.createElement('script');

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

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer',{
  events: {
    'onReady': onPlayerReady,'onStateChange': onPlayerStateChange
  }
});
}

像player.playVideo()等的东西完美地工作.现在我正在寻找一种使用Javascript调用全屏模式播放视频的方法,但是在API中找不到任何方法.

甚至有可能(没有控制),如果是 – 如何?

解决方法

你可以使用html5全屏api:
node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

但请注意:

>这通常需要像mozRequestFullScreen()或webkitRequestFullScreen这样的供应商特定的前缀> requestFullScreen必须被调用用户事件(如onclick)>在firefox中,全屏将为黑色,直到“允许”被用户点击

原文链接:https://www.f2er.com/html/230297.html

猜你在找的HTML相关文章