YouTube嵌入播放器：使用JavaScript动态更改视频链接

Question

这是我的html代码的一部分（视频url使用django模板语言变量标记）：

<div class="mainPlayer">
        <object width="580" height="326">
            <param name="movie" value="{{main_video.video_url}}"></param>
            <param name="allowFullScreen" value="true"></param>
            <param name="allowscriptaccess" value="always"></param>
            <embed src="{{main_video.video_url}}" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="580" height="326"></embed>
        </object>
    </div>

以及使用jQuery 1.4.x的JS代码

$(document).ready(function(){ .....
$(".activeMovie img").live("click", function(){
    video_url = ($(this).parent().find('input').val());
    $('.mainPlayer').find('param:eq(0)').val(video_url);
    $('.mainPlayer').find('embed').attr('src', video_url);
})
...
})

这种算法在ff 3.6.3中运行良好，但在chrome4或opera 10.x中没有成功，src和value已更改，但YouTube播放器仍显示旧视频。

- Anton Koval'

Answer 1

与其使用直接的YouTube代码，我会使用swfobject来进行跨平台flash嵌入。如果你想在这个标签中放置视频：

<div id='myvideo'></div>

要嵌入您的YouTube视频，按照以下步骤操作：

swfobject.embedSWF(<>, "myvideo", "580", "326", "9.0.0");

要更改视频，请在javascript中执行以下操作：

swfobject.removeSWF("myvideo");
swfobject.embedSWF(<<new video url>>, "myvideo", "580", "326", "9.0.0");

swfobject（托管在Google Code上）可以解决跨平台Flash嵌入问题。

或者，您可以使用YouTube JavaScript API来实时更改视频。

- Keltex

Answer 2

尝试隐藏/显示标签。

$('div.mainPlayer object').hide().show();

这将在大多数浏览器中重新启动整个Flash电影。

- adamJLev

---

谢谢，正确的解决方案！但我稍作修改： $('.mainPlayer object').hide(); setTimeout(function(){$('.mainPlayer object').show();},100); 需要一些延迟。 - Anton Koval'

Answer 3

我认为你应该使用 window.load 而不是 ready：

$(window).load(function(){
   // .......
}

- Sarfraz