BEACHSIDE BLOG

MicrosoftとかC#を好むレンジャーの個人的メモ

Video Indexer の小ネタ (Microsoft Cognitive Services)

Video Indexer (Microsoft Cognitive Services) で、Player Widget をHTMLに埋め込むことができます。 (前回のVideoIndexerについて書いたときのここら辺の話です。)

埋め込む際の小ネタ、キャプションの変更自動再生のオフ についてメモです。

(2017年6月時点版)

キャプションの変更

デフォルトのキャプション(字幕を表示するやつ)は、英語になっています。下図の右下にあるやつですね。

f:id:beachside:20170627005421p:plain

Widgetに埋め込むURLの最後にパラメーターをつけてあげると、日本語その他諸々に変更できます。

Player の Widget を埋め込むときは、Video Indexerのポータルから Embedボタンをクリックして、以下のようなiframeを埋め込むことで簡単に実現できるのは以前に記載しました

f:id:beachside:20170627001910p:plain

このsrcのURLを以下のように変更すると、日本語のキャプションになります。

  • 変更前(デフォルト)
    https://www.videoindexer.ai/embed/player/a232840f83

  • 変更後
    https://www.videoindexer.ai/embed/player/a232840f83/?captions=japanese

上記は日本語の場合の例ですが、VideoIndexerのポータルでInsightsを見ているときに選択できる言語であれば、入れ替えることができます(いつの間に10言語に増えてる!)。

f:id:beachside:20170627002940p:plain

自動再生のオフ

デフォルトでは自動再生がONになってますが、OFFにするにはこんな感じ。

  • 変更前(デフォルト)
    https://www.videoindexer.ai/embed/player/a232840f83

  • 変更後
    https://www.videoindexer.ai/embed/player/a232840f83/?autoplay=false

これで画面を開いたときに自動再生はしなくなります。もちろん、キャプションと自動再生のオフを同時に設定もできます。

https://www.videoindexer.ai/embed/player/a232840f83/?captions=spanish&autoplay=false

その他

これ以上のカスタマイズをしたい場合は、Azure Media Player (AMP) を使ってできそうです。

Embed Azure Video Indexer widgets into your applications | Microsoft Docs

※ 2017年7月3日 更新!

例えば「画面表示時に、字幕を表示して再生」はできないので、AMPで動画を再生しつつ、Video Indexer APIの GetVttUrl メソッドを呼んで実現する感じでしょうか(試してない)。 これについてはFeedbackを上げたら中の方が「Feature Request に入れておくよ」って言ってました。近いうちに実現できると嬉しいですね。

字幕を最初から表示して再生するの、できるようになりました。

beachside.hatenablog.com

参考

azure.microsoft.com

azure.microsoft.com

docs.microsoft.com

VideoBreakdown developer portal