何をする記事ですか?
Azure Media Services を使って日本語の動画に日本語・英語の字幕を付けていきます :)
Azure Media Services
記事が長くなったので、前編と後編に分かれています。
流れ
前回までにやったこと
前回 -> Video Indexer を使って、映像から音声を抽出してみた!! 📹
- 動画を用意する
- inver でテキストにする
- テキストをローカルに落とす(前回はここまで)
今回やること
前回の作業のおさらい
- Video Indexer を使うことで、映像から簡単に文字起こしが出来ました。
- また、その文字起こしのデータもダウンロード行っておきます。
また、今回使用している動画は Serverless Meetup Tokyo #16 の主催者さまから頂いた動画データを用いています。
多謝 (-人-)
参考資料
Azure | Azure Media Services 基礎 (前編)
Azure | Azure Media Services基礎 (後編)
Azure Media Services に動画をアップロードする
上記の参考資料の公式動画を見ながら、Azure Media Services に手もとの動画をアップロードし、Azure 上でエンコードします。
- Azure のポータルを開きます。
- 検索から
Media Servicesを探します。
- 下記のような画面に遷移します。
Addから新規作成し、以下のように埋めて作成します。
- 無事に作成出来ました :)
- (適当に名前をつけた結果、これじゃない感が…みなさんは適切な名前をつけましょう
- 早速、Media Services を開きます。
- まずは動画をアップロードするために
Assetsを開き、Uploadをクリックします。
- 下記のような画面になるので、ローカルに保存している動画をアップロードします。
- 今回は Serverless-Meetup-Tokyo-16.mp4 という名前の動画をアップロードしました。
- Upload 中
- Upload が終ると Assets の中に登録されます。
Azure 上で、動画をストリーミング用にエンコードする
- 引き続き、Assets の中で
Encodeをクリックします。
- 下記のような画面に遷移します。
- ここで、
Encoding presetをAdaptive Streamingに指定しましょう。
- ここで、
- そうすると、Encode が始まります。
- しばらく待ちましょう :)
- Encode が終わった後に、
Assetsに戻ると、先程作成したストリーミング用の動画が出来上がっているのでこちらをクリックします。
- ストリーミング用の動画のページにて
Publishをクリックします。
- 下記の様な公開期間の設定が出来るので、任意に設定しましょう。
- デフォルトは 100 年間になっています。
Publishの設定を行うと、Playがクリック出来るようになります。
- 動画の Player が立ち上がるので、
Playback URLをコピーしておきます。
- ブラウザの別タブにて、Azure Media Player を起動し、先程コピーした
Playback URLを入力して、Updatae Playerにて反映させます。- この時、
Playback URLはhttpなので、httpsに変換しましょう。(sを入れるだけです)
- この時、
- Azure Media Player でも再生出来ることが分かりました。
- Azure Media Player の
Codeをクリックし、Get Player codeをクリックします。
- 下記のように、html ファイルに記載すべき情報を掲示してくれるので、ローカルに作成した index.html にそれぞれを記載していきます
- index.html
- 実際の例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Serverless Meetup #16 </title>
<link href="//amp.azure.net/libs/amp/2.3.4/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="//amp.azure.net/libs/amp/2.3.4/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video>
<script>
var myOptions = {
"nativeControlsForTouch": false,
controls: true,
autoplay: true,
width: "640",
height: "400",
}
myPlayer = amp("azuremediaplayer", myOptions);
myPlayer.src([
{
"src": "https://iganari-jpea.streaming.media.azure.net/eff92941-9aa5-4ad0-9232-35886fa43952/Serverless-Meetup-Tokyo-16.ism/manifest",
"type": "application/vnd.ms-sstr+xml"
}
]);
</script>
</body>
</html>
Azure の Static Website を利用する
- Azure のポータルに戻り、Static website 用の Storage account を新規で作成します。
- 新規作成した Storage account を開き、Settings の中の
Static websiteを開きます。
DisabledをEnabledに変更し、設定項目を入れてSaveします。- ここ表示される、
Primary endpointをコピーしておきましょう。
- ここ表示される、
- 次に、 Storage account の中の Blob service 項の
Containersをクリックし、$webをクリックします。
- 遷移先で、先程作成した index.html をアップロードします。
- 先程コピーした
Primary endpointにアクセスして、動画が再生出来るか確認しましょう。
まとめ
Azure Media Services と、 Azure Static website を用いることで簡単に動画を公開することが出来ました!!
次回は日本語と英語の字幕を付けていきます!!
Have fan! :)
