はじめに

こんにちは 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ビデオストリームを再生する方法を学びます。

Web browser market in Japan ・日本のウェブブラウザ市場

According statcounter in December 2018 Internet Explorer represents about 14% of the web browser market in Japan.
2018年12月のstatcounter によると、Internet Explorerは日本のウェブブラウザ市場の約14％を占めています。

© StatCounter

VIDEOJS 7.4.2: HLS + Flash fallback

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

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

元記事はこちら

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