javascript - YouTube Player API detect fullscreen exit - Stack Overflow

admin管理员组

文章数量:1290982

So basically there is a button which when clicked opens and play a video in fullscreen. I want to stop the video when user exit fullscreen but can't catch that event.

By now I user this as starting

Can someone direct me to a possible solution.

HTML:

<script src=""></script>
<button>play fullscreen</button><br>
<div id="player"></div>

JS:

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}

So basically there is a button which when clicked opens and play a video in fullscreen. I want to stop the video when user exit fullscreen but can't catch that event.

By now I user this as starting http://codepen.io/bfred-it/pen/GgOvLM

Can someone direct me to a possible solution.

HTML:

<script src="https://www.youtube./iframe_api"></script>
<button>play fullscreen</button><br>
<div id="player"></div>

JS:

var player, iframe;
var $ = document.querySelector.bind(document);

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '200',
    width: '300',
    videoId: 'dQw4w9WgXcQ',
    events: {
      'onReady': onPlayerReady
    }
  });
}

// when ready, wait for clicks
function onPlayerReady(event) {
  var player = event.target;
  iframe = $('#player');
  setupListener(); 
}

function setupListener (){
$('button').addEventListener('click', playFullscreen);
}

function playFullscreen (){
  player.playVideo();//won't work on mobile

  var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(iframe)();
  }
}

• javascript
• youtube
• youtube-api

Share Improve this question Follow asked Apr 10, 2017 at 10:50 GardelinGardelin 1,0711313 silver badges3333 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

You can detect when the browser full screen change and then stop the video

document.addEventListener("fullscreenchange", function() {
  if (!document.fullscreenElement) player.stopVideo();
}, false);

document.addEventListener("msfullscreenchange", function() {
  if (!document.msFullscreenElement) player.stopVideo();
}, false);

document.addEventListener("mozfullscreenchange", function() {
  if (!document.mozFullScreen) player.stopVideo();
}, false);

document.addEventListener("webkitfullscreenchange", function() {
  if (!document.webkitIsFullScreen) player.stopVideo();
}, false);

本文标签： javascriptYouTube Player API detect fullscreen exitStack Overflow