OUC 2024夏 移动软件开发 实验四：媒体API之口述校史

一、实验准备

课程主页：课程主页(gitee.com)

实验文档：lab4文档

实验视频：lab4视频

二、实验目标

1、掌握视频API的操作方法；

2、掌握如何发送随机颜色的弹幕。

三、实验步骤

1、项目创建和页面配置

基本流程见前两个lab，在此不再赘述。

2、导航栏设计

编写App.js：

{
"pages": [
 "pages/index/index"
],
"window": {
 "navigationBarTextStyle": "white",
 "navigationBarTitleText": "实验四：口述校史",
 "navigationBarBackgroundColor": "#24A0ED"
},
"style": "v2",
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

3、视图设计

编写index.wxml：

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

<!-- 第二个区域：弹幕区域 -->
<view class="danmuArea">
  <input type='text' placeholder='请输入弹幕内容' bindinput="getDanmu" value="{{danmuText}}"></input>
  <!-- 新版的button默认较大，令size='mini'达到缩小按钮的效果 -->
  <button class='minibtn' size='mini' bind:tap="sendDanmu">发送弹幕</button>  
</view>

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

这里将video的属性添加autoplay="true"用来自动播放视频。
新版的button默认较大，将button的属性添加size='mini’达到缩小按钮的效果。

编写index.wxss

/**index.wxss**/
video{
 width: 100%;
}

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

input{
 border: 1rpx solid #24A0ED;
 height: 100rpx;
 flex-grow: 1;
}

button{
 color: white;
 background-color: #24A0ED;
}

.minibtn{
 color: white;
 background-color: #24A0ED;
 height: 100rpx;
 text-align: center;
}

.videoList{
 width: 100%;
 min-height: 400rpx;
}

.videoBar{
 width: 95%;
 display: flex;
 flex-direction: row;
 border-bottom: 1rpx solid #24A0ED;
 margin: 10rpx;
}

image{
 width: 70rpx;
 height: 70rpx;
 margin: 20rpx;
}

text{
 font-size: 45rpx;
 color:  #24A0ED;
 margin: 20rpx;
 flex-grow: 1;
}

3、逻辑实现

编写index.js：

// index.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: '',
    danmuText: '',
    list: [
      {
      id: '001',
      title: '杨国宜先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
      },
      {
        id: '002',
        title: '唐成伦先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
      },
      {
        id: '003',
        title: '倪光明先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
      },
      {
        id: '004',
        title: '吴仪兴先生口述校史实录',
        videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
      }
    ]
  },

  playVideo: function(e) {
    console.log(e); 
    this.videoCtx.stop();
    this.setData({
        src: e.currentTarget.dataset.url 
    });
    this.videoCtx.play();
  },

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

  sendDanmu:function(e){
    let text = this.data.danmuText
    this.videoCtx.sendDanmu({
      text: text,
      color: getRandomColor()
    })
    // 发送弹幕之后应该清空输入框
    this.setData({
      danmuText: ''
    })
  },

  // 页面加载时调用
  onl oad(options) {
    this.videoCtx=wx.createVideoContext('myVideo')
  },

  // 页面初次渲染完成时调用
  onReady: function() {
    this.videoCtx = wx.createVideoContext('myVideo');
    // 自动播放第一个视频
    if (this.data.list.length > 0) {
        this.setData({
            src: this.data.list[0].videoUrl
        }, () => {
            this.videoCtx.play();
        });
    }
  },

  onShow() {}, // 页面显示时调用

  onHide() {}, // 页面隐藏时调用

  onUnload() {}, // 页面卸载时调用

  onPullDownRefresh() {}, // 用户下拉动作时调用

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

  onShareAppMessage() {} // 用户点击右上角分享时调用


})

四、程序运行结果

(1)首页

(2)发送弹幕

点击“发送弹幕”按钮之后自动清除输入框的弹幕内容。

五、问题总结与体会

1、问题：本次实验比较简单。可能值得注意的就是“发送弹幕的按钮”比较大，不太美观。

2、解决方法：查阅微信官方文档后发现button有size属性，默认为default，可以设置为mini，从而调整按钮大小。

3、收获与体会：

（1）本次实验我掌握了视频API的操作方法和如何发送随机颜色的弹幕。

（2）本次实验我还增加了遇到问题查阅官方文档的训练，从而更好地解决问题。