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

2017年4月21日

めも


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

未分類

Posted by neff