支持websocket播放方式的JTT1078流媒体服务器,解决仅6路视频播放问题
在做流媒体方案时,尤其时web客户端播放http-flv时,由于浏览器的限制,最大只能播放6路视频的播放。
而在部分客户的实际使用中,会有基于web端的超过6路的视频播放需求,这时候就用到了websocket技术,流媒体服务器通过websocket-flv或websocket-fmp4的方式实现视频播放的数据流推送,web客户端只需要调用,就可以妥妥的支持超过6路以上的音视频服务器。
对于websocket-flv的视频播放器测试地址,可以参考:http://bilibili.github.io/flv.js/demo/
只需要把websocket的地址添加进去即可播放
对于websocket-fmp4的视频播放器,下载地址:https://download.csdn.net/download/hengdela/87253553
对于http-flv播放,可以参考如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/flv.min.js"></script>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too old which doesn't support HTML5 video.</video>
</div>
<script>
let player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
let flvPlayer = flvjs.createPlayer({
type: 'flv',
hasAudio: false, <!-- 不添加这句会播放一会就出问题 -->
isLive: true,
url: 'http://ip:port/appx/channelx.flv',
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
setTimeout(function(){ flvPlayer.play();}, 0);
}
function setPlayUrl() {
var playurl = document.getElementById("videourl").value;
let player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
let flvPlayer = flvjs.createPlayer({
type: 'flv',
hasAudio: false, <!-- 不添加这句会播放一会就出问题 -->
isLive: true,
url: playurl,
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
setTimeout(function(){ flvPlayer.play();}, 0);
}
}
</script>
</body>
<div>
视频播放地址:<input id="videourl" type="text" style="width: 500px" value="http://ip:port/appx/channelx.flv">
<input type="button" value="设置" onClick="setPlayUrl()"/>
</div>
</html>