動画に弾幕コメントを流したいなら、DPlayerだけで完結するのか

はじめに

ニコニコ動画やbilibiliのように、画面上をコメントが流れる「弾幕」表示を自分のサイトの動画にも付けたい。そう思って調べると、動画プレイヤー本体の実装だけでも骨が折れるのに、コメントの描画・タイミング制御まで自作するのは正直かなりの手間です。

DPlayerは、この弾幕表示を標準機能として組み込んだHTML5動画プレイヤーです。通常の再生・一時停止・音量調整といった基本機能に加えて、コメントを画面に流す仕組みがあらかじめ用意されているため、動画プレイヤーと弾幕UIを別々に組み合わせる必要がありません。

とはいえ、説明を読むより実際に動かした方が早いと思います。テキストを入力して弾幕を流せるサンプルを用意したので、先に挙動を見たい方はこちらからどうぞ。

＞＞＞まずはサンプルを確認＜＜＜

DPlayerとは

DPlayerは、DIYgod氏が開発しているHTML5動画プレイヤーのライブラリです。GitHubで16,000以上のスターを獲得しており、MITライセンスのもとで開発が継続されています。MP4やWebMといった一般的な形式に加えて、HLS・FLV・MPEG-DASH・WebTorrentといったストリーミング形式にもプラグイン経由で対応しているのが特徴です。

主な特徴

弾幕(danmaku)表示 - コメントを画面上に流す・固定表示するAPIが標準で用意されている
多様な動画形式への対応 - MP4/WebM/Oggに加え、hls.jsやflv.js、dash.jsと組み合わせることでHLS・FLV・DASHも再生可能
字幕・画質切り替え - WebVTT形式の字幕表示や、複数画質を切り替えるUIを設定だけで実装できる
ホットキー対応 - キーボードでの再生・音量・シークをデフォルトで有効化できる

インストール

npmでインストールする場合は以下のコマンドを実行します。

npm install dplayer

yarnを使う場合は以下のとおりです。

yarn add dplayer

DPlayerのサンプルを動かす

new DPlayer() でプレイヤーを生成し、dp.danmaku.draw() を呼び出すと、サーバーを用意しなくてもその場でコメントを画面に流せます。下のサンプルは、入力欄に書いたテキストをボタンクリックで弾幕として流すデモです。

要点となるコードは次の部分です。

const dp = new DPlayer({
  container: document.getElementById('player'),
  video: { url: 'video.mp4' },
})

dp.danmaku.draw({
  text: 'こんにちは！',
  color: '#fff',
  type: 'right', // 'right' | 'top' | 'bottom'
})

実際に動かせるサンプルが下です。入力欄のテキストを書き換えて「弾幕を流す」ボタンを押すと、そのままコメントが画面右から左へ流れます。空欄のまま送信すると何も起きないので、まずは何か文字を入力してみてください。

このように、DPlayerの弾幕機能はdanmaku.apiにサーバーを指定しなくても、dp.danmaku.draw()を直接呼ぶだけでローカルにコメントを描画できます。実際のサービスでコメントを永続化したい場合は、danmakuオプションにidとapiを指定してバックエンドと連携させる形になります。

基本的な使い方

弾幕を使わない、最小構成でのプレイヤー設置は次のようになります。

import DPlayer from 'dplayer'

const dp = new DPlayer({
  container: document.getElementById('player'),
  autoplay: false,
  theme: '#FADFA3',
  hotkey: true,
  video: {
    url: 'https://example.com/video.mp4',
    pic: 'https://example.com/poster.jpg', // 再生前に表示するポスター画像
  },
})

containerにプレイヤーを配置する要素、video.urlに再生する動画のURLを渡すだけで、コントロールバー付きのプレイヤーが生成されます。themeでシークバーなどのアクセントカラーを、hotkeyでキーボード操作の有効・無効を切り替えられます。

実践的なユースケース

弾幕の表示位置・色を使い分ける

dp.danmaku.draw()のtypeプロパティには'right'（右から左へ流れる）・'top'（上部に固定表示）・'bottom'（下部に固定表示）の3種類を指定できます。colorと組み合わせることで、コメントの種類ごとに見た目を変えられます。

dp.danmaku.draw({ text: '上から流れる', color: '#ff5252', type: 'top' })
dp.danmaku.draw({ text: '下に固定', color: '#4caf50', type: 'bottom' })
dp.danmaku.draw({ text: '右から左へ', color: '#42a5f5', type: 'right' })

下のサンプルでは、3つのボタンでそれぞれ異なるtypeとcolorの弾幕を流します。ボタンを連打すると、複数の弾幕が同時に画面上を流れる様子も確認できます。

画質切り替えを実装する

複数の解像度を用意している動画であれば、video.qualityに配列でファイルを渡すだけで画質切り替えUIをDPlayerが自動生成してくれます。defaultQualityで初期表示する要素のインデックスを、dp.switchQuality(index)でプログラムから画質を切り替えられます。

new DPlayer({
  container: document.getElementById('player'),
  video: {
    quality: [
      { name: '高画質', url: 'high.mp4' },
      { name: '低画質', url: 'low.mp4' },
    ],
    defaultQuality: 0,
  },
})

dp.switchQuality(1) // 低画質に切り替え

下のサンプルでは検証用に同じ動画ファイルを「高画質」「低画質」の2つのラベルとして登録していますが、実際のサービスではそれぞれ異なる解像度のファイルのURLを指定します。ボタンを押すとdp.switchQuality()が呼ばれ、quality_endイベントがコンソールに出力されます。

WebVTT字幕を表示する

DPlayerはsubtitleオプションでWebVTT形式の字幕を表示できます。字幕ファイルをサーバーに置かなくても、テキストからBlobを生成してURL.createObjectURL()でURL化すれば、その場で字幕付き再生を試せます。

new DPlayer({
  container: document.getElementById('player'),
  video: { url: 'video.mp4' },
  subtitle: {
    url: 'subtitle.vtt',
    type: 'webvtt',
    fontSize: '24px',
    color: '#fadfa3',
  },
})