首页 > 编程语言 >微信小程序(六)视频页

微信小程序(六)视频页

时间:2023-07-19 22:57:07浏览次数:35  
标签:视频 false name 微信 程序 alg null id size

1. 效果

1. 逻辑

这里这里的接口需要携带登录之后的cookie。

1. 获取导航数据, 获取到之后截取前14 个。并且将第一个设为默认选中状态。
2. 获取视频列表数据, 获取到之后再调 /video/url 获取视频对应的播放URL
3. 将视频数据存入data 中,进行界面渲染
4. 点击导航栏的三个点和每个标题的点都可以进行分享

2. 效果演示

2. 核心代码

  1. wxml
<view class="videoContainer">
  <!-- 头部区域 -->
  <view class="header">
    <image src="/static/images/video/video.jpg"></image>
    <view class="search" bindtap="toSearch">
      <input type="text" placeholder="搜索音乐"/>
    </view>
    <navigator url="/pages/search/search" open-type="navigate" class="navigator">
       <text class="iconfont icon-guanbi"></text> 搜索
    </navigator>
    <image src="/static/images/logo.png"></image>
  </view>

  <!-- 导航区域 -->
  <scroll-view
      scroll-x
      class="navScroll"
      enable-flex
      scroll-into-view="{{'scroll' + navId}}"
      scroll-with-animation
  >
    <view id="{{'scroll' + item.id}}" class="navItem" wx:for="{{videoGroupList}}" wx:key="id">
      <view class="navContent {{navId === item.id?'active': ''}}" bindtap="changeNav" id="{{item.id}}" data-id="{{item.id}}">
        {{item.name}}
      </view>
    </view>
  </scroll-view>

  <!-- 视频列表区域 -->
  <scroll-view
      scroll-y
      class="videoScroll"
      refresher-enabled
      bindrefresherrefresh="handleRefresher"
      refresher-triggered="{{isTriggered}}"
      bindscrolltolower="handleToLower"
  >
    <view class="videoItem" wx:for="{{videoList}}" wx:key="id">
      <video
          src="{{item.detailUrl.url}}"
          bindplay="handlePlay"
          id="{{item.data.vid}}"
          poster="{{item.data.coverUrl}}"
          class="common"
          object-fit="cover"
          wx:if='{{videoId === item.data.vid}}'
          bindtimeupdate="handleTimeUpdate"
          bindended="handleEnded"
      ></video>

      <!-- 性能优化:使用image图片代替video标签 -->
      <image wx:else bindtap="handlePlay" id="{{item.data.vid}}" class="common" src="{{item.data.coverUrl}}"></image>


      <view class="content">{{item.data.title}}</view>

      <view class="footer">
        <image class="avatar" src="{{item.data.creator.avatarUrl}}"></image>
        <text class="nickName">{{item.data.creator.nickname}}</text>
        <view class="comments_praised">
          <text class="item">
            <text class="iconfont icon-buoumaotubiao15"></text>
            <text class="count">{{item.data.praisedCount}}</text>
          </text>
          <text class="item">
            <text class="iconfont icon-pinglun1"></text>
            <text class="count">{{item.data.commentCount}}</text>
          </text>
          <button open-type="share" class="item btn">
            <text class="iconfont icon-gengduo"></text>
          </button>
        </view>
      </view>
    </view>
  </scroll-view>
</view>
  1. json
{
  "usingComponents": {},
  "navigationBarTitleText": "视频页",
  "enablePullDownRefresh": true
}
  1. js
