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*** は興味深いプレイヤーなので、一般的な使用法を説明します。

##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 
<img width="651" alt="Screen Shot 2018-10-18 at 11.36.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/42582f44-5241-2691-e8d0-ecfae7e93588.png">

```html

<!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
<img width="521" alt="Screen Shot 2018-10-18 at 11.12.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/ac1c6304-47ec-64b4-da14-bd2f1ed9352b.png">

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プロバイダによって異なります。

```html 
<!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 

<img width="651" alt="Screen Shot 2018-10-18 at 11.14.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/7b0e0eb4-14ce-4f90-09da-8dc0bdbe82f9.png">

```html 
<!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

<img width="645" alt="Screen Shot 2018-10-18 at 11.16.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/652fd83a-c500-c007-4b2c-ceec4ece3ff9.png">


HLS playback works better when using version 1.14.1.
バージョン1.14.1を使用すると、HLS再生がうまく機能します。

```html
<!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