Можно ли получить элемент <video>из встроенного фрейма YouTube? - PullRequest
Новая
       41

Можно ли получить элемент <video>из встроенного фрейма YouTube?

0 голосов
/ 09 января 2019

В настоящее время я работаю над возможностью увеличения встроенного видео на YouTube. Поэтому у меня есть плеер, настроенный в iframe (для этого я использую HTMLYoutubeElement из popcorn.js)

player = new YT.Player( elem, { width: "100%", height: "100%", wmode: playerVars.wmode, videoId: aSrc, playerVars: playerVars, events: { 'onReady': onPlayerReady, 'onError': onPlayerError, 'onStateChange': onPlayerStateChange } });

Из этого iframe я хотел бы получить доступ к элементу <video> для своих целей. Используя API iframe для YouTube, я получаю соответствующий iframe с player.getIframe (). Но как только я пытаюсь получить «внутренний» документ, например, с

var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

Я получаю следующее сообщение об ошибке:

Uncaught SecurityError: заблокирован фрейм с источником http://localhost:3000 от доступа к фрейму перекрестного происхождения.

Этот тип ошибки обсуждается здесь, но не помогает мне с моей конкретной проблемой .

И, глядя на API iframe youtube, я не нашел возможности напрямую получить доступ к элементу <video>. Поэтому мой вопрос: возможно ли это вообще?

1 Ответ

0 голосов
/ 13 января 2019

Вы не можете увеличить видео, даже если качество видео будет ухудшено. если вы хотите видео в полноэкранном режиме, то, возможно, это то, что вы искали: 

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

// init player
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
   height: '100%',
   width: '100%',
   videoId: 'xxxxxxxxxxx',
    events: {
     'onReady': onPlayerReady
    }
 });
}
// when ready, wait for clicks
function onPlayerReady(event) {
 var player = event.target;
 iframe = $('#player');
 setupListener(); 
}

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

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

function playFullscreen (){
   //won't work on mobile
   player.playVideo(); 
   var requestFullScreen = iframe.requestFullScreen || 
   iframe.mozRequestFullScreen || 
   iframe.webkitRequestFullScreen;
   if (requestFullScreen) {
      requestFullScreen.bind(iframe)();
   }
}
...