画像を埋め込みビデオに置き換えます

Question

こんにちは、Webページを変更して、読み込みを高速化しようとしています。 私はいくつかのビデオが埋め込まれているので（blip.tvですが、それが役立つ場合はyoutubeに変更できます）、ビデオがあるはずの場所に画像をロードし、クリックすると画像をビデオに置き換えて再生を開始することができますか？全てのページ）。 私はこれを見たことがあると思いますが、もうどこにもそれを見つけることができません！ 現在、私が使用する埋め込みコードは次のとおりです。

<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>

ありがとう

Answer 1

手っ取り早く汚い：埋め込みコードをグローバル変数としてどこかに設定することができます：

<script type="text/javascript">
    var embedCode = '<object data="http://blip.tv/play/gYMo_vAmAA" type="application/x-shockwave-flash" height="500" width="600"><param name="src" value="http://blip.tv/play/gYMo_vAmAA"><param name="allowfullscreen" value="true"></object>'
</script>

次に、画像をコンテナdivに入れ、コンテナのinnerHTML onclickを置き換えます：

<div id="videocontainer">
    <img src="yourimage.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" height="500" width="600" />
</div>

Answer 2

SWFObjectと呼ばれるGoogleコードプロジェクトがあり、必要なものに最適です。これは、フラッシュをロードするためのクロスブラウザJavaScriptライブラリです。たとえば、誰かが画像をクリックしたときに、画像をフラッシュビデオに置き換えることができます。