1. TOPページに戻る
  2. Javascriptその他
  3. 動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlayer「NonverBlaster」

動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlayer「NonverBlaster」

動画と言えば最近はYoutubeにアップしたり、ニコ動やその他動画サイトにアップして見ることが多いと思いますが、 サイトに直接設置することも可能です。その際に便利なのが「NonverBlaster」です。

デモページ

以下からデモページに行けます。いろいろ並んでますが、ようはいろいろ設定できるよ的な感じかと思います。

Youtubeも読み込めたりするんですが、他にもmp3やmp4やmovなども使えます。

ダウンロード

ダウンロードは以下のページのDownload the Playerというところから。

使い方

主に使うファイルは以下の2つです。

  • swfobject.js
  • NonverBlaster.swf

そして、こちらを以下のように記述して使います。


<div id="videoPlayer"></div>
<script type="text/javascript">
var flashvars = {};
flashvars.mediaURL = "media/nice-flowers-hd.mov";
flashvars.teaserURL = "media/nice-flowers.jpg";
flashvars.allowSmoothing = "true";
flashvars.autoPlay = "false";
flashvars.buffer = "6";
flashvars.showTimecode = "true";
flashvars.loop = "false";
flashvars.controlColor = "0x3fd2a3";
flashvars.controlBackColor = "0x000000";
flashvars.scaleIfFullScreen = "true";
flashvars.showScalingButton = "true";
flashvars.defaultVolume = "100";
flashvars.crop = "false";
var params = {};
params.menu = "false";
params.allowFullScreen = "true";
params.allowScriptAccess = "always"
var attributes = {};
attributes.id = "nonverblaster";
attributes.bgcolor = "#000000"
function embedSWF(){
swfobject.embedSWF("NonverBlaster.swf", "videoPlayer", "500", "281", "9", "js/expressinstall.swf", flashvars, params, attributes);
}
embedSWF();
</script>

デモページより抜粋です。expressinstall.swfはなくても手元では動いてました。ここにたくさん並んでるパラメーターは 配布サイトのUsageに載っていますので、使いやすいように調整して下さい。枠の色とか自動再生をどうするとかの設定になります。