IE 11 をサポートしたビデオストリーミング方法
IE 11 をサポートしたビデオストリーミング方法:
こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html
Big Buck Bunny
© copyright 2008, Blender Foundation / www.bigbuckbunny.org
Learn how to play HLS video streams in IE11 and later versions.
IE11以降でHLSビデオストリームを再生する方法を学びます。
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 is an open sources javascript media player.
videojs はオープンソースのjavascriptメディアプレーヤーです。
If you encounter the
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
注意 :
Microsoft Windows
Android
iOS
OSX
https://github.com/videojs
https://github.com/brightcove/videojs-flashls-source-handler
https://github.com/videojs/videojs-flash/
http://gs.statcounter.com
はじめに
こんにちは 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>
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 |
| OS | Browser | Compatibility |
|---|---|---|
| Android 4.4 | Chrome | YES |
| Android 8 | Chrome | YES |
| OS | Browser | Compatibility |
|---|---|---|
| iOS 7 | Safari | YES |
| iOS 12 | Safari | YES |
| OS | Browser | Compatibility |
|---|---|---|
| Mavericks | Safari 7.1 | YES |
| Mojave | Safari 12 | YES |
Information sources ・ 情報源
https://github.com/videojshttps://github.com/brightcove/videojs-flashls-source-handler
https://github.com/videojs/videojs-flash/
http://gs.statcounter.com
コメント
コメントを投稿