《移动软件开发》实验三：视频播放小程序

2022年夏季《移动软件开发》实验三：视频播放小程序

一、实验目标

1、掌握视频列表的切换方法；2、掌握视频自动播放方法；3、掌握视频随机颜色弹幕效果。

二、实验步骤

1. 项目创建

​ 创建选择空白文件夹存放小程序项目：此处我创建的文件夹为lab3_video。

2. 页面配置

2.1 创建页面文件

​ (1）将 app.json 文件内 pages 属性中的“ pages / logs / logs ”删除，并删除上一行末尾的

逗号。
(2）按快捷键 ctrl + s 保存当前修改。

2.2 删除和修改文件

(1) 删除utils文件夹及其内部所有内容。

(2）删除 pages 文件夹下的 logs 目录及其内部所有内容。

(3）删除 index.wxml 和 index.wxss 中的全部代码。

(4）删除 index.js 中的全部代码，并且输人关键词“ page ”找到第二个选项按回车键让其自动补全函数。
(5）删除 app.wxss中的全部代码。
(6）删除app.js中的全部代码，并且输入关健间app找到第一个选项按回车键让其自动补全函数。

2.3 创建其他文件

创建文件夹images用于存放图片素材。

3. 视图设计

3.1 导航栏设计

​ 使用windows创建，背景颜色置为金棕色，名称设置为校史。

  "window": {
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "校史 ",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },

3.2 页面设计

区域1：视频播放器, 用与播放指定的视频。

区域2：弹幕发送区域， 包含文本输入框和发送按钮。

区域3：视频列表， 垂直排列多个视频标题，点击不同的视频标题播放对应的视频内容。

页面设计图如下所示。

3.2.1 区域一：视频组件设计

​ 通过video组件实现。

<!--第一个区域：视频播放器-->
<video id='myVideo'  controls="true"  src='{{src}}' autoplay="true" enable-danmu danmu-btn></video>

3.2.2 区域二：弹幕区域设计

通过input和button组件实现。

wxml部分相关代码如下：

<!--第二个区域：弹幕区域-->
<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

wxss部分相关代码如下：

.danmuArea{
  display: flex;
  flex-direction: row;
}

input{
  border: 1rpx solid #987938;
  height: 100rpx;
  flex-grow: 1; /*扩张多余空间*/
}

button{
  color: white;
  background-color: #987938;
}

3.2.3 视频列表设计

​ 通过view组件实现一个可扩展的区域，每行一个播放图标和一个视频标题文本。先设计一行，然后通过wx：for属性添加其余行。

wxml相关代码如下：

<!--第三个区域：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo">
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>

wxss相关代码如下：

.videoList{
  width: 100%;
  min-height: 400rpx;
}
.videoBar{
   width: 95%;
   display: flex;
   flex-direction: row;
   border-bottom: 1rpx solid #987938;
   margin: 10rpx; /*外边距*/
}
image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #987938;
  margin: 20rpx;
  flex-grow: 1; /*扩张多余宽度*/
}

4. 逻辑实现

4.1 更新播放列表

​ 在区域三通过对组件追加wx:for属性，改写为循环展示列表。

wxml相关代码如下:

<!--第三个区域：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo">
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>

​ 然后在js文件的data属性追加list数组，用于存放视频信息。

​ js文件相关代码如下:

data: {
      list:[
        {
          id : '1001',
          title:"杨国宜先生口述校史实录",
          videoUrl:"http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4"
        },
        {
          id : '1002',
          title:"唐成伦先生口述校史实录",
          videoUrl:"http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4"
        },
        {
          id : '1003',
          title:"倪光明先生口述校史实录",
          videoUrl:"http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4"
        },
        {
          id : '1004',
          title:"吴仪兴先生口述校史实录",
          videoUrl:"http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4"
        }
      ],
      src:"",
      danmuTxt:""
  },

实现效果如下：

4.2 点击播放视频

​ 通过对组件添加data-url属性和bindtap属性实现。

​ 其中data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件。

​ wxml相关代码如下：

<!--第三个区域：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" bindtap="playVideo">
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>

​ js文件中的onLoad函数创建视频上下文，用于控制视频的播放和停止。

​ js相关代码如下：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.videoCtx=wx.createVideoContext("myVideo", this)
  },

​ 在js中添加自定义函数playVideo。

​ js相关代码如下：

 playVideo:function(e){
    this.videoCtx.stop()//停止之前播放的视频
    this.setData({
      src:e.currentTarget.dataset.url
    })  //更新视频地址
    this.videoCtx.play()//播放新视频
  },

​ 运行效果如下图所示：

4.3 发送弹幕

​ 对video组件添加enable-danmu和danmu-btn属性，用于允许发送弹幕和显示发送弹幕按钮。

​ wxml相关代码如下：

<!--第一个区域：视频播放器-->
<video id='myVideo'  controls="true"  src='{{src}}' autoplay="true" enable-danmu danmu-btn></video>

​ 在区域二为文本框追加bindinput属性，用于获取弹幕内容；追加bindtap属性，用于触发点击事件。

​ wxml相关代码如下:

<view class="danmuArea">
  <input type="text" placeholder="请输入弹幕内容" bindinput="getDanmu"></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

js代码片段如下：

 getDanmu:function(e){
    this.setData({
      danmuTxt:e.detail.value
    })
  },
  
  sendDanmu:function(e){
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  },

实现效果如下，弹幕颜色为红色：

通过自主实现的getRandomColor()函数可以随机生成一个十六进制的颜色，只需将color属性的’red‘改为getRandomColor()即可。

getRandomColor()函数代码实现如下：

//生成随机颜色
function 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('')
}

实现效果如下：

三、程序运行结果

1. 切换视频
   
   

2. 发送彩色弹幕

四、问题总结与体会

问题总结

问题：切换视频播放的逻辑没有搞清楚

解决方法：学习相关视频后理解，逻辑为：停止当前播放视频->更新视频播放地址->播放新视频

心得体会

​ 通过此次实验，我初步掌握了视频列表的切换方法；掌握了视频自动播放方法，并通过实现随机生成颜色的函数，初步掌握了视频随机颜色弹幕效果。此次实验，对于我《移动软件开发》这门课的学习有非常大的帮助，通过也为我以后计算机专业的学习打下了坚实基础。