MillviPlayer
MillviPlayerはコンテンツのメディアタイプに応じてVideoPlayer、AudioPlayer、PdfViewerの出しわけを行っているクラスです。各プレイヤーへの操作は行いません。
Methods
setContent()
setContent({ embedKey, accessKey? }) : Promise<void>
仕様
エンベッドキーからコンテンツ情報を取得し、プレイヤーを描画します。
引数
| 引数 | 型 | 説明 |
|---|---|---|
| embedKey | string | - |
| accessKey | string | 省略可 |
accessKeyについて
公開期限情報を含む、アクセスキーです。
機能設定のワンタイムオプションが有効化されている場合にコンテンツを視聴するのに必須の設定です。
フォーマット
expire は有効期限のUNIXタイムスタンプ形式の値です。
<?php
// 署名したいデータ($key_nameはmillviに登録したシークレットキーネーム)
$expire = strval(time() + 1000);
$key_name = "test_key";
$data = "v3&${expire}&${key_name}";
// secretKey生成APIで発行された.pemファイル(ここではサンプルとして.pemファイルの中身を記述しています)
$pem = "-----BEGIN PRIVATE KEY----- \nMIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgw3ZHC/3LB89AtmNw
MtkqeS2oINe6Rgk8SJfLuLdP5LehRANCAAS7xFGH1d/3vKSmVUWpX5g/uj/4ImLv
47f0g57Erhaq4Syg/MSZhQnjTt5A5bhubwYxBTynFPFapJx+xpqCzHKo\n-----END PRIVATE KEY-----";
// 署名を作成
$private_key = openssl_pkey_get_private($pem);
openssl_sign($data, $signature, $private_key, OPENSSL_ALGO_SHA256);
// 署名されたデータをbase64でencode
$sign = base64_encode($signature);
$access_key = "v3&${expire}&${key_name}&${sign}";
戻り値
なし
on()
on( type, fn ) : void
仕様
指定したイベントに対してイベントリスナーを登録します。
指定できるイベントはPlayerEventsにあるイベントです。
引数
| 引数 | 型 |
|---|---|
| type | PlayerEvents |
| fn | (event: PlayerEvents) => void |
戻り値
なし
off()
off( type, fn ) : void
仕様
指定したイベントに設定されているイベントリスナーを削除します。
指定できるイベントはPlayerEventsにあるイベントです。
引数
| 引数 | 型 |
|---|---|
| type | PlayerEvents |
| fn | (type, videoPlayer | audioPlayer | pdfViewer) => void |
戻り値
なし
offの引数として渡す関数は、「offした時に実行される関数」ではなく、「onで登録した関数」です。
また、イベントリスナーに登録・解除する関数は同じ参照元でないといけません。
// OK
const fn = () => console.log('pause');
player.videoPlayer.on(Millvi.VideoPlayerEvents.Pause, fn)
player.videoPlayer.off(Millvi.VideoPlayerEvents.Pause, fn)
// NG
player.videoPlayer.on(Millvi.VideoPlayerEvents.Pause, () => console.log('pause'))
player.videoPlayer.off(Millvi.VideoPlayerEvents.Pause, () => console.log('pause'))
Property
videoPlayer
videoPlayer: VideoPlayer | null
videoPlayerを介して動画プレイヤーに対して操作を行うことができます。
videoPlayerが正常に生成されるまでvideoPlayerにはnullが返るためVideoPlayerReadyのイベントリスナー内もしくはsetContentのthenメソッド内でvideoPlayerにアクセスする必要があります。
サンプルコード
VideoPlayerReadyのイベントリスナー内でvideoPlayerにアクセスする場合
<!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: '...' });
player.on(Millvi.PlayerEvents.VideoPlayerReady, (event) => {
console.log(event);
const videoPlayer = event.videoPlayer;
videoPlayer.on(Millvi.VideoPlayerEvents.Play, (e) => {
console.log(e);
});
});
</script>
</body>
</html>
setContentのthenメソッド内でvideoPlayerにアクセスする場合
<!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: '...' })
.then(() => {
const videoPlayer = player.videoPlayer
videoPlayer.on(Millvi.VideoPlayerEvents.Play, (e) => {
console.log(e);
});
});
</script>
<!-- 埋め込みコード -->
</body>
</html>
audioPlayer
audioPlayer: AudioPlayer | null
audioPlayerを介して音声プレイヤーに対して操作を行うことができます。
audioPlayerが正常に生成されるまでaudioPlayerにはnullが返るためAudioPlayerReadyのイベントリスナー内もしくはsetContentのthenメソッド内でaudioPlayerにアクセスする必要があります。
サンプルコード
AudioPlayerReadyのイベントリスナー内でaudioPlayerにアクセスする場合
<!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: '...' });
player.on(Millvi.PlayerEvents.AudioPlayerReady, (event) => {
console.log(event);
const audioPlayer = event.audioPlayer;
audioPlayer.on(Millvi.AudioPlayerEvents.Play, (e) => {
console.log(e);
});
});
</script>
</body>
</html>
setContentのthenメソッド内でaudioPlayerにアクセスする場合
<!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: '...' })
.then(() => {
const audioPlayer = player.audioPlayer
audioPlayer.on(Millvi.AudioPlayerEvents.Play, (e) => {
console.log(e);
});
});
</script>
<!-- 埋め込みコード -->
</body>
</html>
pdfViewer
pdfViewer: PdfViewer | null
pdfViewerを介してPDFプレイヤーに対して操作を行うことができます。
pdfViewerが正常に生成されるまでpdfViewerにはnullが返るためPDFViewerReadyのイベントリスナー内もしくはsetContentのthenメソッド内でpdfViewerにアクセスする必要があります。
サンプルコード
PDFViewerReadyのイベントリスナー内でpdfViewerにアクセスする場合
<!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: '...' });
player.on(Millvi.PlayerEvents.PDFViewerReady, (event) => {
console.log(event);
const pdfViewer = event.pdfViewer;
pdfViewer.on(Millvi.PDFViewerEvents.PageChanged, (e) => {
console.log(e)
})
});
</script>
</body>
</html>
setContentのthenメソッド内でpdfViewerにアクセスする場合
<!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: '...' })
.then(() => {
const pdfViewer = player.pdfViewer
pdfViewer.on(Millvi.PDFViewerEvents.PageChanged, (e) => {
console.log(e)
})
});
</script>
<!-- 埋め込みコード -->
</body>
</html>