Chrome ウェブストアの新しい 60 Minutes アプリや RedBull.tv アプリなど、自分のサイトで動画を公開できる楽しく美しい方法が欲しいと思ったことはありませんか?このたび、動画プレーヤー サンプル ウェブアプリがリリースされたことをお知らせいたします。動画プレーヤー サンプルは、60 Minutes アプリや RedBull.tv アプリと同じアーキテクチャを使用して構築されたオープンソースの動画プレーヤー ウェブアプリです。カスタマイズや拡張が可能です。また、そのまま使用し、独自のコンテンツを追加することもできます。
![動画プレーヤーの例(全画面表示)](https://developer.chrome.google.cn/static/blog/introducing-video-player-sample/image/video-player-example-full-2812628a435e9.png?hl=ja)
![動画プレーヤーの例](https://developer.chrome.google.cn/static/blog/introducing-video-player-sample/image/video-player-example-4d6684277e104.png?hl=ja)
仕組み
ユーザーが動画プレーヤー サンプルを開くと、単一の動画を視聴することも、アプリにアップロードして入力したリストから動画やエピソードの再生リストを作成することもできます。Video Player サンプルが構成され、動画に関する情報が JSON ファイル(config.json と data.json)に保存されています。どちらも data ディレクトリにあります。
主な機能
- 全画面表示などの美しい動画視聴体験
- 番組の登録、エピソードの視聴、再生リストの作成の機能
- ユーザーのブラウザの対応内容に応じた複数の動画形式のサポート(WebM、Ogg、MP4、Flash の代替など)
- アプリで利用できるさまざまな番組/カテゴリの概要が表示された [カテゴリ] ページ
- 新しいエピソードの通知(アプリが Chrome ウェブストアからインストールされた場合)
- Google+、Twitter、Facebook との共有機能を組み込み済み
- 簡単にカスタマイズできるように、Photoshop の PSD を含むすべてのソースファイルが含まれています。
構築方法
動画プレーヤー サンプルは、オープン ウェブ プラットフォーム向けに HTML と JavaScript を使用し、Model View Controller のパターンと構造を大まかに遵守して作成されています。
- オープンソースの Google Closure JavaScript ライブラリを使用して構築されています。
- Closure Compiler でコンパイル
- 通知を利用して Chrome ウェブストアから配布
対応ブラウザ
動画プレーヤー サンプルは、Chrome ウェブストアからインストールできるアプリとしてだけでなく、すべての最新ブラウザでテスト済みで動作しています。
試してみる
デモアプリでは、動画プレーヤーの実際の動作を確認できます。アプリの動作について詳しくは、ドキュメントをご覧ください。
コードは Google Code から取得できます。
ぜひご利用ください。