トイレのうず

Blogに動画(FLV)を設置しよう

当記事はアフィリエイト広告を掲載しています。

さてさて、前のエントリーにて動画を貼り付けてみた。 YouTube なんかを利用すれば簡単に貼り付けられるのは知っているのだけれど、なんとなく動画を再生し終わったあとの表示されるあの画面が嫌い。
ってことで、自力で設置を試みました。

まず始めに考えたのはむかーしから使っている QuickTime での配信。これなら慣れてるからすぐできるけれど、ムービーを見てもらうのに Windows ユーザーに QuickTime をインストールしてもらうのはなんとも煩わしい。ということで Flash で再生可能な FLV のフリーなプレイヤーがあるのではなかと思って探してみたら、いくつか見つかりました。

・ Flash Video Player
シンプルなプレイヤーだけれど、画像のサムネイルが表示できないのがちょっとさびしいので却下。(記事を書いてて後から気がついたのだけれど、 Flash Video Player が進化して JW FLV Media Player になったみたいですね。)
→ Dreammole Blog : Flash 動画を Web ページに貼り付ける

・ FlowPlayer
良さそうだったのだけれど、ヴァージョンが上がって設置の仕方が難しくなっているようで、ちょっとやってみたけどあきらめた。パラメーターの設置箇所がわからない。
→ VANESSA :[MovableType 4] FlowPlayer で 動画を配信 その 2
→ Akisato Web Site Annex : Web に複数の FLV を貼り付ける
→ NOBODY:PLACE : FlashVideo を WEB 上で再生する。

・ JW FLV Media Player
こっちのほうが設置が楽だった。 FLV だけでなく MP4 、 MP3 、 AAC 、 JPG 、 PNG 、 GIF も再生・表示できるらしい。動画のサムネイルを設置できるのもいいのでこれを設置してみました。
ダウンロードした解凍ファイルを見れば、設置方法も一目瞭然。簡単でよい。ということでこれを採用しました。
設置方法なんかは下記リンクを参考にさせていただきました。
→ NOBODY:PLACE : FLV を WEB 上で再生する(その 2 )

「 player.swf 」「 yt.swf 」「 swfobject.js 」を適当な場所にアップロードしてサンプルからコピペしたスクリプトを貼るだけ。 Blog なんで URL は絶対パスにしておいた。
後々のためにコピペしたソース貼っておく。

<div id="JWplayer">ご覧いただくには <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a> が必要です。</div>
<script type="text/javascript" src="http://www.1010uzu.com/js/swfobject.js"></script>
<script type="text/javascript">
	var s1 = new SWFObject("http://www.1010uzu.com/swf/jw/player.swf","ply","320","262","9","#FFFFFF");
	s1.addParam("allowfullscreen","true");
	s1.addParam("allowscriptaccess","always");
	s1.addParam("flashvars","file=(動画のURL)&image=(サムネイル画像のURL)");
	s1.write("JWplayer");
</script>

*追記 2012.8.23 *
Youtube からの配信に切り替えました。

関連記事

文字ちっちゃい!【 Yahoo! 編】
Web制作
thumbnail
ドリコム RSS が重すぎるのの応急処置
Web制作Webサービス
thumbnail
PHP 勉強中
Web制作
thumbnail
WordPress の携帯版に Google Analytics を設置してみる【 SELENE.GA4K 】
WordPressWeb制作
Google Analytics:ウェブプロパティIDとウェブサイトのURL
Seesaa blog のタグクラウドが Windows IE から見たときに行間が狭くなる件
Web制作
Windows IEの元の表示
blog 、 HP の移転を考えていた
Web制作
thumbnail

コメントを書く