字节跳动bytedance西瓜视频播放器研究

最新推荐文章于 2024-04-17 18:00:56 发布

Museions

最新推荐文章于 2024-04-17 18:00:56 发布

阅读量2.8k

点赞数

分类专栏： # 音视频类文章标签： video audio

本文解决了你的问题吗？转载注明链接,帮助更多人。

本文链接：https://blog.csdn.net/museions/article/details/100933726

版权

音视频类专栏收录该内容

5 篇文章 0 订阅

订阅专栏

西瓜视频播放器插件API文档http://h5player.bytedance.com/

1.视频播放器示例：

<!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>xgplayer</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="//cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
      let player=new Player({
        id: 'mse',
        autoplay: false,
        volume: 0.3,
        url:'/video/mp4/xgplayer-demo-720p.mp4',
        poster: "//s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
        playsinline: true,
        height: window.innerHeight,
        width: window.innerWidth
      });
    </script>
  </body>
</html>

运行查看效果：http://h5player.bytedance.com/gettingStarted/#%E4%BD%BF%E7%94%A8

2.音乐播放器示例

音乐播放器API文档http://h5player.bytedance.com/music/

<!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('/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('/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-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="//cdn.jsdelivr.net/npm/xgplayer@1.1.7/browser/index.js" charset="utf-8"></script>
    <script src="//cdn.jsdelivr.net/npm/xgplayer-music/browser/index.js" charset="utf-8"></script>
    <script type="text/javascript">
      let player = new window.Music({
          id: 'mse',
          url: [{src: '/video/music/audio.mp3', name: '林宥嘉·脆弱一分钟', poster: '/video/music/poster-small.jpeg'}],
          volume: 0.8,
          width: window.innerWidth,
          height: 50
      });
      let lyric = `[00:00.00] 脆弱一分钟\n[00:00.00] 作曲 : 林家谦\n[00:00.00] 作词 : 徐世珍/吴辉福\n[00:00.000]编曲：林家谦\n[00:00.000]时钟不要走\n[00:04.220]让我脆弱一分钟\n[00:07.440]要多久才能习惯被放手\n[00:15.800]马克杯空了 暖暖的温热\n[00:22.660]却还在我手中停留\n[00:27.960]\n[00:29.790]勇气不要走\n[00:32.200]给我理由再冲动\n[00:35.690]去相信爱情 就算还在痛\n[00:43.960]如果我不说不会有人懂\n[00:50.720]失去你我有多寂寞\n[00:55.610]还是愿意\n[00:57.580]付出一切仅仅为了一个好梦\n[01:03.980]梦里有人真心爱我 陪我快乐也陪我沉默\n[01:11.260]没有无缘无故的痛承受越多越成熟\n[01:18.630]能让你拥抱更好的我\n[01:25.030] 谁也不要走\n[01:28.270]应该是一种奢求\n[01:31.900]可是我只想 握紧你的手\n[01:39.780]我宁愿等候 也不愿错过\n[01:46.630]你对我微笑的时候\n[01:56.780]\n[02:18.910]还是愿意\n[02:21.320]用尽全力仅仅为了一个以后\n[02:27.870]哪怕生命并不温柔哪怕被幸福一再反驳\n[02:34.870]也要相信伤痕累累 其实只是在琢磨\n[02:42.070]能让你为之一亮 的我\n[02:53.910]\n[02:56.350]制作人：林宥嘉\n[02:57.750]制作助理：张婕汝\n[02:59.010]录音师：陈文骏、叶育轩\n[03:00.410]录音室：白金录音室\n[03:01.740]混音师：SimonLi @ nOiz\n[03:03.000]OP: Terence Lam Production & Co. (Warner/Chappell Music, HK Ltd.)\n[03:04.050]SP: Warner/Chappell Music Taiwan Ltd.\n[03:04.910]OP：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>

在线运行效果：http://h5player.bytedance.com/examples/?type=vod&plugin=xg-music

以上就是西瓜播放器的构造方法了，关于详细API本文已有相关链接。

Museions

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
字节跳动bytedance西瓜视频播放器研究

西瓜视频播放器插件API文档http://h5player.bytedance.com/1.视频播放器示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name=viewport content="width=device-width,ini...
复制链接

扫一扫