Youtube api - остановить видео - PullRequest
8 голосов
/ 13 июля 2011

Мне нужна помощь с YouTube API и встроенными видео. Я хочу остановить видео при нажатии на какой-либо элемент (div, link, td и т. Д.). Я пытаюсь заставить его работать только для 1 видео, но последняя функция этого скрипта должна остановить все видео, загруженные на текущей странице Я прочитал документацию по API YT, но я действительно новичок в JS, поэтому мне все еще трудно понять.

<html>
<head>
    <script type="text/javascript" src="swfobject.js"></script>
</head>
<body>

<a href="javascript:ytplayer.stopVideo()">Play</a>
<br/>
<iframe id="ytplayer" src="http://www.youtube.com/embed/8Ax-dAR3ABs?rel=0&iv_load_policy=3&showinfo=0&enablejsapi=1&version=3&playerapiid=ytplayer" type="application/x-shockwave-flash" frameborder="0" allowscriptaccess="always"></iframe>

</body>
</html>

Заранее спасибо за любые советы

Ответы [ 3 ]

14 голосов
/ 13 июля 2011

Вы не можете управлять им, если вставляете его с помощью iframe.Вы должны использовать встраивание объектов, например:

<object id="ytplayer" style="height: 390px; width: 640px">
    <param name="movie" value="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1">
    <param name="allowScriptAccess" value="always">
    <embed id="ytplayer" src="http://www.youtube.com/v/8Ax-dAR3ABs?version=3&enablejsapi=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="390">
</object>

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

<a href="javascript:document.getElementById('ytplayer').stopVideo()">Play</a>

ТакжеВы видели демонстрационный сайт?http://code.google.com/apis/youtube/youtube_player_demo.html

6 голосов
/ 25 июля 2012

Я недавно написал небольшую jquery для этого, из API YouTube

Я хотел, чтобы все видео не воспроизводились одним действием

<html>
<head>
<!-- jquery -->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
  <body>
    <!-- player divs -->
    <div id="player1"></div>
    <div id="player2"></div>
    <div id="player3"></div>

    <a class="stop">Stop</a>

    <script>
      // load  api
      var tag = document.createElement('script');
      tag.src = "//www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // make player array
      var players = new Array();

      function onYouTubeIframeAPIReady() {
        players[0] = new YT.Player('player1', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
        players[1] = new YT.Player('player2', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
        players[2] = new YT.Player('player3', {
          height: '390',
          width: '640',
          videoId: 'u1zgFlCw8Aw'
        });
      }

      $('.stop').click( function() {
        //loop players array to stop them all
        $(players).each(function(i){
           this.stopVideo();
          });
      });


    </script>
  </body>
</html>

или для остановки одного видео:

$('.stop').click( function() {
   playerVariableName.stopVideo();
});
0 голосов
/ 13 июля 2011

Не знаком с API YouTube, но это должно работать, если ваш другой код правильный:

<script type="text/javascript">
    player = document.getElementById('ytplayer');

    function stop(){
        player.stopVideo();
        return false;
    }
</script>

<a href="#" onclick="stop()">Play</a>

Вставьте это на место вашего <a href="javascript:ytplayer.stopVideo()">Play</a> тега.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...