このライブラリを使用する事で、mp3へのリンクやYoutube、動画へのリンクがページ内でかっこ良く再生してくれます。

さらにページ内のリンクを自動で拾ってプライリストにしてくれたりもします。

↑再生してみた様子

対応ブラウザにはIE6も含まれているようですね。

使い方

使い方は簡単で、以下のスクリプトタグを</body>の直前に挿入すればOKです。

<script type="text/javascript" 
src="http://webplayer.yahooapis.com/player-beta.js"></script>

お手軽ですね:)
興味のある方は下のリンクからどうぞ〜。

スマフォでの動画再生の際に、キューポイント（再生開始位置）を指定できるライブラリが良さそうなのでメモ的にエントリー。もちもんPCもOKですよ。

「Cuepoint.js」はHTML5のビデオに、
字幕とキューポイントを追加するためのオープンソースのJavaScriptです。

デモサイトを訪れると動画が埋めこまれているのですが、
画面の下にあるサムネイルをクリックすると、
それぞれに対応した箇所から再生が開始されるようになっています。

長い動画を見せたい時に、見て欲しいポイントを分かりやすくできて良いですよね。

とても単純な処理なのですが、何回かお仕事でこういうものを探していたので
そのうち使いそうです。

興味のある方は下のリンクからどうぞ。

「VideoJS」はCSSだけでスキンの変更ができるHTML5のビデオプレイヤーです。

画像を一切に使用していないため、CSSだけでスキンの変更が可能になっています。

フルスクリーン、ボリュームコントロールなどの基本機能はもちろん、初期画像や動画のダウンロードリンクなどが全てHTMLだけで設定できるようになっています。

jQueryやWordPressのプラグインも用意されていたので、簡単に設置できそうです。

余談ですね、GoogleがH.264のサポートをしない事でhtml5の動画プレイヤーはこの先どうなるか心配ですね。

「LeanBack Player」は字幕を表示する事ができるオープンソースのVideoプレイヤーです。

多彩な機能

以下のような多彩な機能が実装されています。

• フルスクリーン
• 音声のOn/Offとレベル変更
• 再生速度の変更
• 字幕の言語切り替え

基本的な機能はもちろんの事、字幕表示できるのは嬉しいですね。
外国語表示だけでなく、動画の補足説明としても使えそうです。

CSSで切り替え可能なスキン

スキンはCSSで作成されているようですので、自作スキンの設定なども簡単にできそうです。

ライブラリを必要としない

jQueryなどの外部のライブラリを必要としないため、簡単に設置する事が可能です。
よってライブラリを利用、または導入できないケースでも問題なく動作させる事ができます。

豊富な対応ブラウザ

HTML5対応ブラウザであればほとんど動作するようです。
もちろん、iPhoneやAndoroidでも。

• Mozilla Firefox (3.6以上
• Opera (10以上)
• Google Chrome (7以上)
• Safari (5.0以上)
• IE9
• iPhone
• Android

公式サイトにはデモがあるので、興味のある方は一度触れてみることをお勧めします。

カスタマイズを前程に作られているようで、各ボタンを操作した際のイベントの設定など細かくできるようになっていました。

Youtubeの動画も再生できるようです。

デモ

対応動画形式

ogg (theora/vorbis), mp4/mov (H.264), WebM (VP8/vorbis), FLV

複数対応しているようで、movやflvなど再生できるようです。

デザインにはjQuery UIを使用しているようですので、テーマの変更など簡単にできそうですね。

興味のある方はぜひダウンロードしてみてください！

動画再生は今まではAdobeのFlashPlayerがデファクトスタンダードでした。しかしhtml5の登場によりオープンソースのメディアプレイヤーが注目を浴びています。

これからはこういったプレイヤーが主流になるかもしれないですね。

osmplayerには以下の機能があるとの事。

• HTML5のサポート
• Flashによる動画の再生
• Mp3 やオーディオファイルの再生
• VimeoやYouTubeのサポート

HTML5に対応していないブラウザは自動的にFlashを表示するそうで、一般的なメディアはほぼ再生できるようです。

公式サイト

ソースはjQueryで書かれておりカスタマイズも色々できそうです。

WordPressに組み込めるプロジェクトも進行中との事。これからが楽しみですね。

videoタグを使用する事でFlashなどのプラグインが必要なくなり、設置も簡単にできるようになります。

詳しくは以下

次のコードを貼付けるだけでvideoタグが有効になります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://html5media.googlecode.com/svn/trunk/src/jquery.html5media.min.js"></script>

後はhtmlに簡単なタグを追加するだけです。

<video src="video.mp4" width="320" height="240" controls autobuffer></video>

これは簡単ですね。

初期状態で画像を表示したい場合には、poster要素を追加するだけのようです。

<video src="video.mp4" width="320" height="240" poster="image.jpg" controls autobuffer></video>

Firefox、Safari、Chrome、Android、iPhoneで動作するとの事。
サイトにはサンプルがあるので、興味のある方はぜひダウンロードしてみてください。

とはいえ、全ての環境で動くわけではないので注意は必要です。

Sublime Videoは以下の環境で動作するようです。
・Safari (v4.0.4+)
・Google Chrome (v4.0+)
・Internet Explorer with Chrome Frame installed

新しい技術に興味のある方は使ってみてはいかがでしょうか。

■2010/02/02追記
個人利用に限りフリーとなっているようです。利用にはご注意ください。