HTML5で動画を動的に表示する方法

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>