2024移动软件开发——实验四

2024年夏季《移动软件开发》实验报告

一、实验目标

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

二、实验步骤

1. 按照实验文档，将本次实验需要用到的视频数据以数组的形式添加到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' 
    }
] 
},

2. 设计页面的整体框架

我的页面由四部分组成，分别是标题、视频、弹幕操作区域和视频列表组成。增加了文档中没有的标题文本。

我在弹幕操作区域增加了弹幕颜色选择按钮，后期要增加弹幕颜色选择功能。

以下是我最终的wxml文件内容。

<view class="container">
  <text id="title">{{title}}</text>
  <video id="myVideo" src="{{src}}" controls enable-danmu danmu-btn></video>
  <view class="danmuArea">
    <input type="text" id="danmuInput" placeholder="请输入弹幕内容" bindinput="getDanmu"/>
    <picker mode="selector" range="{{colorOptions}}" range-key="name" value-key="code" bindchange="chooseDanmuColor">
      <view class="picker">
        {{currentColor}}
      </view>
    </picker>
    <button id="danmuButton" bindtap="sendDanmu">发送</button>
  </view>
    <view class="videoList">
      <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" data-title="{{item.title}}" bindtap="playVideo">
        <image class="playImage" src="/images/play.svg"/>
        <text class="videoBarText">{{item.title}}</text>
      </view>
    </view>
</view>

3. 设计样式，使页面足够美观

为了美观，背景使用了一种灰白色。整体色彩风格使用颜色深蓝，走精简风。

最终效果：

样式代码：

page {
  background-color: whitesmoke;
}

.container {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  background-color: whitesmoke;
  gap: 0;
}

video {
  margin-bottom: 20rpx; 
  width: 100%;
}

#title {
  font-size: 48rpx; 
  font-weight: bold; 
  color: #333; 
  text-align: center; 
  padding: 20rpx;
  margin-bottom: 20rpx; 
}

.danmuArea {
  border: 5rpx solid #1E90FF;
  display: flex;
  width: 100%;
  flex-direction: row;
  height: 80rpx;
  margin-bottom: 20rpx; 
}

#danmuInput {
  
  width: 50%;
  height: 80rpx;
}

picker {
  border-radius: 0; 
  color: white;
  height: 80rpx;
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1E90FF;
}

.picker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: medium;
  font-weight: bold;
  width: 100%;
  height: 80rpx;
}

#danmuButton {
  border-radius: 0; 
  color: white;
  height: 80rpx;
  width: 25%;
  font-size: medium;
  background-color: #1E90FF;
}

.videoList {
  padding: 5rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.videoBar {
  border: 5rpx solid #1E90FF;
  display: flex;
  flex-direction: row;
  height: 80rpx;
  margin: 2rpx;
  padding: 10rpx; /* 内边距 */
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.playImage {
  height: 80rpx;
  width: 80rpx;
  margin-right: 10rpx; /* 图标与文本之间增加间距 */
}

.videoBarText {
  height: 80rpx;
  margin: 20rpx;
  font-size: large;
  flex-grow: 1;
  overflow: hidden; /* 防止文本溢出 */
  text-overflow: ellipsis; /* 文本过长时显示省略号 */
  white-space: nowrap; /* 文本不换行 */
}

4. 用JS实现视频页面的功能

我需要实现的功能有：视频播放、弹幕显示，弹幕发送和弹幕颜色选择。

在此之前，我要先定义好数据

  data: {
    src: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4',
    title: "杨国宜先生口述校史实录",
    danmuColor: "white",
    colorOptions: [
      { name: "白色", code: "#ffffff" },
      { name: "红色", code: "#ff0000" },
      { name: "绿色", code: "#00ff00" },
      { name: "蓝色", code: "#0000ff" }
    ],
    currentColor: "白色",
    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' 
    }
] 
},

视频播放：

  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  playVideo: function(e) {
    this.videoCtx.stop()
    // console.log(e)
    this.setData({
        src: e.currentTarget.dataset.url,
        title: e.currentTarget.dataset.title
    })
    this.videoCtx.play()
},

标题也是使用这个函数更新

