Как изменить воспроизведение видео во встроенном плеере Youtube? - PullRequest
Новая
       19

Как изменить воспроизведение видео во встроенном плеере Youtube?

3 голосов
/ 27 марта 2009

Я бы хотел создать плейлист, где клик по каждому <li> изменит ссылку на видео чуть ниже. Список будет выглядеть так:

  • видео1 

    <li><a href="MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999">">video1</a></li>

  • BBBBB

  • CCCCC

видео плеер здесь

Таким образом, нажатие на aaaaa сыграет aaaaa, нажатие на bbbbb сыграет bbbbb и т. Д.

Я бы хотел сделать его ajax, без перерисовки, просто кликни и играй.

Вот объект YouTube для редактирования 

<object width="320" height="265">
  <param name="movie" value="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999"></param>
  <param name="allowFullScreen" value="true"></param>
  <param name="allowscriptaccess" value="always"></param>
  <embed src="http://www.youtube.com/v/MzfAvHlIVjE&hl=en&fs=1&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed>
</object>

Как я могу изменить воспроизведение видео во встроенном плеере Youtube?

Ответы [ 7 ]

5 голосов
/ 26 июля 2010

посмотрите плагин jQuery TubePlayer -

плагин обрабатывает инициализацию игрока для вас, и вы сможете получить полный контроль над игроком .. позволяя вам поставить jQuery("#player").tubeplayer("play", "[videoId]") на обработчик событий на ваших li х ..

4 голосов
/ 21 апреля 2016

У меня есть кое-что, что сработало для меня:

В голове: 

    <script type="text/javascript" src="../../../Assets/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            $(".button").click(function() {
            $("#playvideo").html(play(  $(this).find("a").attr("linkattr")));           
            return false; 
            });
        });
    function play(id)   {
           var html  = '';     
           html += '<iframe width="671" height="495" src="'+id+'" frameborder="0" allowfullscreen></iframe>';
           return html;
        };  
    </script>

В теле: 

    <h2 class="button"><a linkattr="https://www.youtube.com/embed/uopXg6NxboQ?rel=0&amp;showinfo=0" href="#"> video 1 </a></h2>
    <h2 class="button"><a linkattr="https://www.youtube.com/embed/h-v1c2kNw70?rel=0&amp;showinfo=0" href="#"> video 2 </a></h2>

    <div id="playvideo">
          <iframe width="671" height="495" src="https://www.youtube.com/embed/uopXg6NxboQ?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>

См. Эту страницу для результата: https://cllccavo.asc.ohio -state.edu / Public / Modules / help / howto.php

3 голосов
/ 27 марта 2009

Если вам не нравится всплывающее окно, просто избавьтесь от него: 

function play(id)
    {
       var html  = '';

       html += '<object >';
       html += '<param name="movie" value="http://www.youtube.com/v/'+id+'"></param>';
       html += '<param name="autoplay" value="1">';
       html += '<param name="wmode" value="transparent"></param>';
       html += '<embed src="http://www.youtube.com/v/'+id+'&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" ></embed>';
       html += '</object>';

       return html;
    };

<div id="button1" />
<div id="playvideo" />

$("#button1").click(function() { $("#playvideo").html(play("YOURVIDEOID")); });

Надеюсь, это поможет

2 голосов
/ 27 марта 2009

вот окончательное решение:

http://www.studioteknik.com/youtube/index2.html

вот окончательный код: 

<script type="text/javascript"> 
    $(document).ready( function(){
        $(".button").click(function() {
        console.log($(this).find("a").attr("href"));
        $("#playvideo").html(play($(this).find("a").attr("href"))); 
        return false; 
        });
    });
</script>

</head>

<body>

<div>
  <ul>
    <li class="button"><a href="MzfAvHlIVjE&hl=en&fs=1">Video 1</a></li>
    <li class="button"><a href="uN2OGjsLuY8&hl=en&fs=1">Video 2</a></li>
    <li class="button"><a href="EZOTMcqaH98&hl=en&fs=1">Video 3</a></li>
    <li class="button"><a href="PSTDZEZV72Q&hl=en&fs=1">Video 4</a></li>
    <li class="button"><a href="QYlOaoqgMdw&hl=en&fs=1">Video 5</a></li>
    <li class="button"><a href="GEcBhbXEFz8&hl=en&fs=1">Video 6</a></li>
    <li class="button"><a href="cU6sJ0CQWAc&hl=en&fs=1">Video 7</a></li>
    </ul>
</div>
0 голосов
/ 22 августа 2009

Марк-Андре Менар - можете ли вы изменить сценарий так, чтобы одно из видео автоматически загружалось при загрузке страницы?

0 голосов
/ 23 апреля 2009 
$('#video-player object embed').attr('src', 'http://www.youtube.com/v/' + id + '&hl=en&fs=1&&autoplay=1');

это тоже похоже работает, хотя все равно вызывает перерисовку флеш плеера, дох

0 голосов
/ 27 марта 2009

Посмотрите на плагин JQuery YouTube: http://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/

У вас есть демо здесь:

http://bijon.rightbrainsolution.com/youtube/video.html

Точно такой же интерфейс, как вам нужно, после того, как вы искали видео. (Так что вы можете избавиться от функции поиска)

Надеюсь, это поможет.

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

Нет похожих вопросов

...