Webページで簡単に動画や音楽を再生する

FLV Playerで動画を再生する

2012年11月10日

次のサイトへ行ってFlashベースのプレーヤーをダウンロードしてください。
FLV Player
http://flv-player.net/
http://flv-player.net/players/maxi/download/

ダウンロード画面
右クリックでplayer_flv_maxi.swfをファイルに保存します。保存場所はhtmlファイルと同じ階層(フォルダ)です。このプレーヤーでMP4形式の動画も再生できます。

分かりやすいように、関係ファイルはすべて同じフォルダに置いています。
home(フォルダ)
 ├ video.html(動画を埋め込むhtmlファイル)
 ├ player_flv_maxi.swf(埋め込み型プレーヤー)
 ├ sample01.flv(再生する動画)
 ├ sample01.txt(設定ファイル)
 └ sample01.jpg(スタート時の画像:Preview画像)

FLV Player 設定ファイルを作る

テキストエディタを起動して次のように記述します。
flv=sample01.flv
startimage=sample01.jpg
autoplay=0
volume=50
showstop=1
showvolume=1
showtime=1
showiconplay=1

記述が終わったらsample01.txtという名前で保存します。

各項目はこのようになっています。
flv=sample01.flv:再生する動画ファイル名
startimage=sample01.jpg:Preview画像
autoplay=0:自動再生 0:しない / 1:する
volume=50:音量
showstop=1:ストップボタン表示 0:しない / 1:する
showvolume=1:音量調整バー表示 0:しない / 1:する
showtime=1:時間表示 0:しない / 1:する
showiconplay=1:画面上の再生アイコン表示 0:しない / 1:する

FLV Playerを組み込む

objectでプレーヤーを埋め込みます、HTMLソースに直接記述してください。

<object type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="320" height="240">
<param name="movie" value="player_flv_maxi.swf">
<param name="FlashVars" value="config=sample01.txt">
</object>

config=sample01.txtで先に作成した設定ファイルを読み込んでいます。

Demo


参考:HTML5のVIDEOタグ

2014年06月09日追加

Firefoxで再生されない場合は、動画ファイルが入っているフォルダに.htaccessを置く。

.htaccess
AddType video/ogg .ogg .ogv
AddType audio/ogg .ogg
AddType application/ogg .ogg .ogv

TAG index Webサイト
HTML5/埋め込み/video要素 プラグインを使わずに動画を再生する


MP3 Playerで音楽を再生する

2012年11月10日

次のサイトへ行ってFlashベースのプレーヤーをダウンロードしてください。
MP3 Player
http://flash-mp3-player.net/
http://flash-mp3-player.net/players/maxi/download/

ダウンロード画面
右クリックでplayer_mp3_maxi.swfをファイルに保存します。保存場所はhtmlファイルと同じ階層(フォルダ)です。

分かりやすいように、関係ファイルはすべて同じフォルダに置いています。
home(フォルダ)
 ├ audio.html(音楽を埋め込むhtmlファイル)
 ├ player_mp3_maxi.swf(埋め込み型プレーヤー)
 ├ sample01.mp3(再生する音楽)
 └ sample_m01.txt(設定ファイル)

MP3 Player 設定ファイルを作る

テキストエディタを起動して次のように記述します。
mp3=sample01.mp3
autoplay=0
loop=0
volume=50
showstop=1
showvolume=1

記述が終わったらsample_m01.txtという名前で保存します。

各項目はこのようになっています。
mp3=sample01.mp3:再生する音楽ファイル名
autoplay=0:自動再生 0:しない / 1:する
loop=0:ループ再生 0:しない / 1:する
volume=50:音量
showstop=1:ストップボタン表示 0:しない / 1:する
showvolume=1:音量調整バー表示 0:しない / 1:する

MP3 Playerを組み込む

objectでプレーヤーを埋め込みます、HTMLソースに直接記述してください。

<object type="application/x-shockwave-flash" data="player_mp3_maxi.swf" width="200" height="20">
<param name="movie" value="player_mp3_maxi.swf">
<param name="FlashVars" value="config=sample_m01.txt">
</object>

config=sample_m01.txtで先に作成した設定ファイルを読み込んでいます。

Demo

© フリーBGM・音楽素材MusMus

補足(FLV/MP3 共通)

簡単に組み込むための基本的な手順をご紹介しました。設定などの詳細は配布先のサイトでご確認ください。Sourceのzipファイルをダウンロードして解凍すればサンプルも入っています。


埋め込み型 MP3 Player いろいろ(追加)

2013年10月17日追加

音量調整ができるものをいくつか選んでみました。ご興味のある方はこちらのページをご覧ください。→ Webページで音楽を再生して遊ぶ


ページトップへ ページトップへ

ページトップへ