【无标题】

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

| 姓名和学号？         | XXXX，200023230                  |

| -------------------- | -------------------------------- |

| 本实验属于哪门课程？ | 中国海洋大学22夏《移动软件开发》 |

| 实验名称？           | 实验3：视频播放小程序        |

                         |

| Github仓库地址？     | XXXXXXX                          |

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

## **一、实验目标**

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

## 二、实验步骤

1.调用视频播放组件，创造视频区域

<!--区域1：视频播放器-->

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

video>

1. 添加弹幕输入区域和发送按钮，视频列表

input{

  border: 1rpx solid #987938;/*1rpx宽的实线棕色边框*/

  flex-grow: 1;/*扩张多余空间宽度*/

  height:100rpx;/*高度*/

}

button{

  color:aqua;/*字体颜色*/

  background-color: #987938;/*背景颜色*/

}

videoList

{

  width: 100%;/*宽度*/

  display: flex;/*flex模型布局*/

  flex-direction: row;/*水平布局方向*/

  border-bottom: 1rpx solid #987938;/*1rpx宽的实色棕色边框*/

  margin: 10rpx;/*外边距*/

}

<!--区域2：弹幕控制-->

<view class='danmuArea'>

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

<button bindtap='sendDanmu'>发送弹幕</button>

</view>

<!--区域3：视频列表-->

<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>

1. 改变弹幕颜色

/追加自定义变化弹幕函数

unction 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('')

}

age({

1. 播放视频设置

playVideo:function(e) {

  //停止之前正在播放的视频

  this.videoCtx.stop()

  //更新停止的视频

  this.setData(

    {

      src:e.currentTarget.dataset.url

    }

  )

  //播放新的视频

  this.videoCtx.play()

},

## 三、程序运行结果

列出程序的最终运行结果及截图。

## 四、问题总结与体会

问题1：遇到视频弹幕不发送，原因是video组件的id写的时候和调用的id不一致！（我这里是ID写的不一样。一个是vedio，另一个调用却使用的myvedio!(this.videoCtx=

wx.createVideoContext('myVideo')这里我们将video的ID写错了，所以调用不了，也就不能输出弹幕了

体会：播放视频体会，每次点击button就会调用一次播放视频函数，然后就是先停止当前视频，再将视频跟SRC变成button传来的参数作为视频播放来源。