動画をwebで公開する方法

1.FLOWplayerの場合



http://flowplayer.org/index.html
上記URLからダウンロード・解凍し、サーバ上にアップロードする。
アップロードするファイルは
・flowplayer-3.2.2.min.js
・flowplayer-3.2.2.swf
・flowplayer.controls-3.2.1.swf
の3つ。(※2010/06/21時点での最新バージョンは3.2.1)
ブログやホームページの動画を張りたい場所に以下のコードを記述。
太字の部分を書き換える。

<script type="text/javascript" src="flowplayer-3.2.2.min.jsへのパス(絶対or相対)"></script>
<!-- 高さは動画+メニュー(標準24px) idは動画毎にユニークなもの -->
<div style="width:400px;height:324px;" id="独自のID">
</div>
<script>
flowplayer(
"上記ID",
"flowplayer-3.2.2.swfへのパス(絶対or相対)",
    {
        clip: {
            url: '動画ファイルへのパス(絶対or相対)',
            autoPlay: false,                /* 初期画像無しではautoplayをoffにする */
            autoBuffering: false,           /* 自動バッファoff(事前の動画データDL可否) */
            scaling: 'fit'                  /* アスペクト比固定表示 ※最後はカンマ無し */
        },                                  /* カンマを忘れずに! */
        canvas: {
            backgroundColor: '#000000',     /* 背景色(全画面時も適用される) */
            backgroundGradient: 'none'      /* 背景グラデーション OFF ※最後はカンマ無し */
        }                                   /* 最後はカンマ無し */
    }
);
</script>

オブジェクトタグ
<object>
を使った書き方は以下の通り。
<object id="flowplayer" width="300" height="200" data="flowplayer-3.2.2.swfへのパス(絶対or相対)" 
type="application/x-shockwave-flash"> 
<param name="movie" value="flowplayer-3.2.2.swfへのパス(絶対or相対)" /> 
<param name="allowfullscreen" value="true" /> 
<param name="autoplay" value="false" /> 
<param name="flashvars" 
value='config={"clip":"動画へのパス(絶対or相対)"}' />
</object>


2.JWplayerの場合
The player will show in this paragraph


http://www.longtailvideo.com/
上記URLからダウンロード・解凍し、サーバ上にアップロードする。
アップロードするファイルは
・swfobject.js
・player.swf
・yt.swf
の3つ。
ブログやホームページの動画を張りたい場所に以下のコードを記述。
太字の部分を書き換える。

<p id='独自のID'>
The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject.jsへのパス(絶対or相対)'></script>        
<script type='text/javascript'>  
var s1 = new SWFObject('player.swfへのパス(絶対or相対)','player','400','300','9');  
s1.addParam('allowfullscreen','true');  
s1.addParam('allowscriptaccess','always');  
s1.addParam('flashvars','file=動画ファイルへのパス(絶対or相対)'); 
s1.write('上記ID');  
</script>

オブジェクトタグ
<object>
を使った書き方は以下の通り。
<object type="application/x-shockwave-flash" width="320" height="260" data="player.swfへのパス(絶対or相対)?file=動画ファイルへのパス(絶対or相対)"></object>


flowplayerとjwplayer共にスクリプトタグとオブジェクトタグを使った書き方が出来るが、ブログに貼る場合はオブジェクトタグの書き方が無難だろう。ゼミのブログはjoomlaで動いているが、スクリプトタグを使うとjavascriptが反映されない。このような場合はオブジェクトタグを使わなければ成らない。
ちなみにjavascriptで書くのは面倒だが、細かい設定が出来る点で優れていると思われる。

flash使えると、自己表現の幅がかなり広がると思う。