import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList: [], // 导航标签数据
    navId: '', // 导航的标识
    videoList: [], // 视频列表数据
    videoId: '', // 视频id标识
    videoUpdateTime: [], // 记录video播放的时长
    isTriggered: false, // 标识下拉刷新是否被触发
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    // 获取导航数据
    this.getVideoGroupListData();
  },
  
  // 获取导航数据
  async getVideoGroupListData(){
    let videoGroupListData = await request('/video/group/list');
    this.setData({
      videoGroupList: videoGroupListData.data.slice(0, 14),
      navId: videoGroupListData.data[0].id
    })
  
    // 获取视频列表数据
    this.getVideoList(this.data.navId);
  },

  // 获取视频列表数据
  async getVideoList(navId){
    if(!navId){ // 判断navId为空串的情况
      return;
    }
    let videoListData = await request('/video/group', {id: navId});
    // 关闭消息提示框
    wx.hideLoading();
    
    let index = 0;
    let videoList = videoListData.datas.map(item => {
      item.id = index++;
      return item;
    })
    // 获取视频播放地址, 单独调用接口
    for (var indexTmp in videoList) {
      var video = videoList[indexTmp]
      var url = await request("/video/url", {id: video.data.vid})
      if (url.code === 200 && url.urls && url.urls.length > 0) {
        video["detailUrl"] = url.urls[0]
      }
    }
    this.setData({
      videoList,
      isTriggered: false // 关闭下拉刷新
    })
  },
  
  // 点击切换导航的回调
  changeNav(event){
    let navId = event.currentTarget.id; // 通过id向event传参的时候如果传的是number会自动转换成string
    // let navId = event.currentTarget.dataset.id;
    this.setData({
      navId: navId>>>0,
      videoList: []
    })
    // 显示正在加载
    wx.showLoading({
      title: '正在加载'
    })
    // 动态获取当前导航对应的视频数据
    this.getVideoList(this.data.navId);
  },
  
  // 点击播放/继续播放的回调
  handlePlay(event){
    /*
      问题: 多个视频同时播放的问题
    * 需求:
    *   1. 在点击播放的事件中需要找到上一个播放的视频
    *   2. 在播放新的视频之前关闭上一个正在播放的视频
    * 关键:
    *   1. 如何找到上一个视频的实例对象
    *   2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
    * 单例模式:
    *   1. 需要创建多个对象的场景下,通过一个变量接收,始终保持只有一个对象,
    *   2. 节省内存空间
    * */
    
    let vid = event.currentTarget.id;
    // 关闭上一个播放的视频
    // this.vid !== vid && this.videoContext && this.videoContext.stop();
    // if(this.vid !== vid){
    //   if(this.videoContext){
    //     this.videoContext.stop()
    //   }
    // }
    // this.vid = vid;
    
    // 更新data中videoId的状态数据
    this.setData({
      videoId: vid
    })
    // 创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid);
    // 判断当前的视频之前是否播放过,是否有播放记录, 如果有,跳转至指定的播放位置
    let {videoUpdateTime} = this.data;
    let videoItem = videoUpdateTime.find(item => item.vid === vid);
    if(videoItem){
      this.videoContext.seek(videoItem.currentTime);
    }
    this.videoContext.play();
    // this.videoContext.stop();
  },
  
  // 监听视频播放进度的回调
  handleTimeUpdate(event){
    let videoTimeObj = {vid: event.currentTarget.id, currentTime: event.detail.currentTime};
    let {videoUpdateTime} = this.data;
    /*
    * 思路: 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
    *   1. 如果有,在原有的播放记录中修改播放时间为当前的播放时间
    *   2. 如果没有,需要在数组中添加当前视频的播放对象
    *
    * */
    let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid);
    if(videoItem){ // 之前有
      videoItem.currentTime = event.detail.currentTime;
    }else { // 之前没有
      videoUpdateTime.push(videoTimeObj);
    }
    // 更新videoUpdateTime的状态
    this.setData({
      videoUpdateTime
    })
  },
  
  // 视频播放结束调用的回调
  handleEnded(event){
    // 移除记录播放时长数组中当前视频的对象
    let {videoUpdateTime} = this.data;
    videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);
    this.setData({
      videoUpdateTime
    })
  },

  // 自定义下拉刷新的回调: scroll-view
  handleRefresher(){
    console.log('scroll-view 下拉刷新');
    // 再次发请求,获取最新的视频列表数据
    this.getVideoList(this.data.navId);
  },
  
  // 自定义上拉触底的回调 scroll-view
  handleToLower(){
    console.log('scroll-view 上拉触底');
    // 数据分页: 1. 后端分页, 2. 前端分页
    console.log('发送请求 || 在前端截取最新的数据 追加到视频列表的后方');
    console.log('网易云音乐暂时没有提供分页的api');
    // 模拟数据
    let newVideoList = [
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_E02A88CF2AE65C449CADD2371C315F18",
          "coverUrl": "https://p2.music.126.net/XIY-ggs6OMhSsrGcx4yUcw==/109951164996630305.jpg",
          "height": 1080,
          "width": 1920,
          "title": "李宇春华晨宇合作好炸《西门少年》,真是神仙合作啊!",
          "description": "李宇春华晨宇合作好炸《西门少年》,真是神仙合作啊!",
          "commentCount": 186,
          "shareCount": 516,
          "resolutions": [
            {
              "resolution": 240,
              "size": 29450044
            },
            {
              "resolution": 480,
              "size": 49904667
            },
            {
              "resolution": 720,
              "size": 72480174
            },
            {
              "resolution": 1080,
              "size": 137540575
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 440000,
            "authStatus": 0,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/WbQbH2nMF8_30bj-wH92vg==/109951164781511113.jpg",
            "accountStatus": 0,
            "gender": 0,
            "city": 445200,
            "birthday": -2209017600000,
            "userId": 3247598879,
            "userType": 0,
            "nickname": "一起爱上好音乐",
            "signature": "",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 109951164781511120,
            "backgroundImgId": 109951162868128400,
            "backgroundUrl": "http://p1.music.126.net/2zSNIqTcpHL2jIvU6hG0EA==/109951162868128395.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": null,
            "experts": null,
            "djStatus": 0,
            "vipType": 0,
            "remarkName": null,
            "avatarImgIdStr": "109951164781511113",
            "backgroundImgIdStr": "109951162868128395",
            "avatarImgId_str": "109951164781511113"
          },
          "urlInfo": {
            "id": "E02A88CF2AE65C449CADD2371C315F18",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/UPF3ch3c_2981347105_uhd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=emnEcbTFOFCBkvOhDuUKTDioVBbYMoej&sign=74f043e422f309fb1f240ed7c535a9f5&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 137540575,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 1080
          },
          "videoGroup": [
            {
              "id": -8013,
              "name": "#人气飙升榜#",
              "alg": "groupTagRank"
            },
            {
              "id": 23118,
              "name": "华晨宇",
              "alg": "groupTagRank"
            },
            {
              "id": 59101,
              "name": "华语现场",
              "alg": "groupTagRank"
            },
            {
              "id": 59108,
              "name": "巡演现场",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [
            {
              "name": "西门少年 (Live)",
              "id": 1442842608,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 861777,
                  "name": "华晨宇",
                  "tns": [],
                  "alias": []
                },
                {
                  "id": 8327,
                  "name": "李宇春",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [
                "原唱:李宇春"
              ],
              "pop": 100,
              "st": 0,
              "rt": "",
              "fee": 8,
              "v": 4,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 88421277,
                "name": "歌手·当打之年 第12期",
                "picUrl": "http://p3.music.126.net/mOa6Y35QQa2-A5HArd58sQ==/109951164933975773.jpg",
                "tns": [],
                "pic_str": "109951164933975773",
                "pic": 109951164933975780
              },
              "dt": 293850,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 11756205,
                "vd": -26779
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 7053741,
                "vd": -24264
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 4702509,
                "vd": -22819
              },
              "a": null,
              "cd": "01",
              "no": 7,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 0,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 1416682,
              "mv": 0,
              "publishTime": 0,
              "privilege": {
                "id": 1442842608,
                "fee": 8,
                "payed": 0,
                "st": 0,
                "pl": 128000,
                "dl": 0,
                "sp": 7,
                "cp": 1,
                "subp": 1,
                "cs": false,
                "maxbr": 999000,
                "fl": 128000,
                "toast": false,
                "flag": 68,
                "preSell": false
              }
            }
          ],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "E02A88CF2AE65C449CADD2371C315F18",
          "durationms": 302891,
          "playTime": 363031,
          "praisedCount": 5362,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_510C8F5A9DA8DC23997E522B85F1FB3A",
          "coverUrl": "https://p2.music.126.net/W_p6aX7vCFR9Lk-wV0x1Eg==/109951164666337012.jpg",
          "height": 720,
          "width": 1280,
          "title": "断眉联手麻神在湖人中场表演《See you again》致敬科比",
          "description": "Wiz Khalifa和Charlie Puth在中场休息时为科比演唱的《See you again》\n\n“It's been a long day without you my friend”\n\n#Charlie Puth#|#Wiz Khalifa#",
          "commentCount": 139,
          "shareCount": 317,
          "resolutions": [
            {
              "resolution": 240,
              "size": 17757824
            },
            {
              "resolution": 480,
              "size": 28683079
            },
            {
              "resolution": 720,
              "size": 36021554
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 1000000,
            "authStatus": 0,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/HjT8-LnESerQh-mC7bvXBw==/109951165359708723.jpg",
            "accountStatus": 0,
            "gender": 0,
            "city": 1006600,
            "birthday": 818804058083,
            "userId": 391194506,
            "userType": 200,
            "nickname": "欧美音乐杂货铺",
            "signature": "“环球音乐专属音乐资讯号” “电影资讯号”“欧美音乐资讯号”\n\nColdplay One Direction Paul Walker 百家影视独家资讯站,欢迎光临~\nTaylor Swift\nChris Hemsworth\nChris Evans\nSebastian Stan\n张艺兴",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 109951165359708720,
            "backgroundImgId": 109951165311536080,
            "backgroundUrl": "http://p1.music.126.net/TsZo0EMK_FECf9sHJkx8RQ==/109951165311536074.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": [
              "欧美"
            ],
            "experts": {
              "1": "音乐视频达人",
              "2": "音乐图文达人"
            },
            "djStatus": 10,
            "vipType": 0,
            "remarkName": null,
            "avatarImgIdStr": "109951165359708723",
            "backgroundImgIdStr": "109951165311536074",
            "avatarImgId_str": "109951165359708723"
          },
          "urlInfo": {
            "id": "510C8F5A9DA8DC23997E522B85F1FB3A",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/7NiPfon1_2893278030_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=rnqPXTyYCIrmKFYdotyVQgiBLQxNFMkq&sign=cbb3dc0c123693e656ec5c8aa6aa4fe8&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 36021554,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 720
          },
          "videoGroup": [
            {
              "id": -8003,
              "name": "#点赞榜#",
              "alg": "groupTagRank"
            },
            {
              "id": 16194,
              "name": "Charlie Puth",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [
            {
              "name": "See You Again",
              "id": 401722227,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 90331,
                  "name": "Charlie Puth",
                  "tns": [],
                  "alias": []
                },
                {
                  "id": 46006,
                  "name": "Wiz Khalifa",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [
                "电影《速度与激情7》片尾曲"
              ],
              "pop": 100,
              "st": 0,
              "rt": null,
              "fee": 1,
              "v": 16,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 3270972,
                "name": "Nine Track Mind",
                "picUrl": "http://p3.music.126.net/OVHar05vedbWFEWHuArbGA==/3295236348738229.jpg",
                "tns": [],
                "pic": 3295236348738229
              },
              "dt": 229564,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 9184696,
                "vd": -11799
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 5510834,
                "vd": -9300
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 3673904,
                "vd": -7799
              },
              "a": null,
              "cd": "1",
              "no": 13,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 1,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 7002,
              "mv": 393006,
              "publishTime": 1454254457074,
              "privilege": {
                "id": 401722227,
                "fee": 1,
                "payed": 0,
                "st": 0,
                "pl": 0,
                "dl": 0,
                "sp": 0,
                "cp": 0,
                "subp": 0,
                "cs": false,
                "maxbr": 320000,
                "fl": 0,
                "toast": false,
                "flag": 1284,
                "preSell": false
              }
            },
            {
              "name": "See You Again",
              "id": 30953009,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 46006,
                  "name": "Wiz Khalifa",
                  "tns": [],
                  "alias": []
                },
                {
                  "id": 90331,
                  "name": "Charlie Puth",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [
                "电影《速度与激情7》致敬保罗沃克插曲"
              ],
              "pop": 100,
              "st": 0,
              "rt": null,
              "fee": 1,
              "v": 289,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 3104138,
                "name": "Furious 7 (Original Motion Picture Soundtrack)",
                "picUrl": "http://p3.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg",
                "tns": [],
                "pic": 7731765766799133
              },
              "dt": 230520,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 9223358,
                "vd": -17300
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 5534032,
                "vd": -14800
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 3689369,
                "vd": -13400
              },
              "a": null,
              "cd": "1",
              "no": 7,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 2,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 7002,
              "mv": 393006,
              "publishTime": 1426521600007,
              "tns": [
                "有缘再见"
              ],
              "privilege": {
                "id": 30953009,
                "fee": 1,
                "payed": 0,
                "st": 0,
                "pl": 0,
                "dl": 0,
                "sp": 0,
                "cp": 0,
                "subp": 0,
                "cs": false,
                "maxbr": 999000,
                "fl": 0,
                "toast": false,
                "flag": 1284,
                "preSell": false
              }
            }
          ],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "510C8F5A9DA8DC23997E522B85F1FB3A",
          "durationms": 228739,
          "playTime": 418612,
          "praisedCount": 3532,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_A54AEB1C28CCD7990E7E6EAB56ECA485",
          "coverUrl": "https://p2.music.126.net/nj51zvc7TQHbg_dCZKDerg==/109951165037815775.jpg",
          "height": 486,
          "width": 864,
          "title": "动漫《你的名字》插曲《スパークル》,现场版太好听!",
          "description": null,
          "commentCount": 21,
          "shareCount": 18,
          "resolutions": [
            {
              "resolution": 240,
              "size": 13805898
            },
            {
              "resolution": 480,
              "size": 13565707
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 440000,
            "authStatus": 1,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/N0NpmREOm_yb0w_X5zLO5w==/7795537441726101.jpg",
            "accountStatus": 0,
            "gender": 1,
            "city": 440100,
            "birthday": 953136000000,
            "userId": 247337423,
            "userType": 4,
            "nickname": "椰汁超甜",
            "signature": "来不及.",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 7795537441726101,
            "backgroundImgId": 18641120139551856,
            "backgroundUrl": "http://p1.music.126.net/4ZlZ1W4gaf6UwR1wFVA0XQ==/18641120139551855.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": null,
            "experts": {
              "1": "二次元视频达人"
            },
            "djStatus": 10,
            "vipType": 11,
            "remarkName": null,
            "avatarImgIdStr": "7795537441726101",
            "backgroundImgIdStr": "18641120139551855"
          },
          "urlInfo": {
            "id": "A54AEB1C28CCD7990E7E6EAB56ECA485",
            "url": "http://vodkgeyttp9.vod.126.net/cloudmusic/e6eed2962315dc66cdcef781e1e83211.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=LZiZsPiFzqLGysfTDEPypqyNqKRbyyDi&sign=fe210fb85ba1f8b88ff7ddceb30f8016&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 13565707,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 480
          },
          "videoGroup": [
            {
              "id": 60101,
              "name": "日语现场",
              "alg": "groupTagRank"
            },
            {
              "id": 59108,
              "name": "巡演现场",
              "alg": "groupTagRank"
            },
            {
              "id": 57108,
              "name": "流行现场",
              "alg": "groupTagRank"
            },
            {
              "id": 3102,
              "name": "二次元",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "A54AEB1C28CCD7990E7E6EAB56ECA485",
          "durationms": 360000,
          "playTime": 29579,
          "praisedCount": 392,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_C4299C0654762635964C1EDE4CED60BB",
          "coverUrl": "https://p2.music.126.net/E_1PyKAfru_fMuujOcs2XQ==/109951163787833870.jpg",
          "height": 720,
          "width": 1280,
          "title": "Bigbang能把颁奖礼办成演唱会,这互动好有趣!",
          "description": "Bigbang能把颁奖礼办成演唱会,这互动好有趣!",
          "commentCount": 896,
          "shareCount": 642,
          "resolutions": [
            {
              "resolution": 240,
              "size": 14694445
            },
            {
              "resolution": 480,
              "size": 24822776
            },
            {
              "resolution": 720,
              "size": 38022088
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 350000,
            "authStatus": 0,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/p0xg8RpP9ohc3xjDCiePfA==/109951163781470122.jpg",
            "accountStatus": 0,
            "gender": 0,
            "city": 350100,
            "birthday": -2209017600000,
            "userId": 1701877461,
            "userType": 0,
            "nickname": "莫想聆听",
            "signature": "",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 109951163781470130,
            "backgroundImgId": 109951162868126480,
            "backgroundUrl": "http://p1.music.126.net/_f8R60U9mZ42sSNvdPn2sQ==/109951162868126486.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": null,
            "experts": null,
            "djStatus": 0,
            "vipType": 0,
            "remarkName": null,
            "avatarImgIdStr": "109951163781470122",
            "backgroundImgIdStr": "109951162868126486",
            "avatarImgId_str": "109951163781470122"
          },
          "urlInfo": {
            "id": "C4299C0654762635964C1EDE4CED60BB",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/pD0Vohdf_2246837624_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=zlbjKhVVyQUDwIDdtIovWhUisRaExFVz&sign=8d58b0847a8e9e3cf6453c7635182925&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 38022088,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 720
          },
          "videoGroup": [
            {
              "id": -33206,
              "name": "#BIGBANG(빅뱅)#",
              "alg": "groupTagRank"
            },
            {
              "id": 10114,
              "name": "BIGBANG",
              "alg": "groupTagRank"
            },
            {
              "id": 14255,
              "name": "颁奖晚会盛典",
              "alg": "groupTagRank"
            },
            {
              "id": 103111,
              "name": "韩语资讯",
              "alg": "groupTagRank"
            },
            {
              "id": 25137,
              "name": "音乐资讯",
              "alg": "groupTagRank"
            },
            {
              "id": 12100,
              "name": "流行",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [
            {
              "name": "FANTASTIC BABY",
              "id": 30854090,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 126339,
                  "name": "BIGBANG",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [
                "Japanese Ver."
              ],
              "pop": 100,
              "st": 0,
              "rt": null,
              "fee": 1,
              "v": 236,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 3104651,
                "name": "THE BEST OF BIGBANG 2006-2014",
                "picUrl": "http://p4.music.126.net/l6BwLqjtNjMr2surmIOufg==/109951163199340826.jpg",
                "tns": [],
                "pic_str": "109951163199340826",
                "pic": 109951163199340830
              },
              "dt": 231626,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 9267244,
                "vd": -34000
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 5560364,
                "vd": -31500
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 3706924,
                "vd": -30100
              },
              "a": null,
              "cd": "1",
              "no": 12,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 2,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 457010,
              "mv": 0,
              "publishTime": 1416931200007,
              "privilege": {
                "id": 30854090,
                "fee": 1,
                "payed": 0,
                "st": 0,
                "pl": 0,
                "dl": 0,
                "sp": 0,
                "cp": 0,
                "subp": 0,
                "cs": false,
                "maxbr": 999000,
                "fl": 0,
                "toast": false,
                "flag": 1093,
                "preSell": false
              }
            }
          ],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "C4299C0654762635964C1EDE4CED60BB",
          "durationms": 99114,
          "playTime": 3411106,
          "praisedCount": 15985,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_21ED2223ADDAA5FC9DD5FA596ADF9A11",
          "coverUrl": "https://p2.music.126.net/0AMmrU7zVrUHKFMrnG3DlQ==/109951163811950820.jpg",
          "height": 1080,
          "width": 1920,
          "title": "李宗盛 《为你我受冷风吹》现场版",
          "description": "李宗盛 《为你我受冷风吹》现场版 II 若是爱已不可为,你明白说吧无所谓。\n\n但愿我会就此放下往事,忘了过去有多美\n不盼缘尽仍留慈悲,虽然我曾经这样以为,我真的这样以为",
          "commentCount": 973,
          "shareCount": 5423,
          "resolutions": [
            {
              "resolution": 240,
              "size": 18230031
            },
            {
              "resolution": 480,
              "size": 34373102
            },
            {
              "resolution": 720,
              "size": 51666648
            },
            {
              "resolution": 1080,
              "size": 92646784
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 350000,
            "authStatus": 0,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/GtIXN9Bpk7eGcGtXwMZfRA==/6634453162191982.jpg",
            "accountStatus": 0,
            "gender": 1,
            "city": 350500,
            "birthday": 680198400000,
            "userId": 34652764,
            "userType": 201,
            "nickname": "乌托邦电台",
            "signature": "知名音乐自媒体,新浪微博@乌托邦电台 (宣传、品牌合作请私信)",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 6634453162191982,
            "backgroundImgId": 109951163156242990,
            "backgroundUrl": "http://p1.music.126.net/x2MDv3VHl-59oDc1MTYmPQ==/109951163156242986.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": null,
            "experts": {
              "1": "音乐视频达人",
              "2": "华语音乐资讯达人"
            },
            "djStatus": 10,
            "vipType": 11,
            "remarkName": null,
            "avatarImgIdStr": "6634453162191982",
            "backgroundImgIdStr": "109951163156242986"
          },
          "urlInfo": {
            "id": "21ED2223ADDAA5FC9DD5FA596ADF9A11",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/GqyxO6ox_2271663003_uhd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=FWdhShbgJMLHExhqpgvURhgdlLEDOodn&sign=edf69fa09a057febadb312d5f95f5d54&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 92646784,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 1080
          },
          "videoGroup": [
            {
              "id": -8001,
              "name": "#热搜榜#",
              "alg": "groupTagRank"
            },
            {
              "id": 14133,
              "name": "李宗盛",
              "alg": "groupTagRank"
            },
            {
              "id": 254120,
              "name": "滚石唱片行",
              "alg": "groupTagRank"
            },
            {
              "id": 57110,
              "name": "饭拍现场",
              "alg": "groupTagRank"
            },
            {
              "id": 59101,
              "name": "华语现场",
              "alg": "groupTagRank"
            },
            {
              "id": 57108,
              "name": "流行现场",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [
            {
              "name": "为你我受冷风吹",
              "id": 257098,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 8336,
                  "name": "林忆莲",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [],
              "pop": 100,
              "st": 0,
              "rt": "600902000007915837",
              "fee": 8,
              "v": 37,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 25645,
                "name": "Love, Sandy",
                "picUrl": "http://p3.music.126.net/5qWWTetRGYBc-ktiJLZsCw==/109951163076136658.jpg",
                "tns": [],
                "pic_str": "109951163076136658",
                "pic": 109951163076136660
              },
              "dt": 259666,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 10389464,
                "vd": -27828
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 6233696,
                "vd": -25262
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 4155812,
                "vd": -23640
              },
              "a": null,
              "cd": "1",
              "no": 6,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 0,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 684010,
              "mv": 10929162,
              "publishTime": 788889600000,
              "privilege": {
                "id": 257098,
                "fee": 8,
                "payed": 0,
                "st": 0,
                "pl": 128000,
                "dl": 0,
                "sp": 7,
                "cp": 1,
                "subp": 1,
                "cs": false,
                "maxbr": 999000,
                "fl": 128000,
                "toast": false,
                "flag": 68,
                "preSell": false
              }
            }
          ],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "21ED2223ADDAA5FC9DD5FA596ADF9A11",
          "durationms": 226788,
          "playTime": 3291453,
          "praisedCount": 16422,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_FBDD3F96E31C31E34553A5D06EC72DD7",
          "coverUrl": "https://p2.music.126.net/06lpFHx43xpOtn6OWhvOVw==/109951163956043222.jpg",
          "height": 720,
          "width": 1280,
          "title": "姚贝娜 - 惊鸿舞 & 菩萨蛮",
          "description": "姚贝娜 - 惊鸿舞 & 菩萨蛮\n这是什么人啊 现场唱成这样 而且每个现场都能唱成这样\n声音实在太美了 无暇的美",
          "commentCount": 147,
          "shareCount": 296,
          "resolutions": [
            {
              "resolution": 240,
              "size": 22971644
            },
            {
              "resolution": 480,
              "size": 38609043
            },
            {
              "resolution": 720,
              "size": 55890087
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 1000000,
            "authStatus": 0,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/veHKeJvsBRJcbWqSLDTadg==/109951164592779530.jpg",
            "accountStatus": 0,
            "gender": 1,
            "city": 1001600,
            "birthday": 2190902400000,
            "userId": 43772457,
            "userType": 0,
            "nickname": "野三坡坡坡",
            "signature": "wassup babe?",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 109951164592779540,
            "backgroundImgId": 109951165046711330,
            "backgroundUrl": "http://p1.music.126.net/Jv20bPhLhiayfk1JNnlczw==/109951165046711333.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": null,
            "experts": null,
            "djStatus": 0,
            "vipType": 11,
            "remarkName": null,
            "avatarImgIdStr": "109951164592779530",
            "backgroundImgIdStr": "109951165046711333",
            "avatarImgId_str": "109951164592779530"
          },
          "urlInfo": {
            "id": "FBDD3F96E31C31E34553A5D06EC72DD7",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/X0ooTNGS_2392962177_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=mhDBserywvdUZZAhEJKQGaKrPVuLvEQG&sign=0adb09a3773e79555aa2891ef70fd8f5&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 55890087,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 720
          },
          "videoGroup": [
            {
              "id": -31741,
              "name": "#『中华诗文』诗词浅唱,请君为我倾耳听…#",
              "alg": "groupTagRank"
            },
            {
              "id": 9102,
              "name": "演唱会",
              "alg": "groupTagRank"
            },
            {
              "id": 59101,
              "name": "华语现场",
              "alg": "groupTagRank"
            },
            {
              "id": 57108,
              "name": "流行现场",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "FBDD3F96E31C31E34553A5D06EC72DD7",
          "durationms": 238762,
          "playTime": 295066,
          "praisedCount": 1984,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_DCFAFE6105D21B4A6D4530DBF923B939",
          "coverUrl": "https://p2.music.126.net/u9DiG5l16itCXQ-FSGh5WA==/109951164735069085.jpg",
          "height": 720,
          "width": 1280,
          "title": "胡彦斌 于文文吵架式演唱《爱之初体验》 嗓音满是洒脱与不羁!",
          "description": "胡彦斌  于文文吵架式演唱《爱之初体验》 嗓音满是洒脱与不羁!",
          "commentCount": 355,
          "shareCount": 2581,
          "resolutions": [
            {
              "resolution": 240,
              "size": 43626769
            },
            {
              "resolution": 480,
              "size": 71560563
            },
            {
              "resolution": 720,
              "size": 101293564
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 650000,
            "authStatus": 0,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/jGaSqoYu_r1ICvky2dimGw==/109951165391125525.jpg",
            "accountStatus": 0,
            "gender": 1,
            "city": 650100,
            "birthday": 923760000000,
            "userId": 113164676,
            "userType": 200,
            "nickname": "苏奕杰",
            "signature": "及时行乐. Vx:ways2050",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 109951165391125520,
            "backgroundImgId": 109951165381738600,
            "backgroundUrl": "http://p1.music.126.net/gAD73rVHk2bdps4LkLHblw==/109951165381738588.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": [
              "华语",
              "流行",
              "欧美"
            ],
            "experts": {
              "2": "生活图文达人"
            },
            "djStatus": 10,
            "vipType": 11,
            "remarkName": null,
            "avatarImgIdStr": "109951165391125525",
            "backgroundImgIdStr": "109951165381738588",
            "avatarImgId_str": "109951165391125525"
          },
          "urlInfo": {
            "id": "DCFAFE6105D21B4A6D4530DBF923B939",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/HaQO68Lf_2914703451_shd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=wNMYRAHxSkfLdXyPxEzIXcgwpVWGpmkd&sign=c8fe34edebf3f08120bc0e7411626dbd&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 101293564,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 720
          },
          "videoGroup": [
            {
              "id": -8005,
              "name": "#收藏榜#",
              "alg": "groupTagRank"
            },
            {
              "id": 3101,
              "name": "综艺",
              "alg": "groupTagRank"
            },
            {
              "id": 4101,
              "name": "娱乐",
              "alg": "groupTagRank"
            },
            {
              "id": 72116,
              "name": "短片",
              "alg": "groupTagRank"
            },
            {
              "id": 23116,
              "name": "音乐推荐",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [
            {
              "name": "爱之初体验",
              "id": 185792,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 6453,
                  "name": "张震岳",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [],
              "pop": 100,
              "st": 0,
              "rt": "",
              "fee": 8,
              "v": 35,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 18885,
                "name": "滚石香港黄金十年 张震岳精选",
                "picUrl": "http://p4.music.126.net/vxuO3LiU9M6U-6kmvV33XA==/109951163240612176.jpg",
                "tns": [],
                "pic_str": "109951163240612176",
                "pic": 109951163240612180
              },
              "dt": 243441,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 9740582,
                "vd": -22218
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 5844367,
                "vd": -19650
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 3896259,
                "vd": -18031
              },
              "a": null,
              "cd": "1",
              "no": 1,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 0,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 684010,
              "mv": 10929999,
              "publishTime": 1036080000000,
              "privilege": {
                "id": 185792,
                "fee": 8,
                "payed": 0,
                "st": 0,
                "pl": 128000,
                "dl": 0,
                "sp": 7,
                "cp": 1,
                "subp": 1,
                "cs": false,
                "maxbr": 999000,
                "fl": 128000,
                "toast": false,
                "flag": 68,
                "preSell": false
              }
            }
          ],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "DCFAFE6105D21B4A6D4530DBF923B939",
          "durationms": 311728,
          "playTime": 1205309,
          "praisedCount": 7077,
          "praised": false,
          "subscribed": false
        }
      },
      {
        "type": 1,
        "displayed": false,
        "alg": "onlineHotGroup",
        "extAlg": null,
        "data": {
          "alg": "onlineHotGroup",
          "scm": "1.music-video-timeline.video_timeline.video.181017.-295043608",
          "threadId": "R_VI_62_A8DC4F82473F218B6F4A7560110BDF72",
          "coverUrl": "https://p2.music.126.net/54CsmlqzBwnGW3xUGI4ahw==/109951163804307053.jpg",
          "height": 1080,
          "width": 1920,
          "title": "本可成为张学友,却一心想当周星驰",
          "description": "本可成为张学友,却一心想当周星驰,他的这首歌,唱哭无数人",
          "commentCount": 1072,
          "shareCount": 988,
          "resolutions": [
            {
              "resolution": 240,
              "size": 39751840
            },
            {
              "resolution": 480,
              "size": 69914355
            },
            {
              "resolution": 720,
              "size": 110467469
            },
            {
              "resolution": 1080,
              "size": 129835812
            }
          ],
          "creator": {
            "defaultAvatar": false,
            "province": 110000,
            "authStatus": 1,
            "followed": false,
            "avatarUrl": "http://p1.music.126.net/ANPz4SzgZsnR69qHSMtz_w==/109951164270832395.jpg",
            "accountStatus": 0,
            "gender": 1,
            "city": 110101,
            "birthday": 720353563017,
            "userId": 106810354,
            "userType": 4,
            "nickname": "中国音乐人",
            "signature": "我是偷影子的人,\n随风化成一朵云。",
            "description": "",
            "detailDescription": "",
            "avatarImgId": 109951164270832400,
            "backgroundImgId": 109951164271452850,
            "backgroundUrl": "http://p1.music.126.net/erbAKtwUefQuR1CJdEverQ==/109951164271452845.jpg",
            "authority": 0,
            "mutual": false,
            "expertTags": null,
            "experts": null,
            "djStatus": 10,
            "vipType": 11,
            "remarkName": null,
            "avatarImgIdStr": "109951164270832395",
            "backgroundImgIdStr": "109951164271452845",
            "avatarImgId_str": "109951164270832395"
          },
          "urlInfo": {
            "id": "A8DC4F82473F218B6F4A7560110BDF72",
            "url": "http://vodkgeyttp9.vod.126.net/vodkgeyttp8/MIsdYPUt_2258957983_uhd.mp4?ts=1602902982&rid=3009063014E119FC636C42FBC02D0085&rl=3&rs=SwzlGFIuaohHgbEQMUILxWTJpVDNoSRW&sign=dc2ef4fa5c5481ce1b984569b5e713aa&ext=f0xw0mOJqGcf8yfMQn4khLo0vOAZ2Oret6FDS9VvANIOB778zOa0GNkWKbpJigsUUQr5jG+TbSVFBopWbJqfxOMWz6qSwzClvQwG9aI/msQPte7+2SQ2gGKFPduzNhXy/81Ne8nvhkod6vr0JXFqCRZ2dpI6sWzVchry/GdmoJaRw2s1XDLSAyQ1oqJLHpSvPOrqeMkLsgG48vej5u25h9Xk4Oz5m3oL3T7bKoVzbcDl3L+mCrSoqLHT+K/n0tyB",
            "size": 129835812,
            "validityTime": 1200,
            "needPay": false,
            "payInfo": null,
            "r": 1080
          },
          "videoGroup": [
            {
              "id": -22293,
              "name": "#「粤语」简单情歌,深情粤语#",
              "alg": "groupTagRank"
            },
            {
              "id": 57105,
              "name": "粤语现场",
              "alg": "groupTagRank"
            },
            {
              "id": 57110,
              "name": "饭拍现场",
              "alg": "groupTagRank"
            },
            {
              "id": 57108,
              "name": "流行现场",
              "alg": "groupTagRank"
            },
            {
              "id": 1100,
              "name": "音乐现场",
              "alg": "groupTagRank"
            },
            {
              "id": 58100,
              "name": "现场",
              "alg": "groupTagRank"
            },
            {
              "id": 5100,
              "name": "音乐",
              "alg": "groupTagRank"
            }
          ],
          "previewUrl": null,
          "previewDurationms": 0,
          "hasRelatedGameAd": false,
          "markTypes": null,
          "relateSong": [
            {
              "name": "无赖",
              "id": 191171,
              "pst": 0,
              "t": 0,
              "ar": [
                {
                  "id": 6473,
                  "name": "郑中基",
                  "tns": [],
                  "alias": []
                }
              ],
              "alia": [],
              "pop": 100,
              "st": 0,
              "rt": "600902000005652669",
              "fee": 8,
              "v": 108,
              "crbt": null,
              "cf": "",
              "al": {
                "id": 19313,
                "name": "正宗K",
                "picUrl": "http://p4.music.126.net/2vFBKWUmF_jiWGaBgO6RaA==/17648261137761966.jpg",
                "tns": [],
                "pic_str": "17648261137761966",
                "pic": 17648261137761966
              },
              "dt": 243827,
              "h": {
                "br": 320000,
                "fid": 0,
                "size": 9756256,
                "vd": -18600
              },
              "m": {
                "br": 192000,
                "fid": 0,
                "size": 5853771,
                "vd": -16000
              },
              "l": {
                "br": 128000,
                "fid": 0,
                "size": 3902528,
                "vd": -14500
              },
              "a": null,
              "cd": "1",
              "no": 3,
              "rtUrl": null,
              "ftype": 0,
              "rtUrls": [],
              "djId": 0,
              "copyright": 1,
              "s_id": 0,
              "rtype": 0,
              "rurl": null,
              "mst": 9,
              "cp": 7002,
              "mv": 0,
              "publishTime": 1143849600000,
              "privilege": {
                "id": 191171,
                "fee": 8,
                "payed": 0,
                "st": 0,
                "pl": 128000,
                "dl": 0,
                "sp": 7,
                "cp": 1,
                "subp": 1,
                "cs": false,
                "maxbr": 999000,
                "fl": 128000,
                "toast": false,
                "flag": 256,
                "preSell": false
              }
            }
          ],
          "relatedInfo": null,
          "videoUserLiveInfo": null,
          "vid": "A8DC4F82473F218B6F4A7560110BDF72",
          "durationms": 291834,
          "playTime": 3701754,
          "praisedCount": 10838,
          "praised": false,
          "subscribed": false
        }
      }
    ];
    let videoList = this.data.videoList;
    // 将视频最新的数据更新原有视频列表数据中
    videoList.push(...newVideoList);
    this.setData({
      videoList
    })
  },
  // 跳转至搜索界面
  toSearch(){
    wx.navigateTo({
      url: '/pages/search/search'
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('页面的下拉刷新');
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('页面的上拉触底');

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function ({from}) {
    console.log(from);
    if(from === 'button'){
      return {
        title: '来自button的转发',
        page: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }else {
      return {
        title: '来自menu的转发',
        page: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }
    
  }
})
  1. wxss
/* pages/video/video.wxss */
.videoContainer .header {
  display: flex;
  padding: 10rpx;
}
.videoContainer .header image{
  width: 60rpx;
  height: 60rpx;
}

.videoContainer .header .search {
  border: 1rpx solid #eee;
  /*flex-grow: 可拉伸 flex-shrink: 可压缩 flex-basis: 当前元素的宽度*/
  /*flex默认值: flex-grow: 0, flex-shrink: 1, flex-basis: auto*/
  /*flex:1  flex-grow: 1, flex-shrink: 1, flex-basis: 0%*/
  /*flex:auto  flex-grow: 1, flex-shrink: 1, flex-basis: auto*/
  /*flex: 1会导致父元素宽度自动为100%*/
  flex: 1;
  margin: 0 20rpx;
  font-size: 26rpx;
  text-align: center;
  line-height: 60rpx;
  color: #d43c33;
}

/* 导航区域 */
.navScroll {
  display: flex;
  white-space: nowrap;
  height: 60rpx;
}

.navScroll .navItem {
  padding: 0 30rpx;
  font-size: 28rpx;
  height: 60rpx;
  line-height: 60rpx;
}
.navScroll .navContent {
  height: 60rpx;
  box-sizing: border-box;
}


.navItem .active {
  border-bottom: 1rpx solid #d43c33;
}


/* 视频列表 */
.videoScroll {
  margin-top: 10rpx;
  /* calc: 可以动态计算css的宽高, 运算符左右两侧必须加空格,否则计算会失效 */
  /* 视口单位: vh vw  1vh = 1%的视口高度  1vw = 1%的视口宽度*/
  height: calc(100vh - 152rpx);
  /*height: calc(100vh - 100rpx); 用来测试页面上拉触底*/
}
.videoItem {
  padding: 0 3%;
}
/*.videoItem video {*/
  /*width: 100%;*/
  /*height: 360rpx;*/
  /*border-radius: 10rpx;*/
/*}*/

.videoItem .common {
  width: 100%;
  height: 360rpx;
  border-radius: 10rpx;
}




.videoItem .content {
  font-size: 26rpx;
  height:80rpx;
  line-height: 80rpx;
  max-width: 500rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* footer */
.footer {
  border-top: 1rpx solid #eee;
  padding: 20rpx 0;
}
.footer .avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: middle;
}

.footer  .nickName {
  font-size: 26rpx;
  vertical-align: middle;
  margin-left: 20rpx;
}

.footer .comments_praised {
  float: right;
}

.comments_praised .btn {
  display: inline;
  padding: 0;
  background-color: transparent;
  border-color: transparent;
}

.comments_praised .btn:after {
  border: none;
}

.comments_praised .item {
  margin-left: 50rpx;
  position: relative;
}

.comments_praised .item .count {
  position: absolute;
  top: -20rpx;
  font-size: 20rpx;
}

3. 知识点记录

1. 布局:自动占用父元素剩余宽度

​ 头部区域设定flex: 1 会使得父元素自动100%。

2. 布局:scroll-view 实现过度效果

设置如下两个属性:

scroll-into-view="{{'scroll' + navId}}"
scroll-with-animation

​ 开启动画效果;

​ 滑动到元素的ID, 对应的是子元素的ID。 (navId 是data 中的动态属性,可以看到点击视频类别的时候切换该值)

3. 同时只能有一个视频播放VideoContext

思路:在点击播放的时候找到上一个播放的视频,播放新视频之前关掉之前的视频。

通过VideoContext 实例,可通过wx.createVideoContext获取。通过 id 跟一个video组件绑定,操作对应的video组件。

let vid = event.currentTarget.id;
// 关闭上一个播放的视频
// this.vid !== vid && this.videoContext && this.videoContext.stop(); // 等价于下面的三个表达式
if(this.vid !== vid){
  if(this.videoContext){
    this.videoContext.stop()
  }
}
this.vid = vid;
// 开启新视频的播放
// 更新data中videoId的状态数据
this.setData({
  videoId: vid
})
// 创建控制video标签的实例对象
this.videoContext = wx.createVideoContext(vid);
// 判断当前的视频之前是否播放过,是否有播放记录, 如果有,跳转至指定的播放位置
let {videoUpdateTime} = this.data;
let videoItem = videoUpdateTime.find(item => item.vid === vid);
if(videoItem){
  this.videoContext.seek(videoItem.currentTime);
}
this.videoContext.play();

同理控制音频audio和视频类似,也有对应的API 去控制。

4. image 优化video

​ 页面直接展示多个video 会卡顿,一般的做法是展示一个image 图片,点击的时候展示为视频并且播放。

  1. video 标签设置属性poster="{{item.data.coverUrl}}"。 也就是视频封面的图片网络资源地址
  2. 默认展示一张图片,图片和视频使用相同的class,样式一样。 控制显示视频还是图片根据当前播放的videoId 是否和video 的id一样。 图片和视频的点击事件一样。

5. 视频大小自动填满video 容器

Video 元素设置属性 object-fit="cover"。

6. 实现记录播放时长再次播放跳转至原来位置

  1. Video 绑定播放视频改变事件,触发频率 250ms 一次
bindtimeupdate="handleTimeUpdate"
  1. 将当前播放时长记录到data 属性中,如果有的话修改,没有的话新增
 handleTimeUpdate(event){
    let videoTimeObj = {vid: event.currentTarget.id, currentTime: event.detail.currentTime};
    let {videoUpdateTime} = this.data;
    /*
    * 思路: 判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
    *   1. 如果有,在原有的播放记录中修改播放时间为当前的播放时间
    *   2. 如果没有,需要在数组中添加当前视频的播放对象
    *
    * */
    let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid);
    if(videoItem){ // 之前有
      videoItem.currentTime = event.detail.currentTime;
    }else { // 之前没有
      videoUpdateTime.push(videoTimeObj);
    }
    // 更新videoUpdateTime的状态
    this.setData({
      videoUpdateTime
    })
  },
  1. 播放视频的时候判断进度记录中是否有时长,有就跳转
 // 点击播放/继续播放的回调
  handlePlay(event){
    /*
      问题: 多个视频同时播放的问题
    * 需求:
    *   1. 在点击播放的事件中需要找到上一个播放的视频
    *   2. 在播放新的视频之前关闭上一个正在播放的视频
    * 关键:
    *   1. 如何找到上一个视频的实例对象
    *   2. 如何确认点击播放的视频和正在播放的视频不是同一个视频
    * 单例模式:
    *   1. 需要创建多个对象的场景下,通过一个变量接收,始终保持只有一个对象,
    *   2. 节省内存空间
    * */
    
    let vid = event.currentTarget.id;
    // 关闭上一个播放的视频
    // this.vid !== vid && this.videoContext && this.videoContext.stop();
    // if(this.vid !== vid){
    //   if(this.videoContext){
    //     this.videoContext.stop()
    //   }
    // }
    // this.vid = vid;
    
    // 更新data中videoId的状态数据
    this.setData({
      videoId: vid
    })
    // 创建控制video标签的实例对象
    this.videoContext = wx.createVideoContext(vid);
    // 判断当前的视频之前是否播放过,是否有播放记录, 如果有,跳转至指定的播放位置
    let {videoUpdateTime} = this.data;
    let videoItem = videoUpdateTime.find(item => item.vid === vid);
    if(videoItem){
      this.videoContext.seek(videoItem.currentTime);
    }
    this.videoContext.play();
    // this.videoContext.stop();
  },

​ videoContext.seek 用于跳转到指定时长。

7. 布局: 视频区域的scroll-view 实现固定高度,滚动条滑动

设置scroll-view 的固定高度即可。 固定高度会利用到css3 的动态计算。calc

.videoScroll {
  margin-top: 10rpx;
  /* calc: 可以动态计算css的宽高, 运算符左右两侧必须加空格,否则计算会失效 */
  /* 视口单位: vh vw  1vh = 1%的视口高度  1vw = 1%的视口宽度*/
  height: calc(100vh - 152rpx);
  /* height: calc(100vh - 100rpx);  */
}

​ 注意100vh 对应的是100% 的高度,微信给到的是去掉底部导航栏高度的。 152 rpx 是 头部区域 + 导航区域 的高度。 所以100% 高度减去152 rpx 就是剩下中间区域的高度(不包含底部tabBar 的高度)。

8. Scroll-view 下拉刷新,上拉加载

1. 下拉刷新

Scroll-view 绑定如下属性,开启刷新、绑定下拉事件、增加一个标识位标记下拉刷新是否完成

      refresher-enabled
      bindrefresherrefresh="handleRefresher"
      refresher-triggered="{{isTriggered}}"

编写事件处理下拉刷新, 注意手动下拉会自动将 isTriggered 设为true

  // 自定义下拉刷新的回调: scroll-view
  handleRefresher(){
    console.log('scroll-view 下拉刷新');
    // 再次发请求,获取最新的视频列表数据
    this.getVideoList(this.data.navId);
  },
    
  --- getVideolist, 处理完将标记位设为false
this.setData({
  isTriggered: false // 关闭下拉刷新
})

2. 上拉加载

  1. 绑定JS事件bindscrolltolower (滚动到底部或右边事件,由scroll 方向决定)
bindscrolltolower="handleToLower"
  1. 编写 handleToLower 事件处理

9. 页面下拉刷新,上拉加载

​ 是wx 提供的函数的一部分, 不需要自己绑定:

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log('页面的下拉刷新');
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('页面的上拉触底');
  },

10. 转发分享

​ 可以使用全局的转发,也可以使用button 进行转发。 button 的转发可以和函数调用一样传递参数。

按钮转发:

          <button open-type="share" class="item btn" data-id="2">
            <text class="iconfont icon-gengduo"></text>
          </button>

完善转发事件:

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function (options) {
    let {from} = options
    console.log(from);
    console.log(options);
    if(from === 'button'){
      return {
        title: '来自button的转发',
        page: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }else {
      return {
        title: '来自menu的转发',
        page: '/pages/video/video',
        imageUrl: '/static/images/nvsheng.jpg'
      }
    }
    
  }

​ 如果按钮转发传参数可以从options 里面获取。 from 标识是全局的menu 还是button 转发。

标签:视频,false,name,微信,程序,alg,null,id,size
From: https://www.cnblogs.com/qlqwjy/p/17566992.html

相关文章

  • Navicat会话解析取证小程序
    美亚审核也太慢了。。干脆先发出来得了一个简单的Navicat保存的会话解析小程序,数据从注册表当中提取,可以解决之前同类型分析工具需要ncx文件的痛点。对大佬的java脚本重构了半天,上传后发现早有人发了py3的版本,哭晕。。不过我也不高兴换上去了,就用我那挫挫的脚本就够用了效果如......
  • 百度2015年笔试题:简述大端小端的概念并写出一个小程序来判断是大端还是小端
    首先我们来说一下大端小端的概念:大端存储和小端存储是计算机中数据存储的两种不同方式。在大端存储中,数据的高位字节被存储在内存的低地址处,而数据的低位字节被存储在内存的高地址处。这种存储方式类似于书写方式,先写高位字节,后写低位字节。例如,十六进制数0x12345678在大端存储中被......
  • 观看视频历史记录放数据库还是redis
    观看视频历史记录放数据库还是Redis?随着互联网的飞速发展,视频网站逐渐成为人们获取信息、娱乐和学习的主要平台之一。在视频网站上观看的视频数量非常庞大,而用户观看的视频历史记录也具有一定的价值。那么,我们应该将观看视频历史记录放在数据库中还是Redis中呢?本文将从数据特点、......
  • 10亿级用户,如何做 熔断降级架构?微信和hystrix的架构对比
    文章很长,且持续更新,建议收藏起来,慢慢读!疯狂创客圈总目录博客园版为您奉上珍贵的学习资源:免费赠送:《尼恩Java面试宝典》持续更新+史上最全+面试必备2000页+面试必备+大厂必备+涨薪必备免费赠送:《尼恩技术圣经+高并发系列PDF》,帮你实现技术自由,完成职业升级,薪......
  • 什么是云应用程序?
    应用程序优先的云服务的日益普及导致应用程序与云服务的融合程度比以前更深。应用程序和云之间的运行时边界正在从虚拟机转移到容器和函数。集成边界正在从仅访问数据库和消息代理转向应用程序的机械部分混合并在云中运行的边界。在这个最终架构中,应用程序是“云绑定”的,允许开发人......
  • Android开发 程序守护进程
    Android开发程序守护进程1.简介程序守护进程是一种在Android系统中保持应用持续运行的机制。它可以在应用被杀死或者设备重启后自动重新启动应用,并保持应用在后台运行,提供各种常驻服务。2.实现步骤下面是整个实现过程的步骤表格:步骤代码说明1创建一个后台服务类......
  • 视频过滤器LAVFilters安装
    点击下载链接下载安装包双击安装包进行安装全部next下一步即可最后点击Finish完成安装......
  • 对挖矿病毒等恶意程序进行定位并处理
    对挖矿病毒等恶意程序进行定位并处理“挖矿”病毒排查之五,排查异常进程篇 https://web.scut.edu.cn/2022/0413/c32211a467487/page.htm怀疑主机在进行“挖矿”,杀毒软件全盘查杀又查不出病毒的情况下,可对可疑的网络连接和进程进行重点查杀。一、Windows系统1、排查疑似恶......
  • 微信、QQ这类IM APP怎么做——谈谈WebSocket
    1、WebSocket的使用场景(1)社交聊天聊天特点:低延迟,高及时。(2)弹幕(3)多玩家游戏(4)协同编辑(5)股票基金实时报价(6)体育实况更新(7)视频会议/聊天(8)基于位置应用(9)在线教育(10)智能家居家里的智能设备的状态必须要实时展现到......
  • JVM程序计数器
    JVM程序计数器1.介绍JVM中的程序计数寄存器(ProqramCounterRegister)中,Reqister的命名源于CPU的寄存器,寄存器存储指令相关的现场信息。CPU只有把数据装载到寄存器才能够运行这里,并非是广义上所指的物理寄存器,或许将其翻译为PC计数器(或指令计数器)会更加贴切(也称为程序......