simple-example.html （HTMLsource）
<!--
A minimal setup to get you started. This configuration is the same
as in our Quick Start documentation:
http://flowplayer.org/player/quick-start.html
-->
<head>
<title>Simple Flowplayer example</title>
<!--
include flashembed - which is a general purpose tool for
inserting Flash on your page. Following line is required.
-->
<script type="text/javascript" src="/js/flashembed.min.js"></script>
<!-- some minimal styling, can be removed -->
<link rel="stylesheet" type="text/css" href="/css/common.css"/>
<script>
/*
use flashembed to place flowplayer into HTML element
whose id is "example" (below this script tag)
*/
flashembed("example",
/*
first argument supplies standard Flash parameters. See full list:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
*/
{
src:'../FlowPlayerDark.swf',
width: 400,
height: 290
},
/*
second argument is Flowplayer specific configuration. See full list:
http://flowplayer.org/player/configuration.html
*/
{config: {
autoPlay: false, autoBuffering: true, controlBarBackgroundColor:'0x2e8860',
initialScale: 'scale',
videoFile: 'http://blip.tv/file/get/N8inpasadena-Flowers457.flv'
}}
);
</script>
</head>
<div id="page">
<h1>Simple Flowplayer <em>example</em></h1>
<p>
View source the page source to see how Flowplayer is installed.
</p>
<!-- this DIV is where your Flowplayer will be placed. it can be anywhere
-->
<div id="example"></div>
<p>
<button onClick="location.href='index.html'">back to examples</button>
</p>
</div> |
FlowPlayer-2.2.4 Build
【解説】
FlowPlayer-2.2.4.zip は、
ここから、ダウンロードできます。
もしくは、ここから。
解凍したフォルダの中にあるexamplesフォルダから、
simple-example.htmlを見つけ出し、これを雛形として使います。
雛形HTMLソースを左に示します。
完成までの流れは、簡単です。
まづ作成したい HTMLを用意する。
雛形の<head></head>間 の緑色とピンク色のソースを、
コピーして用意したHTMLの<head></head>に貼り付ける。
同様にして今度は、一番下にある
赤色の部分をコピーして、<body></body>間の
動画を表示させたい任意の場所に貼り付ける。
これで、ほとんど90%以上 出来上がりです。
あとはFLV動画ファイルのパスとかを、環境に合わせて設定してあげれば、
とりあえず、これで動画を再生させる事ができます。
貼り付けが終わったら、 ご自身のHTMLの
<scripts></scripts>の間を、
自分好みにカスタマイズしていきます。 （例 ：下記の黄色部分）
<SCRIPT>
/*
use flashembed to place flowplayer into HTML element
whose id is "example" (below this script tag)
*/
flashembed("example",
/*
first argument supplies standard Flash parameters. See full list:
http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701
*/
{
src:'../FlowPlayerDark.swf',
width: 370,
height: 250
},
/*
second argument is Flowplayer specific configuration. See full list:
http://flowplayer.org/player/configuration.html
*/
{config: {
autoPlay: false,
autoBuffering: true,
controlBarBackgroundColor:'0x555555',
controlsOverVideo: 'locked',
controlBarBackgroundColor: -1,
controlBarGloss: 'none',
showMenu: false,
splashImageFile: /'img/2m.jpg',
showVolumeSlider: false,
showMuteVolumeButton: false,
initialVolumePercentage:'20',
initialScale: 'scale',
videoFile: '../douga/douga.flv'
}}
);
</SCRIPT>
上記は、ご覧のこのページに近い設定です。
最後に、出来上がったHTMLとimgファイル、jsファイル、cssファイルを
サーバにUPして、アクセスしてみる。
ページにアクセスしても表示されない場合は、
.swf .flv .css .js のパスや ” ’ , . の設定の見直しをする。
慣れてきたら、examplesフォルダの中の別の雛形をベースにした
FlowPlayerの構築に挑戦してみてください。
追記 サーバーにUPした必要のないファイルは、削除しておいた方が無難です。
参考 FLV動画GETの方法
YouTube.comのflv動画を簡単にダウンロードする。
＊ FlowPlayer-2.2.4 + swfobject ページは、こちら。
このサイトでは、Flowplayer 3.0 Build ページを追加しました。
※上記の記載は、あくまでも個人的な記録です。
参考程度でご覧ください。すべて自己責任で行うことが、お約束。
good luck !!
管理人
|
