YouTube 嵌入式播放器：使用 javascript 动态更改视频链接答案

【问题标题】：YouTube embeded player: change video link with javascript, dynamicallyYouTube 嵌入式播放器：使用 javascript 动态更改视频链接
【发布时间】：2011-02-07 00:58:10
【问题描述】：

这是我的 html 代码的一部分（标有 django-template 语言变量的视频 url）：

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

和 JS 代码（使用 jQuery 1.4.x）

$(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 播放器仍然显示旧视频。

【问题讨论】：

标签： jquery youtube

【解决方案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 代码上）负责处理所有跨平台 Flash 嵌入问题。

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

【讨论】：

【解决方案2】：

尝试隐藏/显示标签。

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

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

【讨论】：

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

【解决方案3】：

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

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

【讨论】：