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

サイト構築 -JavaScript

Post on:2021年3月24日

Moovie.jsの特徴

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

Moovie.js

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

Moovie.jsのデモ

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

デモページ

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

動画の環境設定

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

デモページ

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

動画の字幕

Moovie.jsの使い方

Step 1: 外部ファイル

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

<script src="moovie.js"></script>
<link rel="stylesheet" href="moovie.css">

1 2	<script src="moovie.js"></script> <link rel="stylesheet" href="moovie.css">

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

<script src="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/js/moovie.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/css/moovie.min.css">

1 2	<script src="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/js/moovie.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BMSVieira/moovie.js@latest/css/moovie.min.css">

Step 2: HTML

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

<video id="example" poster="<<path-to-poster>>">
  <source src="<<path-to-file.mp4>>" type="video/mp4">
  <track kind="captions" label="Portuguese" srclang="pt" src="<<path-to-caption.vtt>>">
  <track kind="captions" label="English" srclang="en" src="<<path-to-caption.vtt>>">
  Your browser does not support the video tag.
</video>

<source src="<<path-to-file.mp4>>" type="video/mp4">

Your browser does not support the video tag.

</video>

Step 3: JavaScript

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

document.addEventListener("DOMContentLoaded", function() {
   var demo = new Moovie({
     selector: "#example",
     dimensions: {
          width: "100%"
     }
   });
});