ユーザーフレンドリーなビデオプレーヤーの作成
Warning
自動再生は、すべてのユーザーやすべてのブラウザで常に機能するとは限りません。
ウェブサイトにビデオコンテンツを追加することは、ユーザーとのエンゲージメントを高める優れた方法です。この記事では、HTML、JavaScript、またはimgixビデオライブラリ（@imgix/ix-player）を使用してウェブページにビデオを埋め込む方法を紹介します。
ix-playerの使用
ix-playerライブラリは、簡単に設定、インストールでき、多くのスタイリングオプションを提供しています。そのため、ix-playerはHLSファイルの推奨ビデオ再生ソリューションです。
ix-playerは、React、Vue、またはAngularのアプリケーションで使用できます。
また、基本的なマークアップを使用して静的HTMLページでもix-playerを使用できます。以下は、HTMLサイトでのix-playerの使用例です：
<!-- 注意: ここでのtype 'module'は重要です -->
<script
defer
type="module"
src="https://static.imgix.net/ix-player/@latest/dist/ix-player.mjs"
></script>
<ix-player
gif-preview
type="hls"
src="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?ixembed=docs&fm=hls"
></ix-player>Click here to modify this in a CodeSandbox.
ix-playerにはいくつかの設定可能な属性があります。詳細については、ix-playerのドキュメントをご覧ください。
エンコードへのロード
処理されていないビデオがリクエストされた場合、ビデオURLへのリクエストは処理中に404または423ステータスコードを返す必要があります。システム内でビデオが見つからない場合、404を返します。それ以外の場合、ビデオリクエストが処理キューに入れられるときは423を返します。
ビデオの処理が完了すると、その後のリクエストは通常通りビデオをロードします。
imgixビデオプレーヤーは、423ステータスコードを受け取ると定期的にビデオのリクエストを再試行し、ビデオが正常にロードされるまで続けます。
注意: 処理が許可されていないディレクトリ内のビデオがリクエストされた場合、それは処理されません。
<video>要素の使用
ビデオを手動でコーディングしたり、カスタムプレーヤーを作成したい場合、HTMLの<video>要素を使用できます。<img>要素のように、<video>要素を使用してビデオプレーヤーをウェブページに埋め込むことができます。<video>要素には、ビデオの表示方法を制御するためのいくつかの設定可能な属性があります。
以下は、埋め込みビデオウェブプレーヤーの基本的なコード例です：
<video controls style="width: 100%; max-width: 1500px;">
<source
src="https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?fm=mp4"
type="video/mp4"
/>
Your browser does not support embedded videos!
</video>これにより、以下のビデオが作成されます：
controls属性は、ユーザーにビデオコントロールを表示するために使用されます。ユーザーのブラウザがビデオをサポートしていない場合、代わりに「Your browser does not support embedded videos!」というテキストが表示されます。
<video>要素には、他にもいくつかの設定可能な属性があります。ビデオ属性の詳細については、MDNドキュメントをご覧ください。
HLSでビデオを再生する
mp4やaviなどの形式を使用してビデオを再生することは可能ですが、HLS形式を使用してビデオをストリーミングすることが最良のプラクティスとされています。
これをウェブアプリケーションで行うには、imgixのビデオAPIを使用してファイルを簡単にHLS形式に変換できます。これをサードパーティのライブラリと組み合わせて<video>要素を使用してHLSファイルをストリーミングすることができます。以下はhls.jsを使用した例です：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video
id="my-player"
controls="controls"
style="width: 100%; max-width: 1500px;"
crossorigin="anonymous"
/>
<script>
let video = document.querySelector("#my-player")
let src =
"https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?fm=hls"
if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = src
} else if (Hls.isSupported()) {
let hls = new Hls()
hls.loadSource(src)
hls.attachMedia(video)
} else {
console.error(
"This is a legacy browser that doesn't support Media Source Extensions",
)
}
</script>This will create the video player below:
Click hereto modify this in a Codepen.
ここでは、サードパーティライブラリを使用してユーザーのブラウザがHLS再生をサポートしているかどうかを検出しています。サポートしている場合は、ビデオをロードします。サポートしていない場合は、エラーをログに記録します。コード内で別のビデオファイルを提供するフォールバックメソッドを使用することもできます。
自動再生の設定
ビデオを自動再生することは、ユーザーにコンテンツをすばやく提供するための優れた方法です。同時に、毎回アプリやウェブページを開くたびにビデオを自動再生することは、ユーザーエクスペリエンスを損なう可能性があります。
このチュートリアルでは、自動再生がどのように機能するかを理解し、自動再生を有効にするためのユースケースを説明します。
ブラウザの互換性
すべてのブラウザベンダー（ChromeやSafariなど）は、自動再生が許可されるかどうかを判断するための異なるポリシーとアルゴリズムを持っています。ブラウザごとに要件は異なりますが、以下は自動再生の可能性を高めるための一般的な条件です：
muted属性でビデオ要素がミュートされている- ユーザーがページのどこかをクリックした
- （Chrome - デスクトップ）ユーザーのMedia Engagement Indexが特定の閾値を超えている
- （Chrome - モバイル）ユーザーがサイトをホーム画面に追加した
- （Safari）デバイスが省電力モードではない
autoplayが許可されていない場合、ユーザーはビデオを再生するためにクリックする必要があります。
自動再生の有効化
ビデオの自動再生を有効にする方法は2つあります。
autoplay属性の使用
autoplay属性は、ビデオの自動再生を有効にする最も一般的で簡単な方法です。以下は、スタイリング属性を含むフルHTMLの例で、コピーして貼り付けることができます。ビデオが自動再生されるかどうかは、ブラウザによります：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video
id="my-autoplay-player"
autoplay
controls
loop="loop"
muted="muted"
style="width: 100%; max-width: 1500px;"
crossorigin="anonymous"
>
<script>
const video = document.querySelector("#my-autoplay-player")
const src =
"https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?fm=hls"
if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = src
} else if (Hls.isSupported()) {
const hls = new Hls()
hls.loadSource(src)
hls.attachMedia(video)
} else {
console.error(
"This is a legacy browser that doesn't support Media Source Extensions",
)
}
</script>
</video>これにより、以下のビデオプレーヤーが作成されます：
ここをクリックしてCodepenでこれを修正してください。
これは自動再生を有効にする最も簡単な方法ですが、最良の方法ではありません。autoplay属性はビデオが何をするべきかをブラウザに指示するだけで、ビデオ要素のフォールバック動作を定義したりログに記録したりしません。
ほとんどの場合、これは問題ありませんが、ユーザー入力を必要とする再生のフォールバックが必要な場合、例えば背景ビデオなどでは、フォールバック動作を定義する必要があります。この場合、autoplay属性を使用する代わりに、JavaScriptを使用して自動再生を開始します。
video.play()の使用
JavaScriptが有効な場合、ビデオ属性を使用する代わりにvideo.play()メソッドを使用してビデオを再生します。
以下はvideo.play()を使用するコード例です：
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video
id="my-player"
controls="controls"
style="width: 100%; max-width: 1500px;"
crossorigin="anonymous"
/>
<script>
let video = document.querySelector("#my-player")
let src =
"https://assets.imgix.video/videos/girl-reading-book-in-library.mp4?fm=hls"
if (video.canPlayType("application/vnd.apple.mpegurl")) {
video.src = src
} else if (Hls.isSupported()) {
let hls = new Hls()
hls.loadSource(src)
hls.attachMedia(video)
} else {
console.error(
"This is a legacy browser that doesn't support Media Source Extensions",
)
}
video
.play()
.then(function () {
// autoplay was successful!
})
.catch(function (error) {
// do something if you want to handle or track this error});
})
</script>This will create the video player below:
Click hereto modify this in a Codepen.
意図が背景ビデオを作成することであると仮定すると、上記のコードは自動再生が許可されている場合に自動的にビデオを再生します。許可されていない場合、.catch()関数を使用して自動再生エラーを記録するか、<video>要素を<image>要素に置き換えることができます。
自動再生を使用する場合
自動再生の主なユースケースは、ウェブページでユーザーの注意をすぐに引くことです。ユーザーがクリックすることが確実なビデオを自動再生することで、ユーザーのクリックを省くこともできます。
しかし、自動再生はユーザーエクスペリエンスを損なう可能性もあり、ウェブサイトのノイズが多すぎるとユーザーエンゲージメントに悪影響を与える可能性があります。
これを考慮して、自動再生を使用する場合は以下のシナリオに限定してください：
- デザイン構成の一部として背景ビデオを作成するため
- ユーザーが確実にクリックするビデオを自動再生することでユーザーエクスペリエンスを向上させるため
- ページが読み込まれるときにユーザーにすぐに表示されるビデオを再生するため
- ユーザーが見ることが重要なビデオを再生するため
自動再生を使用する際には、以下を避けるべきです：
- 折り返しの下にあるビデオを自動再生しない
- ユーザーが見えないビデオを自動再生しない
- 一度に複数のビデオを自動再生しない