ウェブで最高のモバイル メディア エクスペリエンスを実現するにはどうすればよいですか？簡単に行えます。すべては、ユーザー エンゲージメントと、ウェブページ上のメディアに与える重要性に依存します。ユーザーがサイトにアクセスする理由が動画である場合、ユーザー エクスペリエンスは没入感があり、再エンゲージメントを促すものである必要があることは、誰もが同意するところでしょう。
この記事では、さまざまな Web API を使用して、メディア エクスペリエンスを段階的に強化し、没入感を高める方法について説明します。そのため、カスタム コントロール、全画面表示、バックグラウンド再生を備えたシンプルなモバイル プレーヤー エクスペリエンスを構築します。サンプルを試すことができます。コードは GitHub リポジトリにあります。
カスタム コントロール
ご覧のとおり、メディア プレーヤーに使用する HTML レイアウトは非常にシンプルです。<div> ルート要素に <video> メディア要素と、動画コントロール専用の <div> 子要素が含まれています。
後で説明する動画のコントロールには、再生 / 一時停止ボタン、全画面表示ボタン、早送り / 早戻しボタン、現在の時刻、再生時間、経過時間の表示要素などがあります。
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls"></div>
</div>
動画のメタデータを読み取る
まず、動画メタデータが読み込まれるのを待ってから、動画の長さと現在の時刻を設定し、進行状況バーを初期化します。secondsToTimeCode() 関数は、秒数を「hh:mm:ss」形式の文字列に変換するカスタム ユーティリティ関数です。この関数は、このケースに適しています。
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</strong>
</div>
</div>
video.addEventListener('loadedmetadata', function () {
videoDuration.textContent = secondsToTimeCode(video.duration);
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
});
動画を再生、一時停止
動画のメタデータが読み込まれたので、再生状態に応じて video.play() と video.pause() で動画を再生、一時停止できる最初のボタンを追加しましょう。
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<strong><button id="playPauseButton"></button></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
playPauseButton.addEventListener('click', function (event) {
event.stopPropagation();
if (video.paused) {
video.play();
} else {
video.pause();
}
});
click イベント リスナーで動画コントロールを調整するのではなく、play 動画イベントと pause 動画イベントを使用します。コントロール イベント ベースにすることで柔軟性が高まり（Media Session API で後述します）、ブラウザが再生に介入した場合にコントロールの同期を維持できます。動画の再生が開始されると、ボタンの状態が「一時停止」に変わり、動画コントロールが非表示になります。動画を一時停止すると、ボタンの状態を「再生」に変更し、動画コントロールを表示します。
video.addEventListener('play', function () {
playPauseButton.classList.add('playing');
});
video.addEventListener('pause', function () {
playPauseButton.classList.remove('playing');
});
動画の currentTime 属性で指定された時間が timeupdate 動画イベントによって変更された場合、カスタム コントロールが表示されている場合は、カスタム コントロールも更新されます。
video.addEventListener('timeupdate', function () {
if (videoControls.classList.contains('visible')) {
videoCurrentTime.textContent = secondsToTimeCode(video.currentTime);
videoProgressBar.style.transform = `scaleX(${
video.currentTime / video.duration
})`;
}
});
動画が終了したら、ボタンの状態を「再生」に変更し、動画 currentTime を 0 に戻して、今のところ動画コントロールを表示します。ユーザーがなんらかの「自動再生」機能を有効にしている場合は、別の動画を自動的に読み込むこともできます。
video.addEventListener('ended', function () {
playPauseButton.classList.remove('playing');
video.currentTime = 0;
});
巻き戻し / 早送り
では、ユーザーが一部のコンテンツを簡単にスキップできるように、「後方にシークする」ボタンと「前方にシークする」ボタンを追加しましょう。
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<button id="playPauseButton"></button>
<strong
><button id="seekForwardButton"></button>
<button id="seekBackwardButton"></button
></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
var skipTime = 10; // Time to skip in seconds
seekForwardButton.addEventListener('click', function (event) {
event.stopPropagation();
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});
seekBackwardButton.addEventListener('click', function (event) {
event.stopPropagation();
video.currentTime = Math.max(video.currentTime - skipTime, 0);
});
これまでと同様に、これらのボタンの click イベント リスナーで動画のスタイル設定を調整するのではなく、起動された seeking と seeked の動画イベントを使用して動画の明るさを調整します。カスタム seeking CSS クラスは filter: brightness(0); と同じくらいシンプルです。
video.addEventListener('seeking', function () {
video.classList.add('seeking');
});
video.addEventListener('seeked', function () {
video.classList.remove('seeking');
});
これまでに作成した内容は次のとおりです。次のセクションでは、全画面ボタンを実装します。
全画面表示
ここでは、いくつかの Web API を利用して、完璧でシームレスな全画面表示エクスペリエンスを作成します。動作を確認するには、サンプルをご覧ください。
当然、すべてを使用する必要はありません。適切なフローを選んで組み合わせれば、カスタムフローを作成できます。
自動全画面表示を防止する
iOS では、メディアの再生が開始されると、video 要素が自動的に全画面表示モードになります。モバイル ブラウザ全体でメディア エクスペリエンスを可能な限り調整して制御するため、video 要素の playsinline 属性を設定して、iPhone でインライン再生を強制し、再生が開始されたときに全画面モードにならないようにすることをおすすめします。他のブラウザへの副作用はありません。
<div id="videoContainer"></div>
<video id="video" src="file.mp4"></video><strong>playsinline</strong></video>
<div id="videoControls">...</div>
</div>
ボタンのクリックで全画面表示を切り替える
自動フルスクリーンを防ぐため、Fullscreen API を使用して動画のフルスクリーン モードを処理する必要があります。ユーザーが「全画面ボタン」をクリックしたときに、ドキュメントで現在全画面モードが使用されている場合は、document.exitFullscreen() で全画面モードを終了しましょう。それ以外の場合は、利用可能な場合はメソッド requestFullscreen() を使用して動画コンテナのフルスクリーンをリクエストするか、iOS でのみ動画要素の webkitEnterFullscreen() にフォールバックします。
<div id="videoContainer">
<video id="video" src="file.mp4"></video>
<div id="videoControls">
<button id="playPauseButton"></button>
<button id="seekForwardButton"></button>
<button id="seekBackwardButton"></button>
<strong><button id="fullscreenButton"></button></strong>
<div id="videoCurrentTime"></div>
<div id="videoDuration"></div>
<div id="videoProgressBar"></div>
</div>
</div>
fullscreenButton.addEventListener('click', function (event) {
event.stopPropagation();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
requestFullscreenVideo();
}
});
function requestFullscreenVideo() {
if (videoContainer.requestFullscreen) {
videoContainer.requestFullscreen();
} else {
video.webkitEnterFullscreen();
}
}
document.addEventListener('fullscreenchange', function () {
fullscreenButton.classList.toggle('active', document.fullscreenElement);
});
画面の向きの変更時に全画面表示を切り替える
ユーザーがデバイスを横向きに回転すると、スマートに全画面表示を自動的にリクエストして、没入感のあるエクスペリエンスを実現しましょう。これには Screen Orientation API が必要ですが、この API はまだすべてのブラウザでサポートされておらず、一部のブラウザではプリフィックスが付いています。これが最初の段階的な機能強化となります。
このプログラムの仕組みを見てみましょう。画面の向きの変化を検出したらすぐに、ブラウザ ウィンドウが横向きモード（幅が高さより大きい）かどうかを確認し、全画面表示をリクエストしましょう。そうでない場合は、全画面表示を終了します。以上です。
if ('orientation' in screen) {
screen.orientation.addEventListener('change', function () {
// Let's request fullscreen if user switches device in landscape mode.
if (screen.orientation.type.startsWith('landscape')) {
requestFullscreenVideo();
} else if (document.fullscreenElement) {
document.exitFullscreen();
}
});
}
ボタンのクリックで横向きのロック画面
動画は横向きのほうが見やすいため、ユーザーが [全画面ボタン] をクリックしたときに画面を横向きにロックすることもできます。以前使用していた Screen Orientation API と一部のメディア クエリを組み合わせて、このエクスペリエンスを最適化します。
横向きの画面をロックするには、screen.orientation.lock('landscape') を呼び出すだけです。ただし、タブレットではユーザーにとって快適な操作にならないため、デバイスが matchMedia('(orientation: portrait)') で縦向きになっていて、matchMedia('(max-device-width: 768px)') で片手で持てる場合にのみ、この操作を行う必要があります。
fullscreenButton.addEventListener('click', function (event) {
event.stopPropagation();
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
requestFullscreenVideo();
<strong>lockScreenInLandscape();</strong>;
}
});
function lockScreenInLandscape() {
if (!('orientation' in screen)) {
return;
}
// Let's force landscape mode only if device is in portrait mode and can be held in one hand.
if (
matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches
) {
screen.orientation.lock('landscape');
}
}
デバイスの向き変更時に画面をロック解除する
作成したロック画面は、画面がロックされているときに画面の向きの変更を受け取らないため、完璧ではありません。
この問題を解決するには、利用可能な場合は Device Orientation API を使用します。この API は、デバイスの空間内の位置と動きを測定するハードウェアからの情報（ジャイロスコープとデジタル コンパスによる向き、加速度計による速度）を提供します。デバイスの向きの変化を検出したら、ユーザーがデバイスを縦向きで保持していて、画面が横向きでロックされている場合は、screen.orientation.unlock() で画面をロック解除します。
function lockScreenInLandscape() {
if (!('orientation' in screen)) {
return;
}
// Let's force landscape mode only if device is in portrait mode and can be held in one hand.
if (matchMedia('(orientation: portrait) and (max-device-width: 768px)').matches) {
screen.orientation.lock('landscape')
<strong>.then(function() {
listenToDeviceOrientationChanges();
})</strong>;
}
}
function listenToDeviceOrientationChanges() {
if (!('DeviceOrientationEvent' in window)) {
return;
}
var previousDeviceOrientation, currentDeviceOrientation;
window.addEventListener(
'deviceorientation',
function onDeviceOrientationChange(event) {
// event.beta represents a front to back motion of the device and
// event.gamma a left to right motion.
if (Math.abs(event.gamma) > 10 || Math.abs(event.beta) < 10) {
previousDeviceOrientation = currentDeviceOrientation;
currentDeviceOrientation = 'landscape';
return;
}
if (Math.abs(event.gamma) < 10 || Math.abs(event.beta) > 10) {
previousDeviceOrientation = currentDeviceOrientation;
// When device is rotated back to portrait, let's unlock screen orientation.
if (previousDeviceOrientation == 'landscape') {
screen.orientation.unlock();
window.removeEventListener(
'deviceorientation',
onDeviceOrientationChange,
);
}
}
},
);
}
ご覧のとおり、これは Google が目指していたシームレスな全画面表示です。実際の動作を確認するには、サンプルをご覧ください。
バックグラウンド再生
ウェブページまたはウェブページ内の動画が不要になった場合は、それを反映するようにアナリティクスを更新することをおすすめします。また、別のトラックの選択、一時停止、カスタム ボタンの表示など、現在の再生にも影響する可能性があります。
ページの公開設定が変更されたときに動画を一時停止する
Page Visibility API を使用すると、ページの現在の公開設定を判断し、公開設定の変更を通知できます。以下のコードは、ページが非表示のときに動画を一時停止します。これは、画面ロックが有効になっているときや、タブを切り替えたときに発生します。
ほとんどのモバイル ブラウザには、一時停止した動画を再開できるブラウザ外のコントロールが用意されているため、この動作は、ユーザーがバックグラウンドで再生することを許可されている場合にのみ設定することをおすすめします。
document.addEventListener('visibilitychange', function () {
// Pause video when page is hidden.
if (document.hidden) {
video.pause();
}
});
動画の公開設定の変更時にミュートボタンを表示 / 非表示にする
新しい Intersection Observer API を使用すれば、費用をかけずにさらに細かく設定できます。この API を使用すると、監視対象の要素がブラウザのビューポートに出入りしたタイミングを把握できます。
ページ内の動画の表示状態に基づいて、ミュートボタンを表示または非表示にしましょう。動画が再生中であるにもかかわらず、まだ表示されていない場合には、ページの右下に小さなミュートボタンが表示され、動画の音声をユーザーが制御できるようになります。volumechange 動画イベントは、ミュートボタンのスタイルを更新するために使用されます。
<button id="muteButton"></button>
if ('IntersectionObserver' in window) {
// Show/hide mute button based on video visibility in the page.
function onIntersection(entries) {
entries.forEach(function (entry) {
muteButton.hidden = video.paused || entry.isIntersecting;
});
}
var observer = new IntersectionObserver(onIntersection);
observer.observe(video);
}
muteButton.addEventListener('click', function () {
// Mute/unmute video on button click.
video.muted = !video.muted;
});
video.addEventListener('volumechange', function () {
muteButton.classList.toggle('active', video.muted);
});
一度に再生できる動画は 1 本のみ
ページに複数の動画がある場合は、1 つだけ再生し、他の動画は自動的に一時停止することをおすすめします。これにより、複数の音声トラックが同時に再生されることはありません。
// This array should be initialized once all videos have been added.
var videos = Array.from(document.querySelectorAll('video'));
videos.forEach(function (video) {
video.addEventListener('play', pauseOtherVideosPlaying);
});
function pauseOtherVideosPlaying(event) {
var videosToPause = videos.filter(function (video) {
return !video.paused && video != event.target;
});
// Pause all other videos currently playing.
videosToPause.forEach(function (video) {
video.pause();
});
}
メディア通知をカスタマイズする
Media Session API を使用すると、現在再生中の動画のメタデータを指定して、メディア通知をカスタマイズすることもできます。また、通知やメディアキーから発生するシークやトラックの変更など、メディア関連のイベントを処理することもできます。実際の動作を確認するには、サンプルをご覧ください。
ウェブアプリで音声や動画を再生している間は、通知トレイにメディア通知が表示されています。Android では、Chrome はドキュメントのタイトルと、見つかったものの中で最も大きいアイコン画像を使用して、適切な情報を表示するよう最善を尽くします。
Media Session API を使用して、タイトル、アーティスト、アルバム名、アートワークなどのメディア セッション メタデータを設定し、このメディア通知をカスタマイズする方法を見てみましょう。
playPauseButton.addEventListener('click', function(event) {
event.stopPropagation();
if (video.paused) {
video.play()
<strong>.then(function() {
setMediaSession();
});</strong>
} else {
video.pause();
}
});
function setMediaSession() {
if (!('mediaSession' in navigator)) {
return;
}
navigator.mediaSession.metadata = new MediaMetadata({
title: 'Never Gonna Give You Up',
artist: 'Rick Astley',
album: 'Whenever You Need Somebody',
artwork: [
{src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png'},
{
src: 'https://dummyimage.com/128x128',
sizes: '128x128',
type: 'image/png',
},
{
src: 'https://dummyimage.com/192x192',
sizes: '192x192',
type: 'image/png',
},
{
src: 'https://dummyimage.com/256x256',
sizes: '256x256',
type: 'image/png',
},
{
src: 'https://dummyimage.com/384x384',
sizes: '384x384',
type: 'image/png',
},
{
src: 'https://dummyimage.com/512x512',
sizes: '512x512',
type: 'image/png',
},
],
});
}
再生が完了したら、通知が自動的に消えるため、メディア セッションを「解放」する必要はありません。再生が開始されると、現在の navigator.mediaSession.metadata が使用されることに注意してください。そのため、メディア通知に常に関連情報を表示できるように、この情報を更新する必要があります。
ウェブアプリで再生リストを提供している場合は、メディア通知から直接「前のトラック」アイコンと「次のトラック」アイコンを使用して、ユーザーが再生リストを操作できるようにすることをおすすめします。
if ('mediaSession' in navigator) {
navigator.mediaSession.setActionHandler('previoustrack', function () {
// User clicked "Previous Track" media notification icon.
playPreviousVideo(); // load and play previous video
});
navigator.mediaSession.setActionHandler('nexttrack', function () {
// User clicked "Next Track" media notification icon.
playNextVideo(); // load and play next video
});
}
メディア アクション ハンドラは保持されます。これはイベント リスナー パターンとよく似ていますが、イベントを処理するということは、ブラウザがデフォルトの動作を停止し、それをウェブアプリがメディア アクションをサポートしているというシグナルとして使用する点が異なります。そのため、適切なアクション ハンドラを設定しない限り、メディア アクション コントロールは表示されません。
なお、メディア アクション ハンドラの設定解除は、null に割り当てるのと同じくらい簡単です。
Media Session API を使用すると、スキップする時間を制御するために、[前へ] と [後へ] のメディア通知アイコンを表示できます。
if ('mediaSession' in navigator) {
let skipTime = 10; // Time to skip in seconds
navigator.mediaSession.setActionHandler('seekbackward', function () {
// User clicked "Seek Backward" media notification icon.
video.currentTime = Math.max(video.currentTime - skipTime, 0);
});
navigator.mediaSession.setActionHandler('seekforward', function () {
// User clicked "Seek Forward" media notification icon.
video.currentTime = Math.min(video.currentTime + skipTime, video.duration);
});
}
「再生/一時停止」アイコンは常にメディア通知に表示され、関連するイベントはブラウザによって自動的に処理されます。なんらかの理由でデフォルトの動作が機能しない場合でも、「再生」と「一時停止」のメディア イベントを処理できます。
Media Session API の優れた点は、メディアのメタデータとコントロールを表示できる場所が通知トレイだけではないことです。メディア通知は、ペア設定されたウェアラブル デバイスと自動的に同期されます。ロック画面にも表示されます。