204 lines
6.4 KiB
HTML
204 lines
6.4 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|||
|
|
<title>jessibuca pro mobile demo</title>
|
|||
|
|
<script src="./vconsole.js"></script>
|
|||
|
|
<script src="./jessibuca-pro.js"></script>
|
|||
|
|
<link rel="stylesheet" href="./demo.css">
|
|||
|
|
<style>
|
|||
|
|
.container-shell:before {
|
|||
|
|
content: "jessibuca pro mobile demo";
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body class="page">
|
|||
|
|
<div class="root">
|
|||
|
|
<div class="container-shell">
|
|||
|
|
<div id="container"></div>
|
|||
|
|
<div class="input">
|
|||
|
|
<div>
|
|||
|
|
当前浏览器：
|
|||
|
|
<span id="mseSupport264" style="color: green;display: none">支持MSE H264解码；</span>
|
|||
|
|
<span id="mseSupport" style="color: green;display: none">支持MSE H265解码；</span>
|
|||
|
|
<span id="mseNotSupport264" style="color: red;display: none">不支持MSE H264解码；</span>
|
|||
|
|
<span id="mseNotSupport"
|
|||
|
|
style="color: red;display: none">不支持MSE H265解码,会自动切换成wasm解码；</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="input">
|
|||
|
|
<div>
|
|||
|
|
当前浏览器：
|
|||
|
|
<span id="wcsSupport264" style="color: green;display: none">支持Webcodecs H264解码；</span>
|
|||
|
|
<span id="wcsSupport" style="color: green;display: none">支持Webcodecs H265解码（不一定准确）；</span>
|
|||
|
|
<span id="wcsNotSupport264"
|
|||
|
|
style="color: red;display: none">不支持Webcodecs H264解码(https/localhost)；</span>
|
|||
|
|
<span id="wcsNotSupport" style="color: red;display: none">不支持Webcodecs H265解码(https/localhost),会自动切换成wasm解码</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="input">
|
|||
|
|
<div>
|
|||
|
|
当前浏览器：
|
|||
|
|
<span id="simdSupport" style="color: green;display: none">支持WASM SIMD解码</span>
|
|||
|
|
<span id="simdNotSupport"
|
|||
|
|
style="color: red;display: none">不支持WASM SIMD解码,会自动切换成wasm解码</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="input">
|
|||
|
|
<div>
|
|||
|
|
<input
|
|||
|
|
type="checkbox"
|
|||
|
|
id="useWebFullScreen"
|
|||
|
|
/><span>使用web全屏</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="input">
|
|||
|
|
<div>输入URL：</div>
|
|||
|
|
<input
|
|||
|
|
autocomplete="on"
|
|||
|
|
id="playUrl"
|
|||
|
|
value=""
|
|||
|
|
/>
|
|||
|
|
<button id="play">播放</button>
|
|||
|
|
<button id="pause" style="display: none">停止</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="input" style="line-height: 30px">
|
|||
|
|
<button id="fullscreen">全屏</button>
|
|||
|
|
|
|||
|
|
<button id="destroy">销毁</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="./demo.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var $player = document.getElementById('play');
|
|||
|
|
var $pause = document.getElementById('pause');
|
|||
|
|
var $playHref = document.getElementById('playUrl');
|
|||
|
|
var $container = document.getElementById('container');
|
|||
|
|
var $destroy = document.getElementById('destroy');
|
|||
|
|
var $fullscreen = document.getElementById('fullscreen');
|
|||
|
|
var $useWebFullScreen = document.getElementById('useWebFullScreen');
|
|||
|
|
|
|||
|
|
|
|||
|
|
var showOperateBtns = true; // 是否显示按钮
|
|||
|
|
var forceNoOffscreen = true; //
|
|||
|
|
var jessibuca = null;
|
|||
|
|
|
|||
|
|
function getQuery(name) {
|
|||
|
|
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
|||
|
|
let r = window.location.search.substr(1).match(reg);
|
|||
|
|
if (r != null) {
|
|||
|
|
return decodeURIComponent(r[2]);
|
|||
|
|
}
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
var data = JSON.parse(getQuery('data'));
|
|||
|
|
var $decoderUrl = null;
|
|||
|
|
if (data != null) {
|
|||
|
|
$playHref.value = data.apiUrl;
|
|||
|
|
$decoderUrl = data.decoderUrl;
|
|||
|
|
console.log(data.apiUrl);
|
|||
|
|
create();
|
|||
|
|
play();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function create() {
|
|||
|
|
jessibuca = new JessibucaPro({
|
|||
|
|
container: $container,
|
|||
|
|
videoBuffer: 0.2, // 缓存时长
|
|||
|
|
decoder: $decoderUrl + '/js/jessibuca-pro/decoder-pro.js',
|
|||
|
|
isResize: false,
|
|||
|
|
useSIMD: true,
|
|||
|
|
text: "",
|
|||
|
|
loadingText: "加载中",
|
|||
|
|
debug: true,
|
|||
|
|
showBandwidth: showOperateBtns, // 显示网速
|
|||
|
|
operateBtns: {
|
|||
|
|
fullscreen: showOperateBtns,
|
|||
|
|
screenshot: showOperateBtns,
|
|||
|
|
play: showOperateBtns,
|
|||
|
|
audio: showOperateBtns,
|
|||
|
|
},
|
|||
|
|
forceNoOffscreen: forceNoOffscreen,
|
|||
|
|
useWebFullScreen: $useWebFullScreen.checked,
|
|||
|
|
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);
|
|||
|
|
$player.style.display = 'inline-block';
|
|||
|
|
$pause.style.display = 'none';
|
|||
|
|
$destroy.style.display = 'none';
|
|||
|
|
$fullscreen.style.display = 'none';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
function replay() {
|
|||
|
|
if (jessibuca) {
|
|||
|
|
jessibuca.destroy().then(()=>{
|
|||
|
|
create();
|
|||
|
|
play();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
create();
|
|||
|
|
play();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function play() {
|
|||
|
|
var href = $playHref.value;
|
|||
|
|
if (href) {
|
|||
|
|
jessibuca.play(href);
|
|||
|
|
$player.style.display = 'none';
|
|||
|
|
$pause.style.display = 'inline-block';
|
|||
|
|
$destroy.style.display = 'inline-block';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$player.addEventListener('click', function () {
|
|||
|
|
play();
|
|||
|
|
}, false)
|
|||
|
|
|
|||
|
|
|
|||
|
|
$pause.addEventListener('click', function () {
|
|||
|
|
$player.style.display = 'inline-block';
|
|||
|
|
$pause.style.display = 'none';
|
|||
|
|
jessibuca.pause();
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$destroy.addEventListener('click', function () {
|
|||
|
|
if (jessibuca) {
|
|||
|
|
jessibuca.destroy().then(()=>{
|
|||
|
|
create();
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
create();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$fullscreen.addEventListener('click',function () {
|
|||
|
|
if(jessibuca){
|
|||
|
|
jessibuca.setFullscreen(true)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
$useWebFullScreen.addEventListener('click', function () {
|
|||
|
|
replay()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|