IE 11 をサポートしたビデオストリーミング方法

##はじめに

こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html

##Copyrights of videos
**Big Buck Bunny**
*© copyright 2008, Blender Foundation / www.bigbuckbunny.org*

###Objective・目的
Learn how to play HLS video streams in IE11 and later versions.
IE11以降でHLSビデオストリームを再生する方法を学びます。

![morpheus.jpg](https://qiita-image-store.s3.amazonaws.com/0/229807/bde2c049-6095-397d-fc0e-bf8ecb602fe9.jpeg)

###Web browser market in Japan ・日本のウェブブラウザ市場
According [statcounter](http://gs.statcounter.com/) in December 2018 Internet Explorer represents about 14% of the web browser market in Japan.
2018年12月の[statcounter](http://gs.statcounter.com/) によると、Internet Explorerは日本のウェブブラウザ市場の約14％を占めています。

![StatCounter-browser-JP-monthly-201712-201812.png](https://qiita-image-store.s3.amazonaws.com/0/229807/ed6a0391-011d-6576-233a-d7c32eceaeb3.png)
*© StatCounter*




## VIDEOJS 7.4.2:  HLS + Flash fallback

<img width="962" alt="Screen Shot 2019-01-25 at 10.12.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/229807/d8e4d156-4886-e597-9e78-8f2379ab949c.png">


videojs is an open sources javascript media player.
videojs はオープンソースのjavascriptメディアプレーヤーです。

```html 
<!DOCTYPE html>
<html>

<head>
  <title>Videojs 7 + HLS flash fallback</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.4.2/video-js.min.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.4.2/video.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-flash/2.1.2/videojs-flash.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/videojs-flashls-source-handler@1.1.2/dist/videojs-flashls-source-handler.min.js"></script>
</head>

<body>
  <video class="video-js vjs-default-skin" id="video-container" controls>
    <source src="//184.72.239.149/vod/smil:BigBuckBunny.smil/playlist.m3u8" type="application/x-mpegURL">
  </video>
</body>
<script>
  var options = {
    flash: {
      swf: '//cdnjs.cloudflare.com/ajax/libs/videojs-swf/5.4.2/video-js.swf'
    },
    fluid: true
  };
  var player = videojs('video-container', options);
</script>

</html>
```

If you encounter the `FLASHLS_ERR_CROSS_DOMAIN` error, you may need to create a `crossdomain.xml` file for your domain. 
FLASHLS_ERR_CROSS_DOMAINエラーが発生した場合は、ドメイン用のcrossdomain.xmlファイルを作成する必要があります。
**More info・ 情報源**
https://github.com/videojs/videojs-flash/issues/96
https://stackoverflow.com/questions/213251/can-someone-post-a-well-formed-crossdomain-xml-sample

**Caution :** if you decide to use the `crossdomain.xml` file, you have to consider security.
**注意 :** `crossdomain.xml`ファイルを使用することにした場合は、セキュリティを考慮する必要があります。

### Compatibility・ 互換性

**Microsoft Windows**

| OS      |      Browser |   Compatibility   |
|:-----------------:|:------------------:|:------------------:|
| Windows 10        |              IE11|        YES     |
| Windows 10          |            Edge (15-18) |       YES       |
| Windows 8.1           |            IE11 |       YES    |
| Windows 7             |              IE11 |      YES      |
| Windows 7              |                Firefox 45+ |        YES        |
| Windows 7              |               Chrome 45+ |        YES  |

**Android**

| OS      |      Browser |   Compatibility   |
|:-----------------:|:------------------:|:------------------:|
| Android 4.4        |             Chrome|        YES     |
| Android 8       |            Chrome|        YES     |

**iOS**

| OS      |      Browser |   Compatibility   |
|:-----------------:|:------------------:|:------------------:|
| iOS 7        |             Safari|        YES     |
| iOS 12       |            Safari|        YES     |


**OSX**

| OS      |      Browser |   Compatibility   |
|:-----------------:|:------------------:|:------------------:|
| Mavericks       |             Safari 7.1|        YES     |
|Mojave     |            Safari 12|        YES     |



##Information sources ・ 情報源

https://github.com/videojs
https://github.com/brightcove/videojs-flashls-source-handler
https://github.com/videojs/videojs-flash/

http://gs.statcounter.com