如何更改Youtube嵌入式播放器中播放的视频？

I'd like to make a playlist, where a click on each <li> will change the video link just below. The list will look like this:

我想制作一个播放列表,点击每个

会改变下面的视频链接。该列表将如下所示:

video1

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

video1

“> video1
bbbbb
ccccc

video player here

视频播放器在这里

So clicking on aaaaa will play aaaaa , clicking on bbbbb will play bbbbb, etc.

所以点击aaaaa将播放aaaaa,点击bbbbb将播放bbbbb等。

I'd like to make it ajax, without redraw, just clic and play.

我想把它变成ajax,没有重绘,只是陈词滥调和玩法。

Here is the youtube object to edit

这是要编辑的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>

How can I change the video playing in Youtube embedded player ?

如何更改Youtube嵌入式播放器中播放的视频?

7 个解决方案

#1

If you dun like the popup just get rid of it:

如果你不喜欢弹出窗口就可以摆脱它:

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")); });

Hope this helps

希望这可以帮助

#2

check out the jQuery TubePlayer Plugin --

看看jQuery TubePlayer插件 -

the plugin handles the player initialization for you and you'd be able to get full control of the player.. allowing you to put jQuery("#player").tubeplayer("play", "[videoId]") on the event handler on your li's..

该插件为您处理播放器初始化,您将能够完全控制播放器..允许您在事件上放置jQuery(“#player”)。tubeplayer(“play”,“[videoId]”)李的处理程序..

#3

I have something that worked for me:

我有一些对我有用的东西:

In head:

    <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>

In body:

    <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>

See this page for result: https://cllccavo.asc.ohio-state.edu/Public/Modules/help/howto.php

请参阅此页面以获取结果:https://cllccavo.asc.ohio-state.edu/Public/Modules/help/howto.php

#4

here is the final solution :

这是最终的解决方案:

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

here is the final code :

这是最终的代码:

<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>

#5

Look at the jquery youtube plugin: http://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/

看看jquery youtube插件:http://saidur.wordpress.com/2007/12/03/jquery-youtube-beta-plugin/

You have a demo here:

你有一个演示:

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

Exact the same interface as you need, after you searched the videos. (So you can get rid of searching feature)

在搜索完视频后,您可以根据需要精确设置相同的界面。 (所以你可以摆脱搜索功能)

Hope this helps.

希望这可以帮助。

#6

$('#video-player object embed').attr('src', 'http://www.youtube.com/v/' + id + '&hl=en&fs=1&&autoplay=1');

this seems to work too, although still causes the repaint of the flash player, doh

这似乎也有效,虽然仍然会导致flash播放器的重画,doh

#7

Marc-Andre Menard - can you modify the script so that one of the videos automatically loads on page load?

Marc-Andre Menard - 您可以修改脚本,以便其中一个视频在页面加载时自动加载吗?

#1