<!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: 1024px;
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: 576px;
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 autoplay width="1024" height="576">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_destroy()">停止</button>
<button onclick="down()">向下</button>
<button onclick="up()">向上</button>
<button onclick="left()">向左</button>
<button onclick="right()">向右</button>
<button onclick="topClick()">暂停旋转</button>
</div>
<script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<script>
var player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer(
{
type: "flv",
isLive: true,
url: 'flv 地址',
},
{
cors: true, // 是否跨域
enableWorker: true, // 是否多线程工作
enableStashBuffer: false, // 是否启用缓存
stashInitialSize: 128, // 缓存大小(kb) 默认384kb
autoCleanupSourceBuffer: true, // 是否自动清理缓存
}
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
handleFullScreen(player)
}
// 处理视频延迟,手动跳帧
function setIntervalFn() {
setInterval(() => {
const end = player.buffered.end(0); // 视频结尾时间
const current = player.currentTime; // 视频当前时间
const diff = end - current;// 相差时间
console.log("********difffff**********",diff);
const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
const maxPlaybackRate = 4;// 自定义设置允许的最大播放速度
let playbackRate = 1.0; // 播放速度
if (diff > diffCritical) {
console.log("相差超过4秒,进行跳转");
player.currentTime = end - 1.5;
playbackRate = Math.max(1, Math.min(diffCritical, 16));
} else if (diff > diffSpeedUp) {
console.log("相差超过1秒,进行加速");
playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16))
}
player.playbackRate = playbackRate;
if (player.paused) {
flvPlayer.play()
}
}, 2000)
}
function flv_start() {
player.play();
setIntervalFn()
setIntervalFn()
}
// 双击放大处理
function handleFullScreen (btnFullScreen) {
btnFullScreen.addEventListener('dblclick', () => {
console.log('双击了子元素, *****')
if (btnFullScreen.requestFullscreen) {
btnFullScreen.requestFullscreen()
} else if (btnFullScreen.mozRequestFullScreen) {
btnFullScreen.mozRequestFullScreen()
} else if (btnFullScreen.webkitRequestFullscreen) {
btnFullScreen.webkitRequestFullscreen()
} else if (btnFullScreen.msRequestFullscreen) {
btnFullScreen.msRequestFullscreen()
}
}, false)
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
function up() {
}
function left() {
}
function down() {
}
function right() {
}
function topClick() {
}
</script>
</body>
</html>