1

ウェブページで YouTube 動画の遅延読み込みを実装したいと考えています。このために、HTML コメントに YouTube の iframe コードを含む a-Tag を用意しました。さらに、コメント タグを置き換えて YouTube コードをアクティブにする onclick イベントがあります。

以下は HTML の例です。

<a href="http://www.youtube.com/watch?v=KC2zbOwbeEs&#038;hd=1" class="video-in-link" style="background:url('http://i.ytimg.com/vi/KC2zbOwbeEs/hqdefault.jpg') no-repeat center center; width:500px; height:281px;" onclick="videoInLink(this);">
<!-- xxltxxiframe width="500" height="281" src="http://www.youtube.com/embed/KC2zbOwbeEs?fs=1&#038;feature=oembed&#038;autoplay=1" frameborder="0" allowfullscreenxxgtxxxxltxx/iframexxgtxx -->
</a>

適切な JS は次のとおりです。

function videoInLink(anchor){
    anchor.innerHTML = anchor.innerHTML.replace(/xxltxx/gi,'<');
    anchor.innerHTML = anchor.innerHTML.replace(/xxgtxx/gi,'>');
    anchor.innerHTML = anchor.innerHTML.replace(/<!--/,'');
    anchor.innerHTML = anchor.innerHTML.replace(/-->/,'');
    anchor.style.background="none";
    anchor.removeAttribute('href');
    anchor.onclick= null;                                               
    return false;
}

Firefox と Chrome ではすべて問題ありません。コンテンツが置き換えられ、ビデオが開始されます。IE8 でも置換が行われるようですが、ビデオは読み込まれません。

いくつかの組み合わせを試しましたが、成功しませんでした。

OK、Dunhamzzz の考えは正しかったので、コードをより簡単にしました。ビデオプロバイダーごとに独自の機能に変更し、実装が機能しました。したがって、IE8 では JavaScript の実行後にコードをアクティブにすることに問題はありませんが、IE8 では私のコードに問題がありました。

後でコードを改善するかもしれませんが、私の質問自体は答えられています。ありがとう。

4

1 に答える 1

0

代わりに、javascript を使用して iframe ノードを作成し、この innerHTML ハックを行う代わりにそれを親に追加することができます。簡単な例: http://www.developerfusion.com/thread/33979/creating-iframe-through-javascript/

于 2012-04-11T11:03:46.253 に答える