video.js
Unknown
Video.js は、すべての Web ベースのプラットフォームに対応するフル機能のオープンソース ビデオ プレーヤーです。
Video.js は、箱から出してすぐに、HLS や DASH などのストリーミング形式を含む、Web で使用されるすべての一般的なメディア形式をサポートします。デスクトップ、モバイル デバイス、タブレット、Web ベースのスマート TV で動作します。プラグインの堅牢なエコシステムによってさらに拡張およびカスタマイズできます。
Video.js は 2010 年半ばに開始され、現在では以上の用途で使用されています。 50,000 100,000 200,000 400,000 700,000 800,000 の Web サイト。
Fastly の素晴らしい人々のおかげで、誰でも使用できる無料の CDN ホスト バージョンの Video.js が提供されています。次のタグをドキュメントの<head>に追加します。
< link href =" //vjs.zencdn.net/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" //vjs.zencdn.net/8.19.1/video.min.js " > </ script >あるいは、npm から取得するか、GitHub リリースからダウンロードするか、unpkg または CDNjs などの別の JavaScript CDN 経由で Video.js を含めることもできます。
<!-- unpkg : use the latest version of Video.js -->
< link href =" https://unpkg.com/video.js/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/video.js/dist/video.min.js " > </ script >
<!-- unpkg : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://unpkg.com/[email protected]/dist/video-js.min.css " rel =" stylesheet " >
< script src =" https://unpkg.com/[email protected]/dist/video.min.js " > </ script >
<!-- cdnjs : use a specific version of Video.js (change the version numbers as necessary) -->
< link href =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video-js.min.css " rel =" stylesheet " >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/video.js/8.19.1/video.min.js " > </ script >次に、Video.js の使用は<video>要素を作成するのと同じくらい簡単ですが、追加のdata-setup属性が必要です。少なくとも、この属性の値は'{}'である必要がありますが、任意の Video.js オプションを含めることができます。ただし、有効な JSON が含まれていることを確認してください。
< video
id =" my-player "
class =" video-js "
controls
preload =" auto "
poster =" //vjs.zencdn.net/v/oceans.png "
data-setup =' {} ' >
< source src =" //vjs.zencdn.net/v/oceans.mp4 " type =" video/mp4 " > </ source >
< source src =" //vjs.zencdn.net/v/oceans.webm " type =" video/webm " > </ source >
< source src =" //vjs.zencdn.net/v/oceans.ogv " type =" video/ogg " > </ source >
< p class =" vjs-no-js " >
To view this video please enable JavaScript, and consider upgrading to a
web browser that
< a href =" https://videojs.com/html5-video-support/ " target =" _blank " >
supports HTML5 video
</ a >
</ p >
</ video >ページが読み込まれると、Video.js がこの要素を見つけて、その場所にプレーヤーを自動的にセットアップします。
自動セットアップを使用したくない場合は、 data-setup属性を省略し、 videojs関数を使用して<video>要素を手動で初期化できます。
var player = videojs ( 'my-player' ) ; videojs関数は、 optionsオブジェクトと、プレーヤーの準備ができたときに呼び出されるコールバックも受け入れます。
var options = { } ;
var player = videojs ( 'my-player' , options , function onPlayerReady ( ) {
videojs . log ( 'Your player is ready!' ) ;
// In this context, `this` is the player that was created by Video.js.
this . play ( ) ;
// How about an event listener?
this . on ( 'ended' , function ( ) {
videojs . log ( 'Awww...over so soon?!' ) ;
} ) ;
} ) ;すぐに始める準備ができている場合は、「はじめに」ページとドキュメントが詳細を参照するのに最適な場所です。行き詰まったら、Slack にアクセスしてください。
Video.js は無料のオープン ソース ライブラリです。バグの修正、ドキュメントの改善、新機能の提案など、ご協力をよろしくお願いいたします。詳細については、貢献ガイドをご覧ください。
Video.js は互換性テストに BrowserStack を使用します。
このプロジェクトは貢献者の行動規範とともにリリースされていることに注意してください。このプロジェクトに参加すると、その規約に従うことに同意したことになります。
Video.js は、Apache License バージョン 2.0 に基づいてライセンスされています。
Video.js は Brightcove, Inc. の登録商標です。
