YouTube embeded player: динамически менять ссылку на видео с помощью 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>

и 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 все еще показывает старое видео.

Answer 1

Вместо использования прямого кода YouTube, я бы использовал swfobject для кросс-платформенного встраивания флэш. Так что если у вас есть видео, расположенное в этом теге:

<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) решает все проблемы кросс-платформенного встраивания флэш-памяти.

Кроме того, вы можете использовать API JavaScript YouTube , чтобы изменить видео на лету.

Answer 2

Попробуйте скрыть / показать тег.

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

Это перезапускает весь Flash-фильм в большинстве браузеров.

Answer 3

Я думаю, вы должны использовать window.load вместо ready:

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