文章rtp rtsp gb 转html5播放
文章【rtp rtsp gb28181 转html5】 忘了放flv得测试代码,下面给出:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 640px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height:360px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video muted id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">Your browser is too
old which doesn't support HTML5 video.</video>
</div>
<br>
<div class="controls">
<!--<button οnclick="flv_load()">加载</button>-->
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
</div>
<script src="flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
hasAudio: false,
hasVideo: true,
isLive: true,//<====加个这个
url: 'ws://127.0.0.1:9000/live/1001',//<==自行修改
},
{
enableWorker: false,
enableStashBuffer: false,
//stashInitialSize: 32,
/*lazyLoad: true,
lazyLoadMaxDuration: 3 * 60,
lazyLoadRecoverDuration: 30,
deferLoadAfterSourceOpen: false,
autoCleanupSourceBuffer: true,
autoCleanupMaxBackwardDuration: 3 * 60,
autoCleanupMinBackwardDuration: 2 * 60,
statisticsInfoReportInterval: 600,
fixAudioTimestampGap: false,
*/
}
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
flv_start();
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
</script>
</body>
</html>
由于我们得测试并没有音频,因此将音频禁止了,同时video标签上把muted加上,代表静音,防止chrome浏览器报错停止视频播放。
结果如下图:
再次解释一下由于使用得是ws连接,websocket是默认跨域,所以使用文件直接浏览器打开就好,这样测试方便。