HTML5 で追加された video タグ を用いて動画を再生する方法。
私は 趣味でプログラミングをしていて、あまりWeb関連 ( JavaScript, PHP etc. ) には詳しくないですが。
HTML 4.0 はかろうじて使える ( 文法的にはちょっとアレですが。 ) のですが、HTML5 についてはまったく詳しくありません。
HTML5で追加されたvideoタグを使って動画を再生したいのですが、私の探し方が悪いのか、見つけられませんでした。
videoタグ内に sourceタグを使って動画を指定するところまではできたのですが、私がしたいことは
- まず画像 ( DVDのジャケットにあたるやつ。 ) を表示
- 1の近くにあるボタンを押すと 別ウィンドウが開き、動画を再生する
のように 「Playerとしてのページ に 引数として 動画ファイルパスを渡し、再生してもらう」です。
画像表示用と 動画再生用の2ページ作ればいい... 確かにそうですが、
汎用性を持たせるために、
たとえば、
JavaScript
1// 外部 JavaScriptファイル ( player.js ) 2 3function PlayVideo( filepath ){ 4 // ここで 引数として受け取った 動画ファイルパス を別ウィンドウで開く 5}
HTML
1 2<!-- 画像表示の方のボタン --> 3 <!-- 動画1 用 --> 4 <button type="button" onclick="PlayVideo('abc.mp4')">動画1</button> 5 <!-- 動画2 用 --> 6 <button type="button" onclick="PlayVideo('cde.mp4')">動画2</button> 7 <!-- 動画3 用 --> 8 <button type="button" onclick="PlayVideo('efg.mp4')">動画3</button>
のようにして、JavaScriptで 再生する動画を決定し、動画再生する という感じです。
これって無理でしょうか。
それともやり方があるのでしょうか。
宜しくお願い致します。
[一応 やったコード1]:
HTML
1<!-- 一応 TestABC.mp4 があるとして。--> 2<html> 3<head> 4 <title>動画を再生できるかテスト</title> 5</head> 6<body> 7 <video id="TestA" controls width=500 height=500> 8 <source src="TestABC.mp4"> 9 </video> 10</body> 11</html>
[一応 やったコード2]:
HTML
1<!-- 2 videoタグの開始タグから終了タグまでを一つの文字列として 3 document.writeでhtmlに書き込み 動画再生を試みる。 4 5 PlayMovie関数内で 動画ファイルパス等の情報を指定しているが、 6 後で引数として定義する。 7 ( そもそも、これでも動かないとどうしようもないため。 ) 8--> 9 10<html> 11<head> 12<title>動画を再生できるかテスト</title> 13 14<script language="JavaScript"> 15<!-- 16function PlayMovie(){ 17 filepath = "TestABC.mp4"; 18 19 var MovieStrID = "TestA"; 20 var width = 500; 21 var height = 500; 22 23 document.write( "<video id='", MovieStrID, "' controls autobuffer with='", width, "' height='", heigh, "'><source src='", filepath, "'></video>" ); 24} 25--> 26</script> 27 28 29</head> 30<body onload="PlayMovie()"> 31 32 33</body> 34</html>
2の方の結果 -> 表示なし。
※ 動画ファイルパスがそれぞれ違いますがそれぞれ正しいパスとして。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。