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

- 1月 25, 2019

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

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

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