Hasplayer + MPEG-DASH WideVine DRM + HLS + Smooth Streaming の使用法
Hasplayer + MPEG-DASH WideVine DRM + HLS + Smooth Streaming の使用法:
こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html
In my opinion hasplayer is a really interesting player and I would like to show you common use cases.
hasplayer は興味深いプレイヤーなので、一般的な使用法を説明します。
Sintel
© copyright Blender Foundation | www.sintel.org
Tears of Steel
© copyright Blender Foundation | https://mango.blender.org/
Big Buck Bunny
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
From the official webpage:
Widevine DRM system is compatible with Chrome, Firefox and Android.
Widevine DRMシステムは、Chrome、Firefox、Androidと互換性があります。
Data are passed to the license server through a custom header.
In this example the custom header name is X-AxDRM-Message.
The custom header name depends on your DRM provider.
データは、カスタムヘッダーを介してライセンスサーバーに渡されます。
この例では、カスタムヘッダー名はX-AxDRM-Messageです。
カスタムヘッダ名はDRMプロバイダによって異なります。
HLS playback works better when using version 1.14.1.
バージョン1.14.1を使用すると、HLS再生がうまく機能します。
https://github.com/Orange-OpenSource/hasplayer.js
http://orange-opensource.github.io/hasplayer.js/development/doc/jsdoc/index.html
http://playready.directtaps.net/smoothstreaming/
http://rdmedia.bbc.co.uk/dash/ondemand/bbb/
https://github.com/Axinom/drm-quick-start
はじめに
こんにちは streampack チームのメディです。https://cloudpack.jp/service/option/streampack.html
In my opinion hasplayer is a really interesting player and I would like to show you common use cases.
hasplayer は興味深いプレイヤーなので、一般的な使用法を説明します。
Copyrights of videos
Sintel© copyright Blender Foundation | www.sintel.org
Tears of Steel
© copyright Blender Foundation | https://mango.blender.org/
Big Buck Bunny
© copyright 2008, Blender Foundation | www.bigbuckbunny.org
What is hasplayer
From the official webpage:hasplayer.js is a javascript implementation of a video player based on the W3C premium extensions, i.e. MSE and EME.公式ウェブページから：
hasplayer.js is an extension of the dash.js project with the aim of supporting additional http adaptive streaming protocols such as Microsoft Smooth Streaming protocol and Apple Http Live Streaming.
hasplayer.jsは、W3Cのプレミアムエクステンション、つまりMSEとEMEに基づいた動画プレーヤーのJavaScript実装です。
hasplayer.jsは、Microsoft Smooth StreamingプロトコルやApple Http Live Streamingなどの追加のHTTPアダプティブストリーミングプロトコルをサポートする目的で、dash.jsプロジェクトの拡張です。
MPEG-DASH
<!doctype html>
<html>
<head>
<title>Hasplayer.js DASH</title>
</head>
<body>
<div>
<video id="videoPlayer" controls="true" width="640" height="360"></video>
</div>
<script src="//orange-opensource.github.io/hasplayer.js/1.15.0/dist/hasplayer.js"></script>
<script>
(function() {
var stream = {
url: "//rdmedia.bbc.co.uk/dash/ondemand/bbb/2/client_manifest-common_init.mpd"
};
var mediaPlayer = new MediaPlayer();
mediaPlayer.init(document.querySelector("#videoPlayer"));
mediaPlayer.load(stream);
mediaPlayer.setDebug(true);
mediaPlayer.setMute(true);
})();
</script>
</body>
</html>
MPEG-DASH + Widevine DRM
Widevine DRM system is compatible with Chrome, Firefox and Android.
Widevine DRMシステムは、Chrome、Firefox、Androidと互換性があります。
Data are passed to the license server through a custom header.
In this example the custom header name is X-AxDRM-Message.
The custom header name depends on your DRM provider.
データは、カスタムヘッダーを介してライセンスサーバーに渡されます。
この例では、カスタムヘッダー名はX-AxDRM-Messageです。
カスタムヘッダ名はDRMプロバイダによって異なります。
<!doctype html>
<html>
<head>
<title>Hasplayer.js DASH + WideVine DRM</title>
</head>
<body>
<div>
<video id="videoPlayer" controls="true" width="640" height="360"></video>
</div>
<script src="//orange-opensource.github.io/hasplayer.js/1.15.0/dist/hasplayer.js"></script>
<script>
(function() {
var stream = {
url: "//media.axprod.net/TestVectors/v6.1-MultiDRM/Manifest_1080p.mpd",
protData: {
'com.widevine.alpha': {
laURL: "https://drm-widevine-licensing.axtest.net/AcquireLicense",
"httpRequestHeaders": {
"X-AxDRM-Message": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXJzaW9uIjoxLCJjb21fa2V5X2lkIjoiNjllNTQwODgtZTllMC00NTMwLThjMWEtMWViNmRjZDBkMTRlIiwibWVzc2FnZSI6eyJ0eXBlIjoiZW50aXRsZW1lbnRfbWVzc2FnZSIsImtleXMiOlt7ImlkIjoiNmU1YTFkMjYtMjc1Ny00N2Q3LTgwNDYtZWFhNWQxZDM0YjVhIn1dfX0.yF7PflOPv9qHnu3ZWJNZ12jgkqTabmwXbDWk_47tLNE"
}
}
}
};
var mediaPlayer = new MediaPlayer();
mediaPlayer.init(document.querySelector("#videoPlayer"));
mediaPlayer.load(stream);
mediaPlayer.setDebug(true);
mediaPlayer.setMute(true);
})();
</script>
</body>
</html>
Microsoft Smooth Streaming
<!doctype html>
<html>
<head>
<title>Hasplayer.js Microsoft Smooth Streaming</title>
</head>
<body>
<div>
<video id="videoPlayer" controls="true" width="640" height="360"></video>
</div>
<script src="//orange-opensource.github.io/hasplayer.js/1.15.0/dist/hasplayer.js"></script>
<script>
(function() {
var stream = {
url: "http://playready.directtaps.net/smoothstreaming/SSWSS720H264/SuperSpeedway_720.ism/Manifest"
};
var mediaPlayer = new MediaPlayer();
mediaPlayer.init(document.querySelector("#videoPlayer"));
mediaPlayer.load(stream);
mediaPlayer.setDebug(true);
mediaPlayer.setMute(true);
})();
</script>
</body>
</html>
Apple HLS
HLS playback works better when using version 1.14.1.
バージョン1.14.1を使用すると、HLS再生がうまく機能します。
<!doctype html>
<html>
<head>
<title>Hasplayer.js DEMO HLS</title>
</head>
<body>
<div>
<video id="videoPlayer" controls="true" width="640" height="360"></video>
</div>
<script src="//orange-opensource.github.io/hasplayer.js/1.14.1/dist/hasplayer.js"></script>
<script>
(function () {
var stream = {
url: "//bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
protocol: 'HLS' //to activate native support on Safari/OSx
};
var mediaPlayer = new MediaPlayer();
mediaPlayer.init(document.querySelector("#videoPlayer"));
mediaPlayer.load(stream);
mediaPlayer.setDebug(true);
mediaPlayer.setMute(true);
})();
</script>
</body>
</html>
Information sources ・ 情報源
hasplayer homepage
https://github.com/Orange-OpenSource/hasplayer.js
hasplayer API
http://orange-opensource.github.io/hasplayer.js/development/doc/jsdoc/index.html
Media files & streams
http://playready.directtaps.net/smoothstreaming/http://rdmedia.bbc.co.uk/dash/ondemand/bbb/
https://github.com/Axinom/drm-quick-start
コメント
コメントを投稿