配信ページをたててみるメモ
めも
- obs>Flazr>web
- flv.js or flowplayer
flv.jsはなんかレンタルサーバーだとうまく動かないのはポートかクロスドメインの関係・・・?
flv.js
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>I am rice.</title> <style type="text/css"> video{ max-width: 100%; height: auto; } </style> </head> <body> <script src="flv.min.js"></script> <video id="videoElement" controls autoplay></video> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ "type": "flv", "isLive" : true, "cors" : true, "url": "https://host:port/hoge/hage.flv" }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> </body> </html>
flowplayer
<html> <head> <meta charset="utf-8"> <title>Live</title> <link rel="stylesheet" href="default.css" type="text/css"> <script type="text/javascript">function GetFlashVersion(){var m,f,o;try{o=navigator.plugins["Shockwave Flash"];if(o[0].enabledPlugin!=null){f=o.description.slice(16)}}catch(p){try{m=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.7");f=m&&m.GetVariable("$version")}catch(n){try{m=new ActiveXObject("ShockwaveFlash.ShockwaveFlash.6");f=m&&m.GetVariable("$version")}catch(l){}}}f=/(\d+)[^\d]+(\d+)[^\d]*(\d*)/.exec(f);return f?[1*f[1],1*f[(f[1]*1>9?2:3)]*1]:[0,0]}</script> <script type="text/javascript">if (GetFlashVersion()[0] == 0 && !navigator.platform.match("Win")) { location.href = "./index_m.html"; }</script> <script src="./flowplayer/flowplayer-3.2.13.min.js"></script> </head> <body onLoad="OnLoad();"> <div id="player" href="https://host:port/hoge/hage.flv" style="width:864px;height:486px;"></div> <script type="text/javascript">flowplayer("player", "./flowplayer/flowplayer-3.2.18.swf", { clip: { autoPlay: true, live: true, scaling: 'fit' } });</script> <div style="width: 864px; font-size: 70%; text-align: right;"> </div> <div><a href="./small.html">小</a> <a href="./window.html">窓</a> <a id="linkMobile" href="./index_m.html" style="display: none;">モバイル</a></div> </body> </html>
参考
flv.js/README.md at master · Bilibili/flv.js · GitHub
自家製RTMP+HLS配信のすすめ(その1)
とりあえず適当にしたら動いたけど、pcに詳しくないのでこれでいいのかは不明
Discussion
New Comments
No comments yet. Be the first one!