さて。前回から間が空きました。

前回は Azure Media Service の Dynamic Packaging 用にエンコードされたファイル。そのファイルを MK/IO から参照できるようにした状態で。

続きをやっていきましょう😎
MKPlayer の組み込みを実施します。具体的には HTML としての埋め込みですね。

作戦

MKPlayer は、npm のパッケージとして提供されています。そのため、ローカルの Player 環境で web アプリへ組み込みます。Webアプリは、Azure Static Web App で動かします。ローカルだと動かないです😅

ドキュメントはこちらですね。

Azure Static Web Apps のドキュメントはこちら。

必要なもの

Azure の Subscription
- Web アプリのホスティングが必要です
MK/IO の契約
- これは前回の手順で
GitHub のアカウント
- Azure Static Web Apps にアプリをデプロイするために使います

手順

前回の続きとなります。

事前にMK/IO の Streaming Endpoint を起動させるのをお忘れなきように。

1. MK/IO ポータルでの動作確認

[Assets] の画面から、当該ファイルの動作確認を行います。
はい、再生できていますね😊

で。
DASHとHLSの2つのURLが取得できます。これは、Azure Media Service と同じ書式ですね。
で、双方 CMAF のコンテナである点にも留意ください。ファイルとしては同じですので CDN のキャッシュも有効活用できます。素晴らしい。

これが、実際のHLS の URLです。

| https://ep-dahatakeorigin01-dahatakemediakindio.japaneast.streaming.mediakind.com/fa2b4e01-685f-4cd6-aef0-4733d7a513a5/Common_60.ism/manifest(format=m3u8-cmaf)

今、皆さんがアクセスしても動きませんよ😊 Streaming Endpoint をまめに停止させてますから。

次に、[MKPlayer] へ移動します。

[Protocol] は HLSを選択して。
[Source URL] に、先ほどの HLS のURLを貼り付けます

はい。動いていますね。仕組みがわかってきましたね😊

注意したいのは、画面上部にある MKPlayer のライセンスコードです。
MKPlayer を実際に使う際には、このライセンスコードが必要です。セキュアに扱う必要がありますね。APIから取得するなどして。

2. Player の作成

MKPlayer は JavaScript のアプリケーションです。HTMLに組み込めば動きます。

2.1. 環境作成

準備していきましょう。

2.1.1. 作業用フォルダーの作成

作業用フォルダーを作成します。そのままPlayerアプリのフォルダー扱いですね。

ここでは、C:\Work\mkplayer としています。

2.1.2. Visual Studio Code の整備

Visual Studio Code を起動します。
こちらのドキュメントが何かあった際のお助けに。

2.2. MKPlayer のインストール

それでは、MKPlayerのインストールをします。

npm i @mediakind/mkplayer

サクッとインストールできました。

2.3. HTML 作成

ドキュメントに従って進みます。ほぼコピペ😎

まずは、MKPlayer のJavaScript と CSSの参照

<head>
    <title>My Video Player</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- MKPlayer JavaScript and CSS -->
    <script  type="text/javascript"  src="./node_modules/@mediakind/mkplayer/mkplayer.js"></script>
    <link  rel="stylesheet"  href="./node_modules/@mediakind/mkplayer/mkplayer-ui.css">
</head>

そして、body に div タグ

<body>
    <div id="video-container"></div>
</body>

HTML タグで、それぞれを囲って、現状は以下の感じ。

次に JavaScript で Player の初期化を行います。

// 1. Grab the video container
const videoContainer = document.getElementById("video-container");

// 2. Prepare the player configuration
const playerConfig = {
    key: "PLAYER_LICENSE_HERE",
    playback: {
        muted: true,
        autoplay: true
    },
    // Subscribe to player events
    events: {
        [mkplayer.MKPlayerEvent.Error]: (event) => {
            console.log("Encountered player error: ", JSON.stringify(event));
        },
        [mkplayer.MKPlayerEvent.TimeChanged]: (event) => {
            console.log("Current player position: ", event.time);
        }
    }
};

