Сделайте полноэкранный просмотр youtube видео с помощью iframe и javascript API

У меня есть встроенное видео 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>

Я могу управлять им с помощью API-интерфейса youtube Javascript.

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.

Возможно ли это (без элементов управления), и если да - как?

Ответы

Ответ 1

Я добавил код для полноэкранного просмотра (реальный полный экран, а не полное окно) к моему ответу на Авто-Full Screen для встраивания Youtube.

YouTube не раскрывает полноэкранный режим в своем API, но вы можете вызвать функцию браузера requestFullScreen() из события playerStateChange() из API YouTube или создать собственную пользовательскую кнопку воспроизведения, как у меня.

Ответ 2

Вы можете использовать html5 fullscreen api:

node.requestFullScreen();
document.cancelFullScreen();
document.fullScreen; // bool

Заметим, что:

  • для этого обычно требуется префикс для конкретного поставщика, например mozRequestFullScreen() или webkitRequestFullScreen
  • requestFullScreen должен вызываться в пользовательских событиях (например, onclick)
  • в firefox полноэкранный режим будет черным до тех пор, пока пользователь не будет нажат "Разрешить".

Ответ 3

Это сработало отлично в моем случае. Вы можете найти более подробную информацию по этой ссылке: демо на CodePen

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)();
  }
}

Ответ 4

Глядя на ссылку API для проигрывателя iframe, я не думаю, что можно установить его в полноэкранный режим (только с помощью API iframe) - ctrl f не нашел полноэкранный режим, поэтому либо он секретный метод, скрытый внутри API, или его не существует. Однако, как вы, вероятно, знаете, вы можете установить размер проигрывателя player.setSize(width:Number, height:Number):Object, а затем сделать полноэкранный режим окна.

Ответ 6

У меня есть побочный вопрос.

Кодовый код Alkindus отлично работает, спасибо!

но я не нахожу, как приостановить видео на "побег"

попробовал что-то вроде:

    window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }
  if(event.key === "Escape") { 
  //alert('escape');
  player.stopVideo();
  }

  event.preventDefault();
}, true);

это вызывает мой побег, но в то время как в видео я должен дважды нажать "побег"

Ответ 7

Вы можете попробовать установить измерение iframe в размер окна через javascript.

Что-то вроде этого (используя jQuery):

$('ytplayer').attr('width', $(window).width());
$('ytplayer').attr('height', $(window).height());

Надеюсь, это поможет вам.