西瓜视频播放器（HTML5）
一款带解析器、能节省流量的HTML5视频播放器
https://v2.h5player.bytedance.com/
播放视频
<!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>播放器</title>
<style type="text/css">
html, body {100%;height:100%;margin:auto;overflow: hidden;}
body {display:flex;}
#mse {flex:auto;}
</style>
<script type="text/javascript">
window.addEventListener('resize',function(){document.getElementById('mse').style.height=window.innerHeight+'px';});
</script>
</head>
<body>
<div id="mse"></div>
<script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer/2.9.6/browser/index.js" charset="utf-8"></script>
<script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer-mp4/1.1.8/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
let player=new Player({
id: 'mse',
autoplay: true,
volume: 0.3,
url:'//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
poster: "//s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
playsinline: true,
thumbnail: {
pic_num: 44,
160,
height: 90,
col: 10,
row: 10,
urls: ['//s3.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo-thumbnail.jpg'],
},
danmu: {
comments: [
{
duration: 15000,
id: '1',
start: 3000,
txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
style: { //弹幕自定义样式
color: '#ff9500',
fontSize: '20px',
border: 'solid 1px #ff9500',
borderRadius: '50px',
padding: '5px 11px',
backgroundColor: 'rgba(255, 255, 255, 0.1)'
}
}
],
area: {
start: 0,
end: 1
}
},
height: window.innerHeight,
window.innerWidth,
whitelist: ['']
});
player.emit('resourceReady', [{ name: '超清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' }, { name: '高清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' }, { name: '标清', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }]);
</script>
</body>
</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>播放器</title>
<style type="text/css">
html, body {100%;height:100%;background:white;margin:auto;overflow: hidden;}
body {background-image:url('//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/bg.jpg');background-size:100% 100%}
#left {position:absolute;top:0;left:0;40%;height:100%;margin-left:10%;z-index:1;}
#mask {position:absolute;left: 50%;top:0;50%;height:100%;-webkit-mask-image:linear-gradient(to bottom,rgba(255,255,255,0) 0,rgba(255,255,255,.6) 15%,rgba(255,255,255,1) 25%,rgba(255,255,255,1) 75%,rgba(255,255,255,.1) 85%,rgba(255,255,255,0) 100%);}
#gc {height:100%;display: block;position: relative;}
#mse {position:absolute;bottom:0;left:0;}
#album {height:55%;background-image:url('//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/poster-big.jpeg');background-size:60%;background-repeat:no-repeat;background-position:center left;}
#info {font-size: 18px;line-height:40px;53%;color: white;}
#info > div {font-size: 12px;line-height:16px;color: rgba(225,225,225,.8);}
.xgplayer-lyric-item {
display: block;
text-align: center;
line-height: 22px !important;
font-size: 12px !important;
color: rgba(225,225,225,.8) !important;
}
.xgplayer-lyric-item-active {
color: rgb(49, 194, 124) !important;
}
#canvas {
position:absolute;bottom:-5px;left:0;z-index:0;
-webkit-mask-image:linear-gradient(to bottom,rgba(255,255,255,0.3) 0,rgba(255,255,255,.8) 70%,rgba(255,255,255,0.9) 100%);
}
.xgplayer-lrcWrap {
border: 0px solid #ddd !important;
height: 100% !important;
padding: 0 !important;
}
.xgplayer-play {
margin: -2px 0 0 !important;
}
.xgplayer-time {
top: 50% !important;
}
.xgplayer-lrcForward {left: 0px !important;}
.xgplayer-lrcBack {left: 0px !important;top: 75% !important;}
</style>
</head>
<body>
<div id="left">
<div id="album"></div>
<div id="info">
脆弱一分钟
<div>歌手：林宥嘉</div>
<div>专辑：脆弱一分钟 </div>
</div>
</div>
<div id="canvas">
<canvas width="550" height="110"></canvas>
</div>
<div id="mask"><div id="gc"></div></div>
<div id="mse"></div>
<script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer/2.9.6/browser/index.js" charset="utf-8"></script>
<script src="//sf1-ttcdn-tos.pstatp.com/obj/unpkg/xgplayer-music/2.1.7/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
let player = new window.Music({
id: 'mse',
url: [{src: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/audio.mp3', name: '林宥嘉·脆弱一分钟', poster: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/music/poster-small.jpeg'}],
volume: 0.8,
window.innerWidth,
height: 50
});
player.crossOrigin = "anonymous";
let lyric = `[00:00.00] 脆弱一分钟
[00:00.00] 作曲 : 林家谦
[00:00.00] 作词 : 徐世珍/吴辉福
[00:00.000]编曲：林家谦
[00:00.000]时钟不要走
[00:04.220]让我脆弱一分钟
[00:07.440]要多久才能习惯被放手
[00:15.800]马克杯空了 暖暖的温热
[00:22.660]却还在我手中停留
[00:27.960]
[00:29.790]勇气不要走
[00:32.200]给我理由再冲动
[00:35.690]去相信爱情 就算还在痛
[00:43.960]如果我不说不会有人懂
[00:50.720]失去你我有多寂寞
[00:55.610]还是愿意
[00:57.580]付出一切仅仅为了一个好梦
[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默
[01:11.260]没有无缘无故的痛承受越多越成熟
[01:18.630]能让你拥抱更好的我
[01:25.030] 谁也不要走
[01:28.270]应该是一种奢求
[01:31.900]可是我只想 握紧你的手
[01:39.780]我宁愿等候 也不愿错过
[01:46.630]你对我微笑的时候
[01:56.780]
[02:18.910]还是愿意
[02:21.320]用尽全力仅仅为了一个以后
[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳
[02:34.870]也要相信伤痕累累 其实只是在琢磨
[02:42.070]能让你为之一亮 的我
[02:53.910]
[02:56.350]制作人：林宥嘉
[02:57.750]制作助理：张婕汝
[02:59.010]录音师：陈文骏、叶育轩
[03:00.410]录音室：白金录音室
[03:01.740]混音师：SimonLi @ nOiz
[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)
[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.
[03:04.910]OP：Universal Ms Publ Ltd Taiwan
`
let nullText = 0;
player.on('lyricUpdate', (res) => {
console.log(res);
if(res.lyric === '
') {
nullText++;
}
});
var an=player.analyze(document.querySelector('canvas'))
an.style = {
bgColor: '#c8c8c8',
color: '#909099'
}
player.on('playing', function(){
player.lyric (lyric, document.querySelector('#gc'));
player.__lyric__.show();
player.mode = 2;
});
document.getElementById("canvas").width = window.innerWidth;
document.getElementById("canvas").height = window.innerHeight * 0.36;
</script>
</body>
</html>