用obs推流到 rtmp://ip:1935/live 秘钥写房间号
<!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 : 1400px;
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 : 1000px;
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 id="videoElement" class="centeredVideo" controls width="1800" height="1300" autoplay muted>Your browser is too old which
doesn't support HTML5 video.
</video >
</div >
<br >
<div class="controls" >
<button onclick="flv_start()" >开始</button >
<button onclick="flv_pause()" >暂停</button >
<button onclick="flv_destroy()" >停止</button >
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()" >跳转</button >
</div >
<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.js" ></script >
<script >
var vElement = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: true, //关闭音频
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: 'http://172.17.0.4/live/1'
});
flvPlayer.attachMediaElement(vElement)
flvPlayer.load() //加载
}
setInterval(function () {
vElement.playbackRate = 1
console.log("时延校正判断");
if (!vElement.buffered.length) {
return
}
var end = vElement.buffered.end(0)
var diff = end - vElement.currentTime
console.log(diff)
if (5 <= diff && diff <= 60) {
console.log("二倍速")
vElement.playbackRate = 2
}
if (diff > 60) {
console.log("跳帧")
vElement.currentTime = end
}
}, 2500)
function flv_start() {
flvPlayer.play()
}
function flv_pause() {
flvPlayer.pause()
}
function flv_destroy() {
flvPlayer.pause()
flvPlayer.unload()
flvPlayer.detachMediaElement()
flvPlayer.destroy()
flvPlayer = null
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value)
}
</script >
</body >
</html >
Content type
Image
Digest
sha256:7583d5f31…
Size
9.9 MB
Last updated
about 4 years ago
docker pull 438577872/flv