Amazonの動画について

2008/12/09 18:59

このQ&Aのポイント

Amazonの動画についての仕組みとは何でしょうか？
Amazonの動画をホームページに取り入れたい場合の方法について教えてください。
Amazonの動画視聴の仕組みについて詳しく教えてください。

burazer
お礼率53% (7/13)

JavaScript
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#113783

2008/12/11 04:02 回答No.2

２回目の回答です。１回目の回答を見ながら読んでください。対応はIE4～とネスケだけです。【ソースの意味】・動画の入れ替えボディに書いてある <div id="myMovie" style="display:none"> <embed src="HTTP://jp.youtube.com/watch?v=otSDoCLmpMM" ></embed> </div> について説明します。divで囲んでIDを指定することで、divに囲まれている部分が参照、変更できるようになります。style="display"は今は無視してください。次に、kan関数に書いてある swfTag = '<embed src="'+swfName+'">'; document.getElementById("myMovie").innerHTML = swfTag; では動画の入れ替えを行っています。下の行にあるinnerHTMLと言うのは、オブジェクトのソースを書き換えることができると言う物です。ただし、IE４～とネスケしか対応してません。その次はswfTagと言う変数で書き換えるソース作って入れて、それをinnerHTMLを使ってソースを書き換えます。これで動画が切り替わります。・メニューの背景の色これはCSSのテーブルとJavaScriptを組み合わせて使っています。テーブルを３つ用意して、始めに色をつけておきたいテーブルの<TR>に<TR bgcolor="***">と背景色を指定しておきます。そしてテーブルの<TD>にIDをそれぞれ指定し、kan関数の document.all('t').style.backgroundColor=a; document.all('t1').style.backgroundColor=b; document.all('t2').style.backgroundColor=c; で、背景色を変更できるようにします。変数a,b,cにはカラーコードを指定しています。それぞれのテーブルの中の<A>タグでkan関数を呼び出す時に、引数には(1)切り替える動画のパス、(2)(3)(4)には、自分の色を指定している変数には白以外のカラーコードを、それ以外は白にするためのカラーコードを指定します。・始めに画像を表示する <img src>と<embed>を囲っているdivにstyle="display:***"と書いてあるのですが、これは、表示/非表示を切り替えるCSSです。***がnoneなら非表示で、***がblockなら表示されます（ブロックなのにね）。つまり最初は画像が表示してあって、embedは非表示になっているのです。これをkan関数の if(document.getElementById('gazou').style.display == 'block') {document.getElementById('gazou').style.display= 'none';document.getElementById('myMovie').style.display = 'block';}else{} で操作します。if構文で画像が表示されていたら（blockだったら）、gazouというIDを指定しておいた画像を非表示(=none)に、myMovieというIDをしておいた動画を表示(=block)するように切り替えます。もう表示/非表示を切り替える必要はないので、elseは空にします。・・・これでソースの解説は終わりです。質問にあったソースを解読するのが面倒で後回しにしていたのを今さっき読んだのですが、IE4～以外の主要ブラウザでも大丈夫なように（operaとかFireFoxとか）innerHTMLは使わず、全て表示/非表示の切り替え(none/block)でやっていました。つまり、画像１つと動画３つが常に用意してあり、displayがblock（＝表示）になっているのは１つだけ、他の物を表示するときは自分のdisplayをblockにすると同時に他のdisplayをnone（＝非表示）に切り替える、と言う風になっていました。主要ブラウザが対応していないからそっちの方がいいのかもしれませんね。

質問者

お礼 2008/12/12 09:08

解説までしてくださってありがとうございました。大変よく解りました。

その他の回答 (1)

noname#113783

2008/12/11 01:57 回答No.1

【必読】とりあえずソースです。次の回答で解説します。ソース内のパス（html）に反応して文字が化けてしまうので、一部のhtmlとwwwを大文字にしました。大文字でも小文字でもどっちでも変わりませんが、気になったらに変えてください。 <html> <head> <title>テスト</title> <script type="text/javascript"></script> </head> <body> <TABLE><TR bgcolor="pink"><TD ID=t><a href="javascript:kan ('HTTP://WWW.youtube.com/v/otSDoCLmpMM&hl=ja&fs=1','#fff0f0','#ffffff','#ffffff')" >動画１</a></TD></TR></TABLE> <TABLE><TR><TD ID=t1><a href="javascript:kan ('HTTP://WWW.youtube.com/v/Evslmw0LN3k&hl=ja&fs=1','#ffffff','#fff0f0','#ffffff')" >動画２</a></TD></TR></TABLE> <TABLE><TR><TD ID=t2><a href="javascript:kan ('HTTP://WWW.youtube.com/v/8W3za6HIMR8&hl=ja&fs=1','#ffffff','#ffffff','#fff0f0')" >動画３</a></TD></TR></TABLE> <div id="myMovie" style="display:none"> <embed src="HTTP://jp.youtube.com/watch?v=otSDoCLmpMM" ></embed> </div> <div id="gazou" style="display:block"> <img src="***" width="192" height="192"> </div> </body> </html>