動画をページ内に埋め込むにはどうしたらいいの?

動画の再生方法で、
ダウンロードによるメディアプレーヤーを再生する方法ではなくて、
TVのように埋め込み式の再生方法について説明します。


実現方法は、ダイナミックHTMLを使って、記述します。
技術的には、ActiveXによるコンポーネントの呼び出しです。
一見難しく聞こえますが、実は簡単な手順で作れます。
■手順1 動画ファイルを作る
wmv形式の動画ファイルを作ります。
wmv形式とは、Windows Mediaビデオファイル形式です。
データ量の目安は、208×160ピクセル 4分43秒 7.05MB
程度です。
動画作成のポイントは、1フレーム目を真っ黒にしないことです。
1フレーム目が真っ黒ですと、スタートボタンを押す前の
サンプル動画画面が真っ黒になってしまいます。
■手順2 ビデオ再生リストを作る
動画ファイルをそのままリンクすると、
右クリックでファイルを保存できてしまうので、
再生リストファイルを作ります。
再生リストファイルは、asx形式のファイルです。
新規でテキストファイルを作って、
拡張子を.txtから.asxに変えるだけです。
ファイルの中身は次のように書きます。
HREFの値は動画ファイル名を入れるだけです。
………………………………………………..
<ASX version=”3″>
<Entry><Ref HREF=”daijest.wmv”/>
</Entry></ASX>
………………………………………………..
■手順3 HTMLに埋め込む
再生リストファイルができあがったら、
次は、ホームページに埋め込みます。
埋め込みたい場所のHTML文の場所に、以下の文章をペーストします。
………………………………………………..
<object id=”MediaPlayer1″
classid=”CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95″ standby=”Loading
Microsoft Windows Media Player components…”>
<param name=”Filename” value=”daijest.asx”>
<param name=”AnimationAtStart” value=”true”>
<param name=”AutoStart” value=”false”>
<param name=”AutoRewind” value=”true”>
<param name=”Balance” value=”0″>
<param name=”PlayCount” value=”true”>
<param name=”ShowControls” value=”true”>>
<param name=”ShowPositionControls” Value=”true”>
<param name=”ShowStatusBar” Value=”true”>
<param name=”ShowTracker” Value=”true”>
<param name=”ShowAudioControls” value=”true”>
<param name=”ShowDisplay” value=”false”>
<param name=”ShowGotoBar” value=”false”>
<param name=”Volume” value=”0″>
<embed width=”320″ height=”240″ src=”daijest.asx” showTracker=1
showPositionControls=0 controller=”true” autoplay=”true”
playeveryframe=”false” pluginspage=”plugin.html”></object>
………………………………………………..
最後に、以下のファイルをFTPでアップしたら終わりです。
・プレビューソースを追加したHTMLファイル
・wmv形式の動画ファイル
・asx形式の再生リストファイル
・Windows Media Playerアイコン(dl_wmp.gif 必要なら)

シェアする

フォローする