<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jessibuca</title>
<script src="./jessibuca.js"></script>
<style>
html,
body {
height: 100%;
margin: 0px !important;
}
.page {
overflow: hidden;
padding: 0px !important;
margin: 0px !important;
}
#container {
width: 100%;
height: 100vh;
background: rgba(13, 14, 27, 0.7);
overflow: hidden;
padding: 0px !important;
margin: 0px !important;
}
</style>
</head>
<body class="page" style="margin: 0px !important">
<div class="root">
<div id="container"></div>
</div>
<script>
var $container = document.getElementById('container') // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
var showOperateBtns = false // 是否显示按钮
var forceNoOffscreen = true //
var jessibuca = null
function create() {
jessibuca = new Jessibuca({
container: $container, // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
videoBuffer: 0.2, // 设置最大缓冲时长，单位秒，播放器会自动消除延迟
isResize: true, // 1. 当为`true`的时候：视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边。 等同于 `setScaleMode(1)` 2. 当为`false`的时候：视频画面完全填充canvas区域,画面会被拉伸。等同于 `setScaleMode(0)`
loadingText: '视频加载中', // 加载过程中文案
useMSE: false, // 是否开启MediaSource硬解码 视频编码只支持H.264视频（Safari on iOS不支持）不支持 forceNoOffscreen 为 false (开启离屏渲染)
useWCS: false, // 是否开启Webcodecs硬解码 视频编码只支持H.264视频 (需在chrome 94版本以上，需要https或者localhost环境) 支持 forceNoOffscreen 为 false （开启离屏渲染)
debug: false, // 是否开启控制台调试打
showBandwidth: false, // 是否显示显示网速
loadingTimeout: 60, // flv地址请求超时时间
operateBtns: {
// 配置操作按钮
fullscreen: showOperateBtns, // 是否显示全屏按钮
screenshot: showOperateBtns, // 是否显示截图按钮
play: showOperateBtns, // 是否显示播放暂停按钮
audio: false, // 是否显示声音按钮
recorder: false // 是否显示录制按
},
forceNoOffscreen: forceNoOffscreen, // 是否不使用离屏模式（提升渲染能力）
isNotMute: false, // 是否开启声音，默认是关闭声音播放的
hotKey: false, // 是否开启键盘快捷键 目前支持的键盘快捷键有：esc -> 退出全屏；arrowUp -> 声音增加；arrowDown -> 声音减少；
keepScreenOn: false, // 开启屏幕常亮，在手机浏览器上, canvas标签渲染视频并不会像video标签那样保持屏幕常亮
supportDblclickFullscreen: false // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
})
jessibuca.on('audioInfo', function (audioInfo) {
console.log('audioInfo', audioInfo)
})
jessibuca.on('videoInfo', function (videoInfo) {
console.log('videoInfo', videoInfo)
console.log('width:', videoInfo.width, 'height:', videoInfo.height)
localStorage.setItem('videoInfoWidth', videoInfo.width)
localStorage.setItem('videoInfoHeight', videoInfo.height)
})
}
create()
// 取视频流地址
let playUrl = ''
// 1.存在地址栏
if (window.location.href.includes('playUrl')) {
playUrl = window.location.href.split('playUrl=')[1]
}
// 2.存在session缓存
else {
playUrl = window.sessionStorage.getItem('flv-url')
}
// 播放视频
jessibuca.play(playUrl)
// 销毁视频
const destroy = () => {
if (jessibuca) {
jessibuca.destroy()
}
create()
}
// 定时两分钟重新刷新视频消除延时
// window.setInterval(() => {
// destroy()
// setTimeout(() => {
// jessibuca.play(playUrl);
// })
// },1000 * 120)
</script>
</body>
</html>
