##はじめに
こんにちは streampack チームのメディです。
https://cloudpack.jp/service/option/streampack.html
##Objective・目的
Learning how to use videojs + RTMP through a simple example.
videojs + RTMPの簡単な例を学ぶこと。
##A simple implementation ・ 簡単な実装
<!DOCTYPE html>
<html>
<head>
<title>Videojs 7 + RTMP (flash)</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video-js.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/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 muted autoplay >
<source src="rtmp://fms.105.net/live/rmc1" type="rtmp/mp4">
</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>
Compatibility ・ウェブブラウザの互換性
| Browser | Compatibility |
|---|---|
| Safari 12 Desktop | YES |
| Firefox 69 Desktop | YES |
| Chrome 74 Desktop | YES |
##Information sources ・ 情報源
https://www.wowza.com/community/questions/50896/live-247-rtmp-stream-demo-url.html
https://github.com/videojs/video.js