はじめに

この記事は、リンクアンドモチベーション - Qiita Advent Calendar 2024 - Qiitaの24日目の記事として投稿しています。
私はリンクアンドモチベーションの25卒内定者で、現在内定者インターンの一環として「インタラクティブ動画」の実装に取り組んでいます。

まだまだ学ぶべきことが多い身ですが、この取り組みの中で得られた知見を共有することで、少しでも役立てば嬉しいです。ぜひ最後まで読んでいただければ幸いです。

インタラクティブ動画とは？

インタラクティブ動画は、視聴者が動画に対してアクションを起こせる要素が組み込まれた動画のことを指します。たとえば、YouTube内に配置されたボタンや、特定のシーンへのスキップボタン、または動画の分岐選択ボタンなどがその一例です。

このような動画は、視聴者の関与を高めるために活用され、以下のような場面でよく使用されています

マーケティング
ユーザーの行動をトラッキングしたり、商品の魅力をより効果的に伝えるための手段として活用されています。
教育
学習者が自身のペースで内容を理解できるようにするため、クイズや解説動画と組み合わせて利用されます。

インタラクティブ動画は、視聴者の選択や行動を取り入れることで、単なる受動的な視聴体験を超えた「対話的なコンテンツ」として注目されています。

実装方法

インタラクティブ動画の実装には、ノーコードツールや、JavaScriptで作成可能なライブラリが多く存在します。ここでは、無料で利用可能で、現在もメンテナンスされているツールやライブラリをいくつか紹介します。

H5P

ブラウザ上で動作するオープンソースのコンテンツ作成ツールです。GUIのエディタを使って、簡単にインタラクティブな動画を作成できます。たとえば、動画の途中に理解度クイズを挿入したり、選択式の課題を出題することが可能です。また、LMS（Learning Management System）とも連携できるため、教育目的で広く利用されています。

公式サイトはこちらです: https://h5p.org/

使用方法

h5p.comという有料サービスを使うか、WordPressなどのCMSのプラグインとして使用する方法があります。

私は以下の記事を参考に、ローカルにWordPress環境を構築して、動画作成エディタを使えるようにしました。

以下がWordPress上の編集画面となります。GUI上で、要素を表示する時間・配置する場所を操作できます。

個々の要素は以下のような画面で詳細を設定できます。

動画が完成したら、.h5pファイルとしてエクスポートします。
動画のプレビュー画面の下の方にある「Reuse」というボタンからエクスポートできます。

.h5pファイルを自分のサイト内で再生するために、以下のライブラリを用いました。

メリット

非エンジニアでも簡単に作成可能
ノーコードで操作できるため、プログラミング知識がなくてもすぐに始められます。
多機能で柔軟性が高い
用意されている要素が多く、特に教育用途では使いやすい設計になっています。

デメリット

カスタマイズ性の制約
用意されたパーツを配置する形式のため、細かなデザイン変更や独自機能の追加は困難です。
自動化が難しい
要素の配置が手動になるため、大量のコンテンツを作成する場合には時間がかかります。

Video.js Overlay

Video.jsは、オープンソースの動画プレイヤーライブラリで、videojs-overlayというプラグインを使うことで、動画上に簡単にオーバーレイ要素を追加できます。例えば、特定の秒数に応じてボタンやテキストを表示することができます。

使用方法

以下のようなcontent, start, endからなるoverlayオブジェクトをplayer.overlayで設定することで使えます。（詳しくはドキュメントを参照してください）

const overlay = player.overlay({
  overlays: [{
    content: 'オーバーレイで表示するコンテンツ', 
    start: '20', // 動画の再生位置（秒）で指定可能
    end: '30',
    align: 'top-left' // オプション：'center', 'top-left'など、9つの中からコンテンツの表示位置を設定可能
  }]
});

こんなふうに表示されます。

触ってみてわかったこと

contentに文字列としてhtmlを渡すことができるが、JSXは不可
overlayオブジェクトは複数設定できる
デフォルトで設定されているCSS（半透明の白い背景など）は上書き可能

メリット

直感的なオーバーレイ作成
コードで簡単にオーバーレイ要素を追加でき、複雑な実装を避けられます。
柔軟なタイミング設定
動画の再生位置に応じた動的な表示が可能です。

デメリット

保守性の低下
JSXが使えず、HTMLを文字列として渡す必要があるため、コードの可読性や保守性が下がります。
カスタマイズの手間
初期設定のCSSを変更するには手動で上書きする必要があります。

Remotion

Remotionは、Reactを用いて動画を生成できるライブラリです。通常の動画編集ツールとは異なり、動画自体をReactコンポーネントとして作成することが可能です。そのため、インタラクティブ要素をプログラムで動的に生成したり、柔軟に配置したりすることができます。

メリット

プログラマブルな動画作成
動画生成プロセスを完全にコードで制御できるため、スクリプトで自動化することが容易です。
Reactとの相性の良さ
Reactのエコシステムを活用して、動画をコンポーネントとして管理できます。

デメリット

初心者にはハードルが高い
ReactやJavaScriptの知識が必要で、ノーコードツールに比べて学習コストが高いです。

Remotionを使ったインタラクティブ動画の検証はまだ進行中のため、詳細な実装方法については続報をお待ちください。この記事では、すぐに始められるH5PやVideo.js Overlayを中心にご紹介しました。興味がある方はぜひ試してみてください！