2013-12-10 2 views
1

Я только что заметил, что события Youtube (onReady, onStateChange) больше не срабатывают, когда я тестирую свои локальные, но работает, когда я загружаю код в JsFiddle. Я решил скопировать и вставить код из Youtube Player API, где я могу проверить, что он действительно не работает. Кто-нибудь еще имеет эту проблему? Эта проблема возникает в Chrome, Firefox, IE, Safari и Opera.Youtube Embed Iframe - Events Not Firing In Local

EDIT - Когда я console.log(player); в моем местном, я вижу, что это не хватает много функций, таких как Youtube seekTo(), setVolume(), showVideoInfo(), которые присутствуют в JsFiddle. Я не уверен, почему это происходит, но я считаю, что это может быть причиной моей проблемы. Есть идеи?

http://jsfiddle.net/8ZmKx/

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

    <script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

     tag.src = "https://www.youtube.com/iframe_api"; 
     var firstScriptTag = document.getElementsByTagName('script')[0]; 
     firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 
     player = new YT.Player('player', { 
      height: '190', 
      width: '140', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     console.log('ready'); 
     event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     console.log('change'); 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    </script> 
    </body> 
</html> 

ответ

4

Оказывается, что IFrame API Youtube в настоящее время не работает, хотя я не видел никакого официального подтверждения пока нет.

Смотрите также:

onReady callback not firing when having the iframe explicitly written inside a template

YouTube API onPlayerReady not firing

Edit: Вот исправление: https://code.google.com/p/gdata-issues/issues/detail?id=5670#c6

Вот прямая цитата из ответа на указанной выше ссылке:

A быстрое исправление заключается в том, чтобы добавить в начало = http://www.example.com (заменить с полным доменом вашего сервера; убедитесь, что вы используете http: // или https: // в зависимости от вашего сайта) к атрибуту src = элемента iframe игрока . Убедитесь, что значение origin = attribute точно соответствует домену хоста и схеме URL. Например.

<iframe 
    type="text/html" 
    width="640" 
    height="480" 
    src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com" 
    frameborder="0"> 
</iframe> 

Я сейчас работаю с командой инженеров, чтобы выяснить, является ли происхождения = это будет необходимо двигаться вперед, или это новое требование может быть отменена ли, но это немедленное исправление , Извинения за поломку и отсутствие передовой связи в это время.

Если вы используете конструктор YT.Player() для создания IFrame элемент для вас, то это не является проблемой, это немного краевым случае для разработчиков, которые явно включая IFrame элемент в качестве части HTML-страницы своей страницы.

Я реализовал исправление выше, и это сработало для меня.

0

Я установил исправление, которое реализовало параметр «origin =», исправляя исходные ошибки и события изменения состояния стрельбы.

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