Youtube IFrame API с основой

Я пытаюсь использовать API iframe YoutTube в моем базовом приложении, и я не уверен, что мой подход верен.Youtube IFrame API с основой

var VideoView = Backbone.Marionette.ItemView.extend({ 
     initialize: function(){ 
      var that = this; 
      this.currentVideoIndex = 0; 

      Events.on("changeVideo", function (target){ 
       that.changeVideo(target.id); 
      }); 

      _.bindAll(this); 

      this.player = new window.YT.Player('player', { 
       videoId: this.model.videos[0], 
       width: 700, 
       height: 400, 
       events: { 
        'onStateChange': that.onPlayerStateChange 
       }, 
       playerVars: { 
        autoplay: 1, 
        controls: 1, 
        modestbranding: 1, 
        rel: 0, 
        showInfo: 0 
       } 
      }); 
     }, 
     onPlayerStateChange: function(event) { 
       if(event.data == 0){ 
        this.currentVideoIndex = this.currentVideoIndex + 1; 
        this.player.loadVideoById(this.model.videos[this.currentVideoIndex]);       
     }, 

     changeVideo: function(event){ 
      var newIndex = this.model.videos.indexOf(event); 
      this.currentVideoIndex = newIndex; 
      this.player.loadVideoById(event); 
     } 
    });

Это код, который я использую для создания нового объекта YT.Player. Все работает отлично, когда мой просмотр инициализируется, и метод changeVideo работает так, как ожидалось. Однако, если я перейду на другую страницу и вернусь на страницу с проигрывателем Iframe, первое видео начнется, как ожидалось, однако, когда я пытаюсь изменить видео я получаю сообщение об ошибке.

Uncaught TypeError: Cannot call method 'postMessage' of null

в обоих случаях мой OnPlayerState метод изменения работает как expected- следующий начинается воспроизведение видео после текущего видео закончится.

Вот скриншот ошибки, если что помогает: https://www.dropbox.com/s/zmdo80yux4h7pg8/Screenshot%202013-12-04%2013.13.35.png

Вы также можете увидеть вживую сайт здесь http://gorlla.herokuapp.com/, если вы просто нажмете на один из курсов и перейдите в класс после того, как вы не сможете перейти к следующему видео, и если вы откроете консоль, вы увидите сообщение «Uncaught TypeError: Can not call method» postMessage «нулевого» сообщения.

источник

2013-12-04 Gorkem Yurtseven

Я хотел бы помочь, но 'postMessage' не находится в коде, который вы указали здесь, и ваш сайт в настоящее время не загружает javascript. – RustyToms

Попробуйте свой сайт, но не могу понять, как перейти к следующему видео. – Shreyas

Я открыт http://gorlla.herokuapp.com/ и перехожу на курс «Obamacare: Explained», нажмите «перейти в класс» и нажмите «Youtoons Obamacare» и «Khan Academy». Все в порядке. Firefox 27. – Sergey

Ну, прежде всего, и не связанный, вы определяете «это» дважды.

Во-вторых, почему бы не попробовать позвонить .destroy на проигрывателе, когда вы покидаете страницу, так как (если я правильно понимаю), он получает повторную инициализацию каждый раз, когда вы возвращаетесь.

Должен сказать, большинство ошибок, которые я видел, похожие на это, относятся к тому, как Chrome управляет состоянием iFrame. Например, iFrame будет null, если он не привязан к DOM. Не уверен, как это работает в других браузерах. Вы удаляете элемент DOM вручную из другого места? У меня был подобный вопрос и нашел эту страницу полезной:

https://groups.google.com/forum/#!topic/youtube-api-gdata/bThZuUg51qg

Чтобы резюмировать, попытайтесь делать некоторые очистке, прежде чем руки и играть с .destroy.

источник

2013-12-11 10:17:42 backdesk

Youtube IFrame API с основой

ответ

Смежные вопросы