西瓜视频播放器（HTML5）

微醺的饮者 發表於 2021-4-12 16:20:00

<h3 id="西瓜视频播放器html5">西瓜视频播放器（HTML5）</h3>
<p>一款带解析器、能节省流量的HTML5视频播放器<br>
https://v2.h5player.bytedance.com/</p>
<h2 id="播放视频">播放视频</h2>
<p><img src="https://img2020.cnblogs.com/blog/2174201/202104/2174201-20210412161758431-1657870975.png" alt="" loading="lazy"></p>
<pre><code class="language-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 {width: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,
         width: 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,
   width: 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>

</code></pre>
<h2 id="播放音乐">播放音乐</h2>
<p><img src="https://img2020.cnblogs.com/blog/2174201/202104/2174201-20210412161934227-1241491504.png" alt="" loading="lazy"></p>
<pre><code class="language-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 {width: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;width:40%;height:100%;margin-left:10%;z-index:1;}
   #mask {position:absolute;left: 50%;top:0;width: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;width: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,
      width: window.innerWidth,
      height: 50
   });
   player.crossOrigin = "anonymous";
   let lyric = ` 脆弱一分钟\n 作曲 : 林家谦\n 作词 : 徐世珍/吴辉福\n编曲：林家谦\n时钟不要走\n让我脆弱一分钟\n要多久才能习惯被放手\n马克杯空了暖暖的温热\n却还在我手中停留\n\n勇气不要走\n给我理由再冲动\n去相信爱情就算还在痛\n如果我不说不会有人懂\n失去你我有多寂寞\n还是愿意\n付出一切仅仅为了一个好梦\n梦里有人真心爱我陪我快乐也陪我沉默\n没有无缘无故的痛承受越多越成熟\n能让你拥抱更好的我\n 谁也不要走\n应该是一种奢求\n可是我只想握紧你的手\n我宁愿等候也不愿错过\n你对我微笑的时候\n\n还是愿意\n用尽全力仅仅为了一个以后\n哪怕生命并不温柔哪怕被幸福一再反驳\n也要相信伤痕累累其实只是在琢磨\n能让你为之一亮的我\n\n制作人：林宥嘉\n制作助理：张婕汝\n录音师：陈文骏、叶育轩\n录音室：白金录音室\n混音师：SimonLi @ nOiz\nOP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\nSP: Warner/Chappell Music Taiwan Ltd.\nOP：Universal Ms Publ Ltd Taiwan\n`
   let nullText = 0;
   player.on('lyricUpdate', (res) => {
   console.log(res);
   if(res.lyric === '\n') {
      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>
</code></pre><br><br>
来源：https://www.cnblogs.com/xm0328/p/14648591.html

頁: [1]

琼殿技术论坛's Archiver

西瓜视频播放器（HTML5）