移动软件开发实验三

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

一、实验目标

1、掌握视频列表的切换方法；

2、掌握视频自动播放方法；

3、掌握视频随机颜色弹幕效果。

二、实验步骤

1.导航栏设计

{
 "pages":[
  "pages/index/index"
 ],
 "window":{
  "navigationBarBackgroundColor": "#987938",
  "navigationBarTitleText": "口述校史"
 }
}

 

2.页面设计

wxml相关代码：

<video id="myVideo" controls></video>
​
<view class="danmuArea">
  <input type='text' placeholder='请输入弹幕内容'></input>
  <button>发送弹幕</button>
</view>
​
<view class="videoList">
  <view class="videoBar">
    <image src="/images/play.png"></image>
    <text>这是一个测试标题</text>
  </view>
</view>

wxss相关代码：

video{
  width: 100%;
}
.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border:1rpx solid #987938;
  flex-grow: 1;
  height: 100rpx;
}
button{
  color: white;
  background-color: #987938;
}
.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;
}

 

3.更新播放列表

wxml相关代码修改如下：

<video id="myVideo" controls src="{{src}}"></video>
​
<view class="danmuArea">
  <input type='text' placeholder='请输入弹幕内容'></input>
  <button>发送弹幕</button>
</view>
​
<view class="videoList">
  <view class="videoBar" wx:for="{{list}}" wx:key="video{{index}}">
    <image src="/images/play.png"></image>
    <text>{{item.title}}</text>
  </view>
</view>

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'
    }
  ]
  },

 

4.点击播放视频

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相关代码添加如下：

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

​

5.发送弹幕

相关wxml代码修改如下:

<video id="myVideo" controls src="{{src}}" enable-danmu danmu-btn></video>
​
<view class="danmuArea">
  <input type='text' placeholder='请输入弹幕内容' bindinput="getDanmu"></input>
  <button bindtap='sendDanmu'>发送弹幕</button>
</view>

相关js代码修改如下：

 data: {
    danmuTxt:'',
    list: [...]
  },
  /**
   * 更新弹幕内容
   */
  getDanmu:function(e){
    this.setData({
      danmuTxt:e.detail.value
    })
  },
​
  /**
   * 发送弹幕
   */
  sendDanmu:function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:'red'
    })
  },

现在可以发送红色弹幕（如图）：

如果希望发出随机颜色的弹幕内容，可以在js文件中追加函数，相关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('')
  }
  /**
   * 发送弹幕
   */
  sendDanmu:function(e){
    let text = this.data.danmuTxt;
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()
    })
  },

 

三、程序运行结果

 

 

四、问题总结与体会

问题：生成随机颜色的函数我一开始和其他函数一样放在Page，结果一直报错，后来放在Page外面就成功了。其他方面都很顺利。

体会：通过本次实验，我了解了视频列表的切换方法，视频自动播放方法以及视频随机颜色弹幕效果。