• 締切済み

ボタンで読み込むファイルを指定したいです

ホームページ製作中で、1分程度の動画を5つ見せたいです。 ボタンを5つ並べて、clickすると同一のページ内で指定された 動画ファイルを再生する方法は有るでしょうか? そんな方法が無ければ、 <iframe src="movie.html" height=300 width=300></iframe> のように、5つの動画を5つのページに埋め込んでiframeで 呼び出す!!って方法は可能ですか?? 押されたボタンで呼び出される"movie.html"が変更出来る様な 方法がございましたら教えて頂きたいです。 宜しくお願いします。

みんなの回答

  • benelli
  • ベストアンサー率51% (78/152)
回答No.1

とりあえずらしいものは作ったのですが、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>動画A <input type="radio" name="movsel" onclick="movinit('D:\\gg2.wmv')">動画B <input type="radio" name="movsel" onclick="movinit('D:\\gg3.wmv')">動画C <input type="radio" name="movsel" onclick="movinit('D:\\gg4.wmv')">動画D <input type="radio" name="movsel" onclick="movinit('D:\\gg5.wmv')">動画F </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>動画A <input type="radio" name="f" onclick="thismov.FileName='D:\\gg2.wmv'">動画B <input type="radio" name="f" onclick="thismov.FileName='D:\\gg3.wmv'">動画C <input type="radio" name="f" onclick="thismov.FileName='D:\\gg4.wmv'">動画D <input type="radio" name="f" onclick="thismov.FileName='D:\\gg5.wmv'">動画E </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以外の技術が必要なのでしょうか。 参考になれば幸いです。

roughrough
質問者

お礼

丁寧なレスありがとうございます。 教えて頂いた記述を参考にがんばって見ます。 ブラウザによって表示が違うって言うのが大変そぉですよね~ また結果報告させて頂きますねm(__)m

