YouTube API、jQuery attrは要素属性を交換しません

Question

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と同じように機能しますが、つまり.CSSコマンドのみを実行します。

私の推測では、IEはIDをParamに割り当てて埋め込んでいるのが好きではないということです。

Answer 1

修正しました！私の新しいコードは以下にリストされています。問題は、IEのフラッシュパラメーターの処理でした（オブジェクトのパラメーターの非同期リフレッシュは実行されません）。ビデオを埋め込んでいて、オブジェクトとして処理していないため、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がオブジェクト上で何でもアクションを実行する前に、IEにjQueryからの指示に依存するように強制することだったと思います。 ftw！