オンデマンドやストリーミングを手軽にできます。
https://azure.microsoft.com/ja-jp/services/media-services/
AMSの設定などはいろんな方が書いてる？ようですので、
実際にハマったプレイヤーをHTMLに埋め込むところを説明してみようと思います。
HTML5で見ることができる Azure Media Player（以下AMP）は、タグを埋め込むだけで設置完了です。
こんな感じですね。
<!DOCTYPE html>
<html>
<head>
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"></link>
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400"
data-setup='{ "logo": { "enabled": false }, "nativeControlsForTouch": false, "techOrder": ["azureHtml5JS","html5","silverlightSS","flashSS"]}'>
<source src="ストリーミング開始時に発行されたURL" type="application/vnd.ms-sstr+xml"></source>
<div class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</div>
</video>
</body>
</html>
詳しいドキュメントはこちらです。
https://amp.azure.net/libs/amp/latest/docs/
クライアントごとの対応は基本的にはJSで行われるのですが、今回実際に問題が発生した箇所があったので、簡単な回避策を。
問題点："azureHtml5JS"（DASH）でのストリーミング配信がiPadだけで見れない
原因：おそらくiPadだけDASHのコードがうまく動かない。なおiPhoneはOK
対応：iPadだけtechOrderを出力しない（そうすると"html5"が優先になる）
HTMLを分けるのが一番早いので、例えばPHPなら以下のようにtechOrderの出力を分岐します。
<!DOCTYPE html>
<html>
<head>
<link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"></link>
<script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script>
</head>
<body>
<video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400"
data-setup='{ "logo": { "enabled": false }, "nativeControlsForTouch": false, "
<?php
$ua = mb_strtolower($_SERVER['HTTP_USER_AGENT’]);
if (strpos($us, ‘iPad’) === false) {
echo ‘,"techOrder":["azureHtml5JS”,”html5","silverlightSS","flashSS”]’;
}
?>
}'>
<source src="ストリーミング開始時に発行されたURL" type="application/vnd.ms-sstr+xml"></source>
<div class="amp-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
</div>
</video>
</body>
</html>
他のクライアントでも同様に対応できるのではないかと思います。
0 件のコメント:
コメントを投稿