関連するQ&A

  • iframeで動画を埋め込み再生、リンクの貼り付け

    iframeで動画を貼り付けて自動再生させながら、動画のどこかをクリックすると別のページに飛ばす事は可能でしょうか? <iframe src="image/001.mp4" name="video" width="775" height="354" frameborder="0" ></iframe> この動画にリンクを埋め込むプログラムとかはありますか? よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 埋め込み動画の最初の画像を別のものにするには?

    youtube等の動画を埋め込み、さらにデフォルトのサムネイル表示(youtube等で再生前に表示される画像)を別の静止画に指定したいのです。さらにその静止画をクリックすれば動画再生されるように。 下記のソースで埋め込みはできるのですが、別の静止画を置き換えるような方法がわかりません。 よろしくお願いします。 <iframe src="//www.youtube.com/embed/xxxxxxxxxxxx" width="500" height="300" frameborder="0" allowfullscreen></iframe>

  • mpg形式の再生ボタン付きの動画を貼り付け方法

    ホームページにWindowsにもMacにも対応できるようにmpg形式で動画を貼り付けたいのですが、貼り付ける際に、コントローラーを表示して 再生ボタンを押したら動画が始まるようにしたいのですが、そのサイトページを開いたと同時に動画がはじまってしまいます。 ソースは <embed src=http://www.kikou-therapy.com/movie.mpg width="550" height="450" type=video/mpeg autostart="false" controller="true"> </embed> と貼り付けました。 wmv形式で、objectでソース入力をすると出来るのですが、、、。 よろしくお願いいたします。

  • フレーム内のリンク先を別ウィンドウに表示する

    お世話になります。 ページ内にフレーム領域を作りました。 フレーム内のリンクをクリックするとフレーム内で別ウィンドウが開きます。 <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"></iframe> 上の様に書きました。フレーム内のaaaaaa.html内のリンクをクリックするとフレーム内に別ウィンドウが開きます。 そうではなくて、_blankを使った様に別ウィンドウを開きたいのです。 <a href="aaaaaa.html内のURL"target="_blank" <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"></iframe> </a> <iframe src="aaaaaa.html"name="bbbbb"width="800"height="500"><a href="aaaaaa.html内のURL"target="_blank"</a></iframe> 上記の様にしても結果は同じでした。 RCCの知識が無いために、ページ内にブログのページを強引に表示しました。 よろしくお願いします。

  • perlで同時呼び出しができない

    現在、さくらインターネットを使っていますが、 PHPの同時呼び出しができず困っています。 iframeで5つのPHP画面を呼び出しているのですがうまくいきません。 内部に、同時アクセス禁止?の設定でもあるのではないかと思っています。 そこで、これを何とか回避する方法は無いでしょうか? 何か、これを克服した型はおられないでしょうか? 宜しくお願い致します。 <iframe src="sample/iframe_q.php?q=1" width="200" height="150"> <iframe src="sample/iframe_q.php?q=2" width="200" height="150"> <iframe src="sample/iframe_q.php?q=3" width="200" height="150"> <iframe src="sample/iframe_q.php?q=4" width="200" height="150"> <iframe src="sample/iframe_q.php?q=5" width="200" height="150">

    • ベストアンサー
    • CGI
  • javascript でタイムラグを表示させて表示したい

    表示したいホームページが5つありますが、同時呼び出しは無理でした。 そこで、javascriptを使って、0.3秒or1秒置きに呼び出したいのですが、 javascriptは全く分からないためどなたか、教えていただけないでしょうか? ---現在のhtml---- <iframe src="sample/iframe_q.php?q=1" width="200" height="150"> <iframe src="sample/iframe_q.php?q=2" width="200" height="150"> <iframe src="sample/iframe_q.php?q=3" width="200" height="150"> <iframe src="sample/iframe_q.php?q=4" width="200" height="150"> <iframe src="sample/iframe_q.php?q=5" width="200" height="150"> --------------- 0.3秒したら、1つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、1つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、2つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、3つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、4つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、5つ目の<iframe>を実行して、表示する。 という具合です。 何卒、宜しくお願い致します。

  • インラインフレームの高さ

    IFRAMEの高さをIFRAME内のページに合わせて引き伸ばしたいのですが、そういうことが出来るのでしょうか。 <iframe src="URL" scrolling="no" frameborder="0" width="900" height="???"> 宜しくお願いします。

  • <iframe 内のスクロール

    <iframe タグを使って、JavaScript でスクロールをさせたいの ですが、 <iframe width=150 height=200 src="test.htm"></iframe> 上記これだとスクロールしてくれるのですが、 <iframe width=150 height=200 src="http;//google.co.jp"></iframe> これだとスクロールしてくれません。 JavaScript は scroll(); を使ってます。 これは自前ページだけで、既存サイトのスクロールは無理なのでしょうか。 (http: だとアンカーになって見にくいので http; にしてます)  

  • INFRAMEについて教えてください

    ホームページビルダーでサイトを作っています。メニューコンテンツが多いためにINFRAMEを作りましたがうまくいきません。教えてください。 index.htmlのページに<body>から</body>に <NOLAYER> <IFRAME name="sample" border="0" frameborder="0" marginheight="0" marginwidth="0" src="sample.html" width="220" height="3000" scrolling="no" align="left"></IFRAME></NOLAYER> <ILAYER src="sample.html" width="220" height="3000" scrolling="no"></ILAYER> を記入。 sample.htmlのページに <TABLE width="220" height="600" border="0"> <tr><td><IMG src="bullet019.gif" width="16" height="16" border="0"><A href="index.html">HOME</A></td></tr>以下省略。 indexページではメニューページがうまく貼り付けられました。が、HOMEをクリックするとINFRAME枠内にindexページが表示されます。どうすればよいでしょうか?

  • 目次つねに表示をするには・・・!?

    本を読んで <div id="menu" class="gureisyouClass"> <nolayer><IFRAME name="sample" border="0" frameborder="0" marginheight="0" marginwidth="0" src="iframe.html" width="210" height="720" scrolling="no"></IFRAME> </nolayer><ilayer src="iframe.htm" width="210" height="720" scrolling="no"></ilayer></div> 「iframe.html」という目次ページを作ってどのページをクリックしても目次をつねに表示するようにしました。けれど、目次が増えていくとheight="720"を増やす作業を全ページやり直していかなければなりません。いろんな方のHPソースをみるとdivの中にテーブルで目次項目を全ページ記述してあります。目次が増える都度みなさん全ページやり変えてらっしゃるのですか?どうすればいいのでしょうか、とても困っています。

    • ベストアンサー
    • HTML

専門家に質問してみよう