Flowplayer [HTML5] [plug-in] [jQuery] [js]

2014年に制作した記事を2016/08に加筆修正

動画をwebページに埋め込むjQueryプラグインです。
MP4、WEBM、OGGに対応しているようです。
さまざまなカスタマイズが簡単にできます。
videoタグを使用するので、HTML5対応のブラウザで動作します。
jqueryのプラグインなので、jQueryライブラリが読み込まれていることが前提です。

提供元サイト：flowplayer（GitHub）
ライセンス：GPL Ver.3
必須ファイル：flowplayerhls.swf（またはflowplayer.min.js）
必要であれば：skinフォルダ内のcssや画像、fontファイル

このサンプルのバージョンは6.0.5です。バージョンが違うとライセンスや使い方も異なることがあります（大幅な変更があることはまれです）。
Ver.6.0.5はjQuery 1.7.2以降との組み合わせで、2016/08時点で主要なブラウザの最新バージョンで動作するようです。
skinフォルダ内のファイルは全て必要ではなく、使うものだけをダウンロードしても良いと思います。独自のデザインを当てるためにカスタマイズするにしても、少なくとも一つのcssファイルをダウンロードして、それをカスタムした方が楽かと思います。
[～.min.js]のように名前に[min]があるファイルは改行や不要なスペースなどを排除した若干容量の軽いファイルになります。

sample

IE8以前など、古いブラウザでは表示・動作しません。

使用動画はGrahame Kelaherさんの作品です。個人商用利用無料動画を提供しているMazwaiからダウンロードし、OnlineVideoConverterでファイルサイズを変更しています。

html

<div class="flowplayer" data-ratio="0.5">
    <video>
        <source type="video/ogg" src="ogv動画ファイルのパス">
        <source type="video/mp4" src="mp4動画ファイルのパス">
    </video>
</div>

※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。

通常のvideoタグのように動画ファイルを読み込みます。flowplayer付属のデザインを適用させたい場合は、親タグにclass[flowplayer]を設定してください。
基本的に、これだけで特にcssやjsを自分で組まなくても、動画を貼り付けられます。
画面サイズの可変にも対応しています。

data-ratioはコントローラーの幅と動画そのものの幅の比率を調整するもののようです。

その他のカスタマイズ等については、提供元サイトのDocumentationやDemosをご覧ください（英語のみ）。

社内ルールやサーバーの都合で、flowplayerとセットになっているskinsフォルダのcssファイルや画像ファイルなどを、同一のフォルダに入れられない場合、cssファイル内の画像パスなどを変更する必要があります。

戻る

Top