Не удается контролировать вставку Youtube даже с document.getElementById ('xyz'). PlayVideo () - не функция? - PullRequest
Новая
       24

Не удается контролировать вставку Youtube даже с document.getElementById ('xyz'). PlayVideo () - не функция?

3 голосов
/ 07 февраля 2010

ОК, я застрял и не знаю, что не так, даже после того, как прочитал документы Google и прочитал предложения здесь, в Stackoverflow. Почему я не могу контролировать вставки Youtube на мою веб-страницу?

Если я создаю файл HTML с : 

<object id="o1" width="480" height="295">
  <param name="movie" 
    value="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&">
  </param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed id="e1" 
    src="http://www.youtube.com/v/qCTLCNmnlKU&hl=en_US&fs=1&enablejsapi=1&" 
    type="application/x-shockwave-flash" 
    allowscriptaccess="always" allowfullscreen="true" width="480" height="295">
  </embed>
</object>

Даже когда я пытаюсь сделать: 

// I get an object. Yay.

document.getElementById('e1');

// This generates "...playVideo is not a function"

document.getElementById('e1').playVideo();

Помощь! Что я делаю неправильно? Благодаря.

Ответы [ 4 ]

5 голосов
/ 07 февраля 2010

ОК, вот ответ, найденный в одной крошечной строке текста на странице API: http://code.google.com/apis/youtube/js_api_reference.html

"Примечание. Чтобы проверить любой из этих вызовов, ваш файл должен быть запущен на веб-сервере, поскольку проигрыватель Flash ограничивает вызовы между локальными файлами и Интернетом."

Итак, чтобы я смог продолжить разработку на своем ноутбуке Mac, я сделал следующее:

  1. Отредактировал мой файл / etc / hosts , чтобы включить запись обратно на мой локальный хост: 

    127.0.0.1   testhost.com

  2. Отредактировал мой файл / etc / apache2 / httpd.conf , чтобы добавить запись виртуального хоста, указывающую обратно в мой каталог разработки: 

    <VirtualHost *:80>
    ServerName testhost.com
    DocumentRoot /Users/amy/flashproj
    <Directory /Users/amy/flashproj>
        AllowOverride all
        Options MultiViews Indexes FollowSymLinks
        Allow from All
    </Directory>
</VirtualHost>

  3. Перезапущенный Apache: 

    sudo apachectl restart

  4. Просмотр моего локального хоста через мой новый виртуальный сервер: 

    http://testhost.com

Вуаля. Это полностью работает сейчас. Я могу запросить страницу для игрока: 

document.getElementById('e1');                // OK
document.getElementById('e1').playVideo();    // OK!

Уф! Нет onYouTubePlayerReady () требуется либо!

2 голосов
/ 07 февраля 2010

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

Ваши HTML-страницы, которые отображают Chromeless Player должен реализовать функция обратного вызова с именем onYouTubePlayerReady. API будет вызывать эту функцию, когда игрок полностью загружен, и API готов к принимать звонки.

от Справочник по API проигрывателя JavaScript YouTube .

Поэтому вы можете переписать свой код следующим образом: 

<script type="text/javascript">
function onYouTubePlayerReady(playerId) {
    var ytplayer = document.getElementById('e1');
    ytplayer.playVideo();
}
</script>

Вы также можете возражать против прохождения playerapiid при встраивании проигрывателя, если их достаточно для различения в обработчике onYouTubePlayerReady.

0 голосов
/ 13 мая 2015

Я застрял с этой проблемой в течение двух дней ... каждая проблема, связанная с переменной плеера YouTube, была связана с ее локальным запуском После подделки адреса через windows / hosts он работает отлично.

0 голосов
/ 07 февраля 2010

Что произойдет, если вы используете идентификатор "o1" вместо "e1"?

Хорошо, на этой странице: http://code.google.com/apis/youtube/js_api_reference.html мне кажется, что библиотека swfobject должна быть включена для того, чтобы этот API был доступен. Я попробую.

[править] Хорошо, вот что у меня есть: 

<html>
  <head>
    <script src='http://code.jquery.com/jquery-1.4.1.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
    <script>
      window['onYouTubePlayerReady'] = function onYouTubePlayerReady(playerId) {
        player = document.getElementById("zebra");
        player.playVideo();
      };
      $(function() {
         swfobject.embedSWF(
         "http://www.youtube.com/v/qCTLCNmnlKU?hl=en_US&fs=1&enablejsapi=1&playerapiid=ytplayer", 
          "foo",
          "480", "295",
          "8",
          null, null,
          { allowScriptAccess: 'always' },
          { id: 'zebra' }
        );
      });
    </script>
  </head>
  <body>
    <div id='foo'>Foo</div>
  </body>
</html>

Это работает, но, как ни странно, это работает, только когда я работаю с реального веб-сервера. Если я помещу это в локальный файл и загрузлю в браузер, это не сработает. Я не знаю почему, но я абсолютно не эксперт по Flash или YouTube.

См. http://gutfullofbeer.net/youtube.html (то же, что напечатано выше)

...