2024年夏季《移动软件开发》实验4报告--如何制作一个简易的带弹幕播放功能的mv播放小程序

姓名？	王建享
本实验属于哪门课程？	中国海洋大学24夏《移动软件开发》
实验名称？	实验4：媒体API
博客地址？	2024年夏季《移动软件开发》实验4报告--如何制作一个简易的带弹幕播放功能的mv播放小程序-CSDN博客
Gitee仓库地址？	miniVideoApp

一、实验目标

1、掌握视频API的操作方法；2、掌握如何发送随机颜色的弹幕。

二、实验步骤

实现的额外功能

• 从网站接口获取热门音乐mv，支持上下页切换

• 从网站接口获取音乐mv的评论，添加到弹幕当中

创建一个微信小程序

添加页面组件

<view class="container">
  <view class ="mv">
    <video src="{{videoUrl}}" danmu-list="{{danmuList}}" enable-danmu="true" danmu-btn="true" title="{{thisVideo.title}}" bindplay="addDanmu" id="myVideo">
    </video>
  </view>
  <view class="danmu">
    <button type="primary" size="mini" bind:tap="sendDanmu">
    发送弹幕
    </button>
    <input placeholder="输入弹幕" style="width:90%" bindinput="getDanmu"/>
  </view>
  <block wx:for="{{list}}" wx:key="{{index}}">
    <view  class="listItem" bind:tap="changeVideo" data-mv="{{item}}">
      <image src="{{item.cover}}" mode="heightFix" style="height: 50px;"/>
      <text>{{item.name}}</text>
    </view>
  </block>
​
<view class="nextPage">
  <button type="primary" size="mini" bind:tap="prePage">
    上一页
    </button>
    <button type="primary" size="mini" bind:tap="nextPage">
    下一页
    </button>
</view>
</view>

编写对应样式

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
​
.listItem{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
​
.danmu{
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.container {
  height: 100%;
  align-items: center;
  justify-content: center;
} 
.mv{
  display: flex;
  align-items: center;
  justify-content: center;
}
.nextPage{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

编写页面逻辑

下面对页面逻辑的关键部分进行分析，详细代码见上方gitee链接

初始数据

data: {
    offset:0,//获取mv偏移量，用于获取下一页数据，一页数据有30个
    list:[],//音乐列表
    thisVideo:{},//当前mv
    videoUrl:"",//当前mv的url
    danmu:"",//input内弹幕
    danmuList:[{
      text: '第 3s 出现的弹幕',
      color: '#ff00ff',
      time: 3
    }],//弹幕列表，因动态加载弹幕列表失效而弃用
    hasmore:true//是否有下一页，获取数据时获取
  }

页面初始化，包括video的创建，网络数据的获取

onLoad: function (options) {
    this.mv = wx.createVideoContext('myVideo')
    this.setData({
      danmuList:[],
    })
    wx.request({
      url: 'https://www.theaave.top/top/mv',
      success:(res)=>{
        console.log(res)
        this.setData({
          list:res.data.data,
          thisVideo:res.data.data[0].mv,
          hasmore:res.data.hasMore
        },()=>{
          wx.request({
            url: 'https://www.theaave.top/mv/url',
            data:{
              id:this.data.thisVideo.id
            },
            success:(res)=>{
              console.log(res)
              this.setData({
                videoUrl:res.data.data.url
              })
            }
          });
          
        })
      }
    })
  },

获取input数据以及点击按钮发送随机颜色弹幕

getDanmu(event){
    this.setData({
      danmu:event.detail.value
    })
  },
  sendDanmu(){
    let danmu = this.data.danmu;
    this.mv.sendDanmu({
      text:danmu,
      color: this.getRandomColor()
    })
    console.log(this.data.danmuList);
  },
  getRandomColor(){
    let rgb = [];
    for(let i = 0;i < 3;i++){
      let color = Math.floor(Math.random() * 256).toString(16);
      color = color.length == 1?'0' + color:color;
      rgb.push(color)
    }
    return '#' + rgb.join('');
  },

获取下一页或上一页数据，其中上一页是否存在通过offset是否为0判断，下一页是否存在通过存储的从接口获取的hasmore来判断

prePage(){
    if(this.data.offset == 0){
      wx.showToast({
        title: '已经是最前了',
      })
    }else{
      this.setData({
        offset:this.data.offset < 30 ? 0 : this.data.offset - 30
      })
      wx.request({
        url: 'https://www.theaave.top/top/mv',
        data:{
          offset:this.data.offset
        },
        success:(res)=>{
          console.log(res)
          this.setData({
            list:res.data.data,
            thisVideo:res.data.data[0].mv,
            hasmore:res.data.hasMore
          },()=>{
            wx.request({
              url: 'https://www.theaave.top/mv/url',
              data:{
                id:this.data.thisVideo.id,
              },
              success:(res)=>{
                console.log(res)
                this.setData({
                  videoUrl:res.data.data.url
                })
              }
            });
            
          })
        }
      })
  }
  },
  nextPage(){
    if(this.data.hasmore){
    this.setData({
      offset:this.data.offset + 30
    })
    wx.request({
      url: 'https://www.theaave.top/top/mv',
      data:{
        offset:this.data.offset
      },
      success:(res)=>{
        console.log(res)
        this.setData({
          list:res.data.data,
          thisVideo:res.data.data[0].mv,
          hasmore:res.data.hasMore
        },()=>{
          wx.request({
            url: 'https://www.theaave.top/mv/url',
            data:{
              id:this.data.thisVideo.id
            },
            success:(res)=>{
              console.log(res)
              this.setData({
                videoUrl:res.data.data.url
              })
            }
          });
          
        })
      }
    })
  }else{
    wx.showToast({
      title: '后面没有更多了',
    })
  }
  },

点击相应mv切换视频，包括点击后的获取其id和向网络接口发送请求获取url

changeVideo(event){
    this.setData({
      danmuList:[]
    })
    console.log(event);
    this.setData({
      thisVideo:event.currentTarget.dataset.mv.mv
    },()=>{
      wx.request({
        url: 'https://www.theaave.top/mv/url',
        data:{
          id:this.data.thisVideo.id,
        },
        success:(res)=>{
          console.log(res)
          this.setData({
            videoUrl:res.data.data.url
          })
        }
      })
    })
  },

视频播放后异步获取mv热评后发送至弹幕

addDanmu(){
    wx.request({
      url: 'https://www.theaave.top/comment/mv',
      data:{
        id:this.data.thisVideo.id,
        limit:20
      },
      success:(res)=>{
        for(var i in res.data.hotComments){
          console.log(res.data.hotComments[i].content);
          if(res.data.hotComments[i].content){
            this.mv.sendDanmu({
              text: res.data.hotComments[i].content,
              color: this.getRandomColor(),
            })
          }
        }
        console.log(this.data.danmuList);
      }
    })
  },

三、程序运行结果

四、实验总结与体会

本次实验完成了一个音乐mv播放页的编写，也学会了在视频中播放弹幕，可以说是非常有用的知识了，同时在实验原有要求的基础下，还添加了一小部分其他元素，使页面更加丰富。同时，因为我最后的大项目是音乐社区类小程序，这次实验的页面也可以为最后的大项目增添新的一个功能。