// 3. Initialize the player with video container and player configuration
let player = new mkplayer.MKPlayer(videoContainer, playerConfig);

各種設定については MKPlayerConfig のドキュメントにあります。

ここでポイントなのが:

key: "PLAYER_LICENSE_HERE"

です。
MK/IO のポータルの [MKPlayer] のページから入手します。ここでは、動作確認を優先するために HTML コードに直接入力します。

警告!

今回作成した GitHub のリポジトリーは、速やかに削除することをおススメします。License Key が History として残ってしまうためです
本番環境で使う際には、API 化して設定するなどして、漏れないように保護してください。

先ほどの図を再度掲載しますね。

いよいよ動画のURLを指定します。
HLS と DASH の両方ですね。

const sourceConfig = {
    title: "It's time to Software Engineer!!!",
    description: "Software Engineer の皆さんへのメッセージ。可能性しかない!",
    hls: "https://ep-dahatakeorigin01-dahatakemediakindio.japaneast.streaming.mediakind.com/fa2b4e01-685f-4cd6-aef0-4733d7a513a5/Common_60.ism/manifest(format=m3u8-cmaf)",
    dash: "https://ep-dahatakeorigin01-dahatakemediakindio.japaneast.streaming.mediakind.com/fa2b4e01-685f-4cd6-aef0-4733d7a513a5/Common_60.ism/manifest(format=mpd-time-cmaf)"
};

そして、それを MKPlayer へ設定します。

player.load(sourceConfig)
.then(() => {
    // you can also get notified when subscribed to `SourceLoaded` event.
    console.log("Source loaded successfull!");
})
.catch((error) => {
    console.error("An error occurred while loading the source!");
});

ドキュメントでは、この後クリーンアップをするコードがありますが、ここでは省略します。
Webアプリに組み込む際には、動画の入れ替えがある度にやったほうがいいと思います。つまりイベントハンドルをちゃんとやってね。という事ですね。

コードの全体はこちらです。

<html>
<head>
    <title>My Video Player</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- MKPlayer JavaScript and CSS -->
    <script  type="text/javascript"  src="./node_modules/@mediakind/mkplayer/mkplayer.js"></script>
    <link  rel="stylesheet"  href="./node_modules/@mediakind/mkplayer/mkplayer-ui.css">
</head>

<body>
    <div id="video-container"></div>

    <script>
        // 1. Grab the video container
const videoContainer = document.getElementById("video-container");

// 2. Prepare the player configuration
const playerConfig = {
    key: "(内緒)",
    playback: {
        muted: true,
        autoplay: true
    },
    // Subscribe to player events
    events: {
        [mkplayer.MKPlayerEvent.Error]: (event) => {
            console.log("Encountered player error: ", JSON.stringify(event));
        },
        [mkplayer.MKPlayerEvent.TimeChanged]: (event) => {
            console.log("Current player position: ", event.time);
        }
    }
};

// 3. Initialize the player with video container and player configuration
let player = new mkplayer.MKPlayer(videoContainer, playerConfig);


const sourceConfig = {
    title: "It's time to Software Engineer!!!",
    description: "Software Engineer の皆さんへのメッセージ。可能性しかない!",
    hls: "https://ep-dahatakeorigin01-dahatakemediakindio.japaneast.streaming.mediakind.com/fa2b4e01-685f-4cd6-aef0-4733d7a513a5/Common_60.ism/manifest(format=m3u8-cmaf)",
    dash: "https://ep-dahatakeorigin01-dahatakemediakindio.japaneast.streaming.mediakind.com/fa2b4e01-685f-4cd6-aef0-4733d7a513a5/Common_60.ism/manifest(format=mpd-time-cmaf)"
};


player.load(sourceConfig)
.then(() => {
    // you can also get notified when subscribed to `SourceLoaded` event.
    console.log("Source loaded successfull!");
})
.catch((error) => {
    console.error("An error occurred while loading the source!");
});

    </script>
</body>
</html>