YouTube API,jQuery attr不会交换元素属性

时间:2010-04-27 00:23:01

标签: php jquery youtube element attr

JavaScript(jQuery)

function display_youtube(new_url) {
    $('#movie_url').removeAttr('value');
    $('#embed_url').removeAttr('src');
    $(document).ready(function() {
        $('#movie_url').attr('value', new_url);
        $('#embed_url').attr('src', new_url);
        $('#shade').css('display', 'block');
        $('#youtube_player').css('display', 'block');
        $('#exit_youtube').css('display', 'block');
    });
}

HTML

<object width="720" height="480">
<param id="movie_url" name="movie" value="http://www.youtube.com/v/_eaToCSn7yU?f=user_uploads&app=youtube_gdata&autoplay=0" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed id="embed_url" src="http://www.youtube.com/v/_eaToCSn7yU?f=user_uploads&app=youtube_gdata&autoplay=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="720" height="480" />
</object>

超链接

<a href="javascript:display_youtube('http://www.youtube.com/v/_eaToCSn7yU?f=user_uploads&app=youtube_gdata&autoplay=1');">Click Here for Fun!</a>

我所做的是在我的用户频道上解析YouTube的视频API。

上面的超链接是php生成的,意味着触发上面的JavaScript函数,并且交换来自ids“movie_url”和“embed_url”中包含的属性的url就像它应该在FF中一样工作,但IE只会执行。 css命令。

我的猜测是IE不喜欢我为PARAM和EMBED分配ID。

1 个答案:

答案 0 :(得分:0)

修正了它!我的新代码如下所示。问题是IE处理Flash参数(不会对对象的params执行异步刷新)。它在FF中运行正常,因为它嵌入了视频,而不是将其作为对象处理。

新Javascript

function display_youtube(new_url) {
    $('#object_url').replaceWith('<param id="object_url" name="movie" value="' +new_url+ '" />');
    $('#embed_url').replaceWith('<embed id="embed_url" src="' +new_url+ '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="720" height="480" />');
    $('#shade').css('display', 'block');
    $('#youtube_player').css('display', 'block');
    $('#exit_youtube').css('display', 'block');
}
function exit_youtube() {
    $('#object_url').replaceWith('<param id="object_url" />');
    $('#embed_url').replaceWith('<embed id="embed_url" />');
    $('#shade').css('display', 'none');
    $('#youtube_player').css('display', 'none');
    $('#exit_youtube').css('display', 'none');
}

新HTML

<object width="720" height="480">
    <param id="object_url" />
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <embed id="embed_url" />
</object>

我认为这里的技巧是强制IE依赖jQuery的指令,然后才能对对象执行任何操作,实际上阻止IE从一开始就缓存任何参数。 FTW!