YouTubeのようなHTML5動画プレイヤーを実装することができるJSライブラリ「Video.js」

YouTubeのようなHTML5動画プレイヤーを実装することができるJSライブラリを紹介します。

YouTubeのようなレイアウトを実装することができるHTML5動画プレイヤー「Video.js」

YouTubeのようなHTML5動画プレイヤーを実装することができるJSライブラリ「Video.js」

Video.jsは、HTML5動画プレイヤーを実装することができるJSライブラリです。

とても高機能で、YouTubeで見かける、埋め込み機能、シェア機能、フルスクリーン表示、音量調整など必要な機能が揃っています。

もちろん、見た目のカスタマイズも可能です。

対応ブラウザはIE8以上です。動作が安定しており、実際に多くの動画サイトで使われています。

画像、動画ギャラリーのlightgallery.jsにも使われています。

オープンソースとして公開されており、無料で商用利用可能です。

デモ

実装事例

実際に複数の動画サイトに導入されています。

サンプル1
IGN Video

 

サンプル2
Funny Or Die

 

サンプル3
The Guardian

Video.jsの使い方

CDNで提供されています。もちろん、ローカルにインストールすることも可能です。

CSS

<head>タグ内でvideo-js.cssを読み込みます。

IE8に対応する場合は、videojs-ie8.min.jsも読み込みます。

HTML

<video>タグで動画を用意します。

JS

</body>閉じタグの前でvideo.jsを読み込みます。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 4,126