Вопрос по ipad, youtube, html5, javascript, embed – Авто-полный экран для вставки на YouTube

19

У меня есть видео с YouTube, вставленное на веб-страницу.

Можно ли перевести видео в полноэкранный режим, когда пользователь нажимает кнопку воспроизведения, используяHTML5 iframe с API YouTube?

Использование Chromeless-плеера не вариант, так как веб-сайт предназначен для iPad.

Ваш Ответ

1   ответ
15

Обновление ноябрь 2013: это возможно -настоящий полноэкранный, не полное окносо следующей техникой. Как говорит @chrisg, API JS YouTube не имеет опции «полный экран по умолчанию».

Создать пользовательскую кнопку воспроизведенияИспользуйте YouTube JS API для воспроизведения видеоИспользуйте полноэкранный API HTML5, чтобы сделать элемент полноэкранным

Вот код

var $ = document.querySelector.bind(document);

// Once the user clicks a custom fullscreen button
$(playButtonClass).addEventListener('click', function(){
  // Play video and go fullscreen
  player.playVideo();

  var playerElement = $(playerWrapperClass);
  var requestFullScreen = playerElement.requestFullScreen || playerElement.mozRequestFullScreen || playerElement.webkitRequestFullScreen;
  if (requestFullScreen) {
    requestFullScreen.bind(playerElement)();
  }
})
извините но что за функция showVideoCallback (); ? mpgn
@Martialp Просто наследие моего сокращения моего производственного кода, чтобы сделать хороший пример, я удалил его сейчас. mikemaccana
Это не правда bfred.it, на Android вы можете вызвать: webView.getSettings (). SetMediaPlaybackRequiresUserGesture (false); virsunen
Я создалдемо на CodePen и кажется, что пока код работает (только на рабочем столе),это нарушает собственное полноэкранное поведение YouTube в Chrome, поэтому я бы не советовал использовать его. - Я также хочу добавить, что этоне можешь работать на мобильных устройствах, поскольку (1) вы не можете воспроизводить видео через API YouTube на iOS / Android и (2) даже если вы воспроизводите видео, нажимая на плеер, requestFullScreen () требует немедленного действия пользователя, поэтому он не будет огонь "onPlay". Так что одним нажатием вы либо воспроизводите видео, либо получаете его в полноэкранном режиме; вам всегда понадобятся два отдельных крана. bfred.it
@AlexeyStrakh CSS-класс, который использует элемент player, например.player или похожие. mikemaccana

Похожие вопросы