プレイヤーAPIで再生を制御する
プレイヤーAPIを使って、再生の制御やイベントの監視を行うまでの基本的な流れを説明します。
このページでは動画プレイヤー(VideoPlayer)を例に説明しますが、音声プレイヤー(AudioPlayer)・PDFビューアー(PdfViewer)についても同様の流れで操作できます。
各プレイヤーのAPI一覧はプレイヤーAPI一覧を参照してください。
1. プレイヤーを埋め込む
配信者CMSで取得した埋め込みコードをHTMLに記述します。
詳細はプレイヤーAPI概要を参照してください。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div id="player"></div>
<script
src="https://cdn.millvi.com/player/player.js"
charset="UTF-8"
>
</script>
<script>
const player = new Millvi.MillviPlayer({
containerId: 'player',
});
player.setContent({ embedKey: '...' });
</script>
</body>
</html>
サンプルコード中のembedKey: '...'は説明用のプレースホルダーです。
実際に動作させる場合は、配信者CMSまたはEmbedキー発行APIで自身のコンテンツに対して発行したembedKeyに置き換えてください。
2. プレイヤーの準備完了を検知する
setContent()が呼ばれた直後は、コンテンツのメディアタイプ(動画・音声・PDF)に応じたvideoPlayer / audioPlayer / pdfViewerインスタンスがまだ生成されていないためnullです。
各プレイヤーの操作は、MillviPlayerのon()でPlayerEventsのVideoPlayerReadyを監視し、インスタンスの生成完了を待ってから行う必要があります。
player.on(Millvi.PlayerEvents.VideoPlayerReady, (event) => {
const videoPlayer = event.videoPlayer;
// videoPlayerの操作はここから行う
});
3. 再生を制御する
videoPlayerが取得できたら、メソッドやプロパティを使って再生を制御できます。
詳しい一覧はVideoPlayerを参照してください。
// 再生
videoPlayer.play();
// 一時停止
videoPlayer.pause();
// 再生位置の変更(秒単位で指定した位置に移動)
videoPlayer.currentTime = 60;
// 音量の変更(0〜1の範囲で指定)
videoPlayer.volume = 0.5;
ブラウザの自動再生ポリシーにより、ユーザー操作を伴わないplay()は無視される場合があります。
詳細はMDN: メディアとウェブの自動再生ガイドを参照してください。
4. イベントを監視する
videoPlayer.on()で再生状態の変化を監視できます。
指定できるイベントの一覧はVideoPlayerEventsを参照してください。
videoPlayer.on(Millvi.VideoPlayerEvents.Playing, () => {
console.log('再生が開始されました');
});
videoPlayer.on(Millvi.VideoPlayerEvents.Pause, () => {
console.log('一時停止しました');
});
videoPlayer.on(Millvi.VideoPlayerEvents.Ended, () => {
console.log('再生が完了しました');
});
videoPlayer.on(Millvi.VideoPlayerEvents.Error, (event) => {
console.error('エラーが発生しました', event);
});
duration(総再生時間)やcurrentTime(現在の再生時間)は、MediaReadyイベント発火後でないと正しい値を取得できません。
再生時間を表示するなどの処理は、MediaReadyのイベントリスナー内で行ってください。
(下記の「サンプルコード(全体)」を参照)
登録したイベントリスナーが不要になった場合は、on()に渡した関数と同じ参照をoff()に渡すことで解除できます。
const onPause = () => console.log('一時停止しました');
videoPlayer.on(Millvi.VideoPlayerEvents.Pause, onPause);
videoPlayer.off(Millvi.VideoPlayerEvents.Pause, onPause);
サンプルコード(全体)
再生・一時停止・シークをボタンで操作しつつ、現在の再生時間と総再生時間を表示する例です。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div id="player"></div>
<button id="play">再生</button>
<button id="pause">一時停止</button>
<button id="seek">10秒地点に移動</button>
<p><span id="currentTime">0</span> / <span id="duration">0</span> 秒</p>
<script
src="https://cdn.millvi.com/player/player.js"
charset="UTF-8"
>
</script>
<script>
const player = new Millvi.MillviPlayer({
containerId: 'player',
});
player.on(Millvi.PlayerEvents.VideoPlayerReady, (event) => {
const videoPlayer = event.videoPlayer;
document.getElementById('play').addEventListener('click', () => {
videoPlayer.play();
});
document.getElementById('pause').addEventListener('click', () => {
videoPlayer.pause();
});
document.getElementById('seek').addEventListener('click', () => {
videoPlayer.currentTime = 10;
});
videoPlayer.on(Millvi.VideoPlayerEvents.Playing, () => {
console.log('再生が開始されました');
});
videoPlayer.on(Millvi.VideoPlayerEvents.Pause, () => {
console.log('一時停止しました');
});
videoPlayer.on(Millvi.VideoPlayerEvents.Ended, () => {
console.log('再生が完了しました');
});
// durationとcurrentTimeはMediaReady発火後に取得する
videoPlayer.on(Millvi.VideoPlayerEvents.MediaReady, () => {
document.getElementById('duration').textContent = videoPlayer.duration.toFixed(0);
setInterval(() => {
document.getElementById('currentTime').textContent = videoPlayer.currentTime.toFixed(0);
}, 1000);
});
});
player.setContent({ embedKey: '...' });
</script>
</body>
</html>