<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jessibuca.js"></script>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
background: #333;
overflow-x: hidden;
overflow-y: hidden;
}
.root {
display: flex;
place-content: center;
width: 100%;
height: 100%;
}
#videoElement {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="root">
<div id="videoElement"></div>
</div>
<script>
// 视频元素
var videoElement = document.getElementById('videoElement');
var showOperateBtns = true; // 是否显示按钮
var forceNoOffscreen = true; //
var jessibuca = null;
function init() {
jessibuca = new Jessibuca({
container: videoElement,
videoBuffer: 0.2, // 缓存时长
loadingTimeout: 30,
timeout: 30,
isResize: false,
text: "无信号",
loadingText: "信号加载中...",
useMSE: false,
controlAutoHide: true,
debug: false,
showBandwidth: showOperateBtns, // 显示网速
operateBtns: {
fullscreen: showOperateBtns,
screenshot: showOperateBtns,
play: showOperateBtns,
audio: false,
recorder: showOperateBtns
},
forceNoOffscreen: forceNoOffscreen,
isNotMute: false,
},);
jessibuca.onLog = msg => console.error(msg);
jessibuca.onRecord = (status) => console.log('onRecord', status);
jessibuca.onPause = () => console.log('onPause');
jessibuca.onPlay = () => console.log('onPlay');
jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
jessibuca.onMute = msg => console.log('onMute', msg);
}
function pysp(url) {
jessibuca.play(url);
}
function stoped() {
if (jessibuca) {
jessibuca.destroy();
}
init();
}
init();
// pysp("http://flv.bdplay.nodemedia.cn/live/bbb.flv")
</script>
</body>
</html>
