Posted at

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


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-browser-JP-monthly-201712-201812.png

© StatCounter


VIDEOJS 7.4.2: HLS + Flash fallback

Screen Shot 2019-01-25 at 10.12.22.png

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