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

StackOverflow https://stackoverflow.com/questions/2217543

Вопрос

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

Если я создам HTML-файл с <body> являющийся:

<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();

Помогите!Что я делаю не так?Спасибо.

Это было полезно?

Решение

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

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

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

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

    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() На YouTube уже есть() требуется либо то, либо другое!

Другие советы

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

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

Автор: Ссылка на API YouTube JavaScript Player.

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

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

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

Что произойдет, если вы используете идентификатор "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 (то же, что введено выше)

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top