为了视频列表中的视频行绑定点击事件

      <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}" data-url="{{item.videoUrl}}" data-title="{{item.title}}" bindtap="playVideo">

弹幕显示：

为视频增加弹幕显示功能和弹幕控制键

  <video id="myVideo" src="{{src}}" controls enable-danmu danmu-btn></video>

弹幕发送：

1. 为弹幕输入文本框绑定getDanmu函数，实现对数据danmuTxt的修改

    <input type="text" id="danmuInput" placeholder="请输入弹幕内容" bindinput="getDanmu"/>

2. 为弹幕发送键绑定sendDanmu函数，将弹幕发出

<button id="danmuButton" bindtap="sendDanmu">发送</button>

3. 函数定义：

getDanmu: function(e) {
  this.setData({
      danmuTxt: e.detail.value
  })
},

sendDanmu: function(e) {
  let text = this.data.danmuTxt;
  let color = this.data.danmuColor;
  this.videoCtx.sendDanmu({
      text:text,
      // color:getRandomColor()
      color: color,
  })
},

弹幕颜色选择：

1. 在wxml使用picker组件，实现选择功能

<picker mode="selector" range="{{colorOptions}}" range-key="name" value-key="code" bindchange="chooseDanmuColor">
      <view class="picker">
        {{currentColor}}
      </view>
    </picker>

2. 实现chooseDanmuColor函数

chooseDanmuColor: function(e) {
  const index = e.detail.value;
  const selectedColor = this.data.colorOptions[index];
  this.setData({
    danmuColor: selectedColor.code,
    currentColor: selectedColor.name
  });
},

所有的js代码：

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    src: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4',
    title: "杨国宜先生口述校史实录",
    danmuColor: "white",
    colorOptions: [
      { name: "白色", code: "#ffffff" },
      { name: "红色", code: "#ff0000" },
      { name: "绿色", code: "#00ff00" },
      { name: "蓝色", code: "#0000ff" }
    ],
    currentColor: "白色",
    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' 
    }
] 
},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
  playVideo: function(e) {
    this.videoCtx.stop()
    // console.log(e)
    this.setData({
        src: e.currentTarget.dataset.url,
        title: e.currentTarget.dataset.title
    })
    this.videoCtx.play()
},

chooseDanmuColor: function(e) {
  const index = e.detail.value;
  const selectedColor = this.data.colorOptions[index];
  this.setData({
    danmuColor: selectedColor.code,
    currentColor: selectedColor.name
  });
},

getDanmu: function(e) {
  this.setData({
      danmuTxt: e.detail.value
  })
},

sendDanmu: function(e) {
  let text = this.data.danmuTxt;
  let color = this.data.danmuColor;
  this.videoCtx.sendDanmu({
      text:text,
      // color:getRandomColor()
      color: color,
  })
},



  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

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

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

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

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

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

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})

三、程序运行结果

1. 视频切换，标题更新

2. 发送弹幕

3. 选择弹幕颜色，发送彩色弹幕

四、问题总结与体会

问题： 弹幕颜色选择功能实现时，一开始我如下代码定义的选项值（颜色值），用户端点击picker后看到的颜色选项是RGB代码，不够直观。

colorOptions: ["#ffffff", "#ff0000", "#00ff00", "#0000ff"],

解决方法： 以字典的方式定义每个颜色选项，name用来在picker中显示，code用来在js中为color赋值

colorOptions: [
      { name: "白色", code: "#ffffff" },
      { name: "红色", code: "#ff0000" },
      { name: "绿色", code: "#00ff00" },
      { name: "蓝色", code: "#0000ff" }
    ],

<picker mode="selector" range="{{colorOptions}}" range-key="name" value-key="code" bindchange="chooseDanmuColor">
      <view class="picker">
        {{currentColor}}
      </view>
    </picker>

注意range-key和value-key

体会：

将页面初始数据中的list连接到数据库，就能实现一个可以播放更多自己视频的播放小程序。目前为止，学的知识都是前端方面的。虽然说有微信云，但是了解后端的工作对今后从事开发工作很重要。这个实验最后也没用到媒体API，好像有点名不副实。