配信ページをたててみるメモ

めも


  • 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": "http://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="http://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;">
&nbsp;
</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に詳しくないのでこれでいいのかは不明

コメントを残す

メールアドレスが公開されることはありません。