動画プレーヤーのサンプルのご紹介

Chrome ウェブストアの新しい 60 Minutes アプリや RedBull.tv アプリのように、楽しくて美しい方法で自分のサイトに動画を公開したいと思ったことはありませんか?このたび、動画プレーヤー サンプル ウェブアプリをリリースしました。動画プレーヤー サンプルは、60 Minutes アプリと RedBull.tv アプリと同じアーキテクチャを使用して構築されたオープンソースの動画プレーヤー ウェブアプリです。カスタマイズ、拡張、またはそのまま使用して独自のコンテンツを入力できます。

動画プレーヤーの全画面表示の例
動画プレーヤーの例

仕組み

ユーザーが動画プレーヤーのサンプルを開くと、1 本の動画を視聴することも、アップロードしてアプリに追加したリストから動画/エピソードの再生リストを作成することもできます。動画プレーヤーのサンプルが構成され、動画に関する情報が JSON ファイル(それぞれ config.json と data.json)に保存されます。どちらも data ディレクトリにあります。

主な機能

  • 全画面表示など、美しい動画視聴体験
  • 番組の定期購入、エピソードの視聴、再生リストの作成
  • ユーザーのブラウザがサポートしている複数の動画形式(WebM、Ogg、MP4、Flash のフォールバックなど)のサポート
  • アプリで利用可能なさまざまな番組/カテゴリの概要が表示された [カテゴリ] ページ
  • 新エピソードの通知(Chrome ウェブストアからアプリをインストールしている場合)
  • Google+、Twitter、Facebook への共有のサポートが組み込まれている
  • 簡単にカスタマイズできるように、Photoshop PSD を含むすべてのソースファイルが含まれています

構築方法

動画プレーヤーのサンプルは、HTML と JavaScript を使用してオープンウェブ プラットフォーム用に作成されており、モデル ビュー コントローラ パターンと構造に沿って記述されています。

対応ブラウザ

この動画プレーヤーのサンプルは、Chrome ウェブストアからインストールできるアプリとして機能するだけでなく、最新のすべてのブラウザで動作することがテストされています。

試してみる

動画プレーヤーのデモは、デモアプリでご覧いただけます。アプリの詳細については、ドキュメントをご覧ください。

コードは Google Code から入手できます。

お楽しみください!