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

姓名和学号？
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称？	实验三：视频播放小程序
博客地址？	XXXXXXX
Github仓库地址？	XXXXXXX

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

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

二、实验步骤

1、创建项目

2、页面配置

按照要求删除相应文件中的代码，并且创建其他自定义文件。创建一个文件夹用于存放播放图标，命名为images

3、导航栏设计

对app.json自定义导航栏标题和背景颜色

 "window": {
    "navigationBarBackgroundColor": "#987938",
    "navigationBarTitleText": "校史"
  },

4、页面设计

区域一

<video id='myVideo' controls></video>

video{
	width:100%;
}

区域二

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

.danmuArea{
  display: flex;
  flex-direction: row;
}
input{
  border :1rps solid #987938;
  height: 100rpx;
  flex-grow: 1;/*扩张多余空间*/
}
button{
  color:white;
  background-color: #987938;
}

区域三

<view class="videoList">
  <view class="videoBar">
    <image src="/image/play.jpg"></image>
    <text>测试第一个</text>
  </view>
</view>

.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;
}

5、更新播放列表

在区域三给videoBar组件添加wx:for属性，改写为循环列表

<!--第一个区域：视频播放器-->
<video id='myVideo' src='{{src}}'</video>
<!--第二个区域：弹幕区域-->
<!--第三个区域：视频列表-->
<view class="videoList">
  <view class="videoBar" wx:for='{{list}}' wx:key='video{{index}}'>
    <image src="/image/play.jpg"></image>
    <text>{{item.title}}</text>
  </view>
</view>

data: {
    danmuTxt:'',
    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'
    }
  ],

6、点击播放视频

区域三对videoBar组件添加data-url属性和bindtap属性

<view class="videoList">
  <view class="videoBar" wx:for='{{list}}' wx:key='video{{index}}' 
  data-url="{{item.videoUrl}}" bindtap="playVideo">
    <image src="/image/play.jpg"></image>
    <text>{{item.title}}</text>
  </view>
</view>

  onLoad(options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },

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

7、发送弹幕

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

<!--第一个区域：视频播放器-->
<video id='myVideo' src='{{src}}' controls="true" enable-danmu danmu-btn></video>
<!--第二个区域：弹幕区域-->
<view class='danmuArea'>
  <input type='text' placeholder="请输入弹幕内容"bindinput='getDanmu' ></input>
  <button bindtap="sendDanmu">发送弹幕</button>
</view>

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

  sendDanmu:function(e){
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
      text:text,
      color: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('')
}

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

三、程序运行结果

四、问题总结与体会

问题：function getRandomColor()要放到page的外面，在page内调用

收获：学习使用video组件实现视频列表的切换方法；掌握了视频自动播放方法，同时也学习了弹幕的发送，以及利用随机函数实现颜色的随机选择，添加了随机颜色弹幕效果。为今后的学习打下坚实的基础。