视频直播流web播放

2017-06-17

视频直播放映解决方案

分为PC-web端和移动web端

pc-web端采用Ckplay播放器通过RTMP协议传输视频流
mobile-web端采用h5 video标签通过HLS 传输视频流

核心代码示例

pc-web端 ckplayer

<!--pc-web端 ckplayer-->
<body>
<div id="a1"></div>
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8"></script>
<script type="text/javascript">
	var flashvars={
    //配置视频地址
		f:'rtmp://192.168.31.31:1935/live/stream',
		c:0,
		b:1,
    //配置封面
		i:'http://www.ckplayer.com/static/images/cqdw.jpg'
		};
    // 具体配置 参考和查看 [http://www.ckplayer.com/tool/flashvars.htm](http://www.ckplayer.com/tool/flashvars.htm)
	var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};
	CKobject.embedSWF('ckplayer/ckplayer.swf','a1','ckplayer_a1','600','400',flashvars,params);
</script>

mobile-web 端[HTML5 player]

<video controls autoplay webkit-playsinline>
   <source src="http://192.168.31.31:9090/live/stream.m3u8" type="application/vnd.apple.mpegurl">
   <p class="warin">Your browser does not support HTML5 video</p>
</video>