- 締切済み
ボタンで読み込むファイルを指定したいです
ホームページ製作中で、1分程度の動画を5つ見せたいです。 ボタンを5つ並べて、clickすると同一のページ内で指定された 動画ファイルを再生する方法は有るでしょうか？ そんな方法が無ければ、 <iframe src="movie.html" height=300 width=300></iframe> のように、５つの動画を５つのページに埋め込んでiframeで 呼び出す!!って方法は可能ですか?? 押されたボタンで呼び出される"movie.html"が変更出来る様な 方法がございましたら教えて頂きたいです。 宜しくお願いします。
- roughrough
- お礼率43% (7/16)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- benelli
- ベストアンサー率51% (78/152)
とりあえずらしいものは作ったのですが、Firefoxだと表示が変になったりおかしいですね…… 以下、動画ファイル「D:\gg1.wmv」などがあるものとします。 ------------------------------ <html> <head> <title>動画再生セレクト</title> </head> <script type="text/javascript"> <!-- function movinit(movsel) { thismov.innerHTML='<embed src=\"' + movsel + '\" width=\"640\" height=\"480\">' } //--> </script> <body> <div id="thismov" width="700" height="540"> <embed src="D:\gg1.wmv" width="640" height="480"> </div> <form id="movcont"> <div> <input type="radio" name="movsel" onclick="movinit('D:\\gg1.wmv')" checked>動画Ａ <input type="radio" name="movsel" onclick="movinit('D:\\gg2.wmv')">動画Ｂ <input type="radio" name="movsel" onclick="movinit('D:\\gg3.wmv')">動画Ｃ <input type="radio" name="movsel" onclick="movinit('D:\\gg4.wmv')">動画Ｄ <input type="radio" name="movsel" onclick="movinit('D:\\gg5.wmv')">動画Ｆ </div> </form> </body> </html> ------------------------------ 最初OBJECT要素を使用してがんばって動画選択や再生ボタンなどを作ったのですが、IEとFirefoxではHTMLの記述構文が異なるため挫折しました。 正直embed要素やinnerHTMLメソッドを使うのは気が引けるのですが、ほとんどのブラウザで一応動くものとしてアップしました。 ブラウザの種類や画像形式などが限定されればもっと良いのができるのですが、IEだけで良いのでしたら以下のでもよいかと思います。 ------------------------------ <html> <head> <title>動画再生セレクト</title> </head> <body> <object id="thismov" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="D:\gg1.wmv"> <param name="AutoStart" value="true"> <param name="ShowControls" value="false"> </object> <form id="movcont"> <div> <input type="radio" name="f" onclick="thismov.FileName='D:\\gg1.wmv'" checked>動画Ａ <input type="radio" name="f" onclick="thismov.FileName='D:\\gg2.wmv'">動画Ｂ <input type="radio" name="f" onclick="thismov.FileName='D:\\gg3.wmv'">動画Ｃ <input type="radio" name="f" onclick="thismov.FileName='D:\\gg4.wmv'">動画Ｄ <input type="radio" name="f" onclick="thismov.FileName='D:\\gg5.wmv'">動画Ｅ </div> <div> <input type="button" value="再生" onclick="thismov.play()"> <input type="button" value="停止" onclick="thismov.stop(); thismov.CurrentPosition=0;"> <input type="button" value="一時停止" onclick="thismov.pause()"> </div> </form> </body> </html> ------------------------------ やはり、柔軟な対応をするためにはFlashやJavaAppletほかHTML以外の技術が必要なのでしょうか。 参考になれば幸いです。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
丁寧なレスありがとうございます。 教えて頂いた記述を参考にがんばって見ます。 ブラウザによって表示が違うって言うのが大変そぉですよね～ また結果報告させて頂きますねm(__)m