Files
Pichome/dzz/xgplayer/template/main.htm
2021-12-09 21:00:09 +08:00

160 lines
4.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
<meta name="referrer" content="no-referrer">
<title>$data[name]</title>
<style type="text/css">
html, body {width:100%;height:100%;margin:auto;overflow: hidden;background: #000;box-sizing: border-box}
#mse{
width:100% !important;
height:100% !important;
padding-top:0 !important;
}
#canvas {
position:absolute;top:0;bottom:50px;right:0;left:0;z-index:10;;
text-align: center;
}
canvas{
width:100%;height:100%;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-cover,.xgplayer-next,.xgplayer-prev{
display: none;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-forward{
margin-left:15px !important;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplay-icon{
padding-top:10px !important;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-play .xgplayer-icon{
margin-top:0 !important;
}
.xgplayer-skin-default.xgplayer-music .xgplayer-controls .xgplayer-time{
top:35% !important;
}
<!--{if $ismobile}-->
.xgplayer-skin-default .xgplayer-controls{
display: -webkit-flex !important;
display: -moz-box !important;
display: flex !important;
}
<!--{/if}-->
</style>
<script src="{MOD_PATH}/js/xgplayer.js"></script>
<!--{if $_GET['ext']=='flv' || $_GET['ext']=='m4v'}-->
<script src="{MOD_PATH}/js/xgplayer-flv.js" charset="utf-8"></script>
<!--{elseif $_GET['ext']=='m3u8' || $_GET['ext']=='HLS'}-->
<script src="{MOD_PATH}/js/xgplayer-hls.js" charset="utf-8"></script>
<!--{elseif $_GET['ext']=='mpg' || $_GET['ext']=='mpeg'}-->
<script src="{MOD_PATH}/js/xgplayer-shaka.js" charset="utf-8"></script>
<!--{elseif $_GET['ext']=='mp3' || $_GET['ext']=='ogg' || $_GET['ext']=='wav'}-->
<script src="{MOD_PATH}/js/xgplayer.music.js" charset="utf-8"></script>
<!--{/if}-->
</head>
<body>
<!--{if $_GET['ext']=='mp3' || $_GET['ext']=='ogg' || $_GET['ext']=='wav' }-->
<div id="canvas">
<canvas ></canvas>
</div>
<!--{/if}-->
<div id="mse"></div>
<!--{if $_GET['ext']=='mp3' || $_GET['ext']=='ogg' || $_GET['ext']=='wav' }-->
<script type="text/javascript">
document.querySelector('canvas').width=window.innerWidth;
document.querySelector('canvas').height=window.innerHeight-50;
window.addEventListener('resize',function(){
document.querySelector('canvas').width=window.innerWidth;
document.querySelector('canvas').height=window.innerHeight-50;
});
let player = new window.Music({
id: 'mse',
url: [{src: "$src", name: '$data[name]', poster: '$_G[siteurl]dzz/images/b.gif',vid:'1'}],
volume: 0.8,
width: '100%',
height: 50,
preloadNext: false,
});
player.crossOrigin = "anonymous";
var an=player.analyze(document.querySelector('canvas'))
/* an.style = {
bgColor: '#c8c8c8',
color: '#909099'
}*/
an.mode="bar";
an.size=2048;
an.status='on';
player.on('playing', function(){
player.mode = 2;
});
//document.getElementById("canvas").height = window.innerHeight * 0.36;
</script>
<!--{elseif $_GET['ext']=='flv' || $_GET['ext']=='m4v'}-->
<script type="text/javascript">
var player = new FlvPlayer({
id: 'mse',
url: "$src",
playsinline: true,
"videoInit": true,
});
</script>
<!--{elseif $_GET['ext']=='m3u8' || $_GET['ext']=='HLS'}-->
<script type="text/javascript">
let player = new HlsPlayer({
id: 'mse',
url:"$src",
autoplay: false,
playsinline: true,
height: '100%',
width: '100%',
"videoInit": true,
});
</script>
<!--{elseif $_GET['ext']=='mpg' || $_GET['ext']=='mpeg'}-->
<script type="text/javascript">
new window.ShakaJsPlayer({
id: 'mse',
url: "$src",
ignores: ['error'],
playsinline: true,
height: '100%',
width: '100%',
"videoInit": true,
});
</script>
<!--{else}-->
<script type="text/javascript">
var player = new Player({
"id": "mse",
"url": "$src",
"playsinline": true,
"whitelist": [
""
],
"keyShortcut": "on",
"playbackRate": [
0.5,
1,
1.5,
2,
2.5
],
"screenShot": false,
"download": false,
"pip": false,
"fluid": true,
"videoInit": true,
"autoplay": false,
});
</script>
<!--{/if}-->
</body>
</html>