JavaScriptの外部ファイルで簡単に実装できる、映画コンテンツを快適に再生するHTML5動画プレーヤー -Moovie.js

動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトを紹介します。

実装は非常に簡単でカスタマイズも豊富、字幕は多言語をサポート、動画の再生速度は0.1x-8xまで変更可能、デザインはCSSベースで簡単に変更できます。

映画コンテンツを快適に再生するHTML5の動画プレーヤー -Moovie.js

Moovie.js
Moovie.js -GitHub

Moovie.jsの特徴

Moovie.jsは動画、特に映画コンテンツを快適に再生することにフォーカスされたHTML5プレーヤーを実装するスクリプトです。

サイトのキャプチャ

Moovie.js

  • デフォルトでも快適、フルカスタマイズも可能
  • 動画の字幕は多言語をサポート
  • 再生速度は0.1x-8xまで変更可能
  • .vtt, .srtの字幕ファイルをサポート
  • トラックや字幕を動的に追加可能
  • 字幕のカスタマイズ
  • イベント・ショートカットのAPI
  • 依存関係はなし、VanillaJSで構築
  • すべてのモダンブラウザをサポート
  • レスポンシブに完全対応
  • MITライセンスで、商用プロジェクトでも無料で利用できます

Moovie.jsのデモ

デモでは映画コンテンツを再生しながら、Moovie.jsのいろいろな機能を楽しめます。

サイトのキャプチャ

デモページ

右下の環境設定では、字幕の有無、字幕のタイミング、再生速度を変更できます。

サイトのキャプチャ

動画の環境設定

デモでは字幕は、3つの言語が用意されていました。

サイトのキャプチャ

デモページ

日本語の字幕ファイルを用意すれば、利用できると思います。

サイトのキャプチャ

動画の字幕

Moovie.jsの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

外部ファイルは、CDNも用意されています。

Step 2: HTML

動画を配置するHTMLを用意します。

Step 3: JavaScript

スクリプトを初期化し、オプションを記述します。

動画の機能やデザインはいろいろカスタマイズができます。詳しくは、Moovie.js -GitHubをご覧ください。

sponsors

top of page

©2021 coliss