<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jessibuca</title>
<script src="./jessibuca.js"></script>
<style>
.root {
width: 100%;
height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr; /* 定义两列，每列占据相等空间 */
gap: 3px; /* 可选，添加一些间距 */
padding: 0px !important;
margin: 0px !important;
}
.container {
background: rgba(13, 14, 27, 0.7);
height: 100%;
}
</style>
</head>
<body class="page" style="margin: 0px !important">
<div class="root">
<div class="container" id="container1">1</div>
<div class="container" id="container2">2</div>
<div class="container" id="container3">3</div>
<div class="container" id="container4">4</div>
<div class="container" id="container5">5</div>
<div class="container" id="container6">6</div>
</div>
<script>
// var $container = document.getElementById('container') // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
var showOperateBtns = false // 是否显示按钮
var forceNoOffscreen = true //
var jessibuca = null
var playList = [];
function create(id) {
var $container = document.getElementById('container' + id);
jessibuca = new Jessibuca({
container: $container, // 播放器容器 若为 string ，则底层调用的是 document.getElementById('id')
videoBuffer: 0.2, // 设置最大缓冲时长，单位秒，播放器会自动消除延迟
isResize: false, // 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: true, // 是否开启控制台调试打
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: true // 是否支持屏幕的双击事件，触发全屏，取消全屏事件
})
playList.push(jessibuca);
}
for (let i = 0; i < 6; i++) {
create(i + 1);
}
// 取视频流地址
let playUrl1 = ''
let playUrl2 = ''
let playUrl3 = ''
let playUrl4 = ''
let playUrl5 = ''
let playUrl6 = ''
const getUrl = new URL(window.location.href);
// 1.存在地址栏
if (window.location.href.includes('playUrl1')) {
playUrl1 = getUrl.searchParams.get('playUrl1')
}
if (window.location.href.includes('playUrl2')) {
playUrl2 = getUrl.searchParams.get('playUrl2')
}
if (window.location.href.includes('playUrl3')) {
playUrl3 = getUrl.searchParams.get('playUrl3')
}
if (window.location.href.includes('playUrl4')) {
playUrl4 = getUrl.searchParams.get('playUrl4')
}
if (window.location.href.includes('playUrl5')) {
playUrl5 = getUrl.searchParams.get('playUrl5')
}
if (window.location.href.includes('playUrl6')) {
playUrl6 = getUrl.searchParams.get('playUrl6')
}
// 2.存在session缓存
// else {
// playUrl = window.sessionStorage.getItem('flv-url')
// }
console.log('插件playerVideo6-playUrl1', playUrl1);
console.log('插件playerVideo6-playUrl2', playUrl2);
console.log('插件playerVideo6-playUrl3', playUrl3);
console.log('插件playerVideo6-playUrl4', playUrl4);
console.log('插件playerVideo6-playUrl5', playUrl5);
console.log('插件playerVideo6-playUrl6', playUrl6);
// 播放视频
playUrl1 && playList[0].play(playUrl1)
playUrl2 && playList[1].play(playUrl2)
playUrl3 && playList[2].play(playUrl3)
playUrl4 && playList[3].play(playUrl4)
playUrl5 && playList[4].play(playUrl5)
playUrl6 && playList[5].play(playUrl6)
// 销毁视频
const destroy = () => {
for (let i = 0; i < 6; i++) {
let player = playList[i];
player && player.destroy()
}
playList = [];
setTimeout(() => {
for (let i = 0; i < 6; i++) {
create(i + 1);
}
}, 100)
}
</script>
</body>
</html>
