（备注：将实验报告发布在博客、代码公开至 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./__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'},{id: '1002',title: '唐成伦先生口述校史实录',videoUrl: 'http://arch./__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'},{id: '1003',title: '倪光明先生口述校史实录',videoUrl: 'http://arch./__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'},{id: '1004',title: '吴仪兴先生口述校史实录',videoUrl: 'http://arch./__local/5/DA/BD/7A27865731CF2B096E90B52_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.danmuTxtthis.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:colorrgb.push(color)}return '#' + rgb.join('')}
sendDanmu:function(e){let text = this.data.danmuTxtthis.videoCtx.sendDanmu({text:text,color:getRandomColor()})},
三、程序运行结果
四、问题总结与体会
问题：function getRandomColor()要放到page的外面，在page内调用
收获：学习使用video组件实现视频列表的切换方法；掌握了视频自动播放方法，同时也学习了弹幕的发送，以及利用随机函数实现颜色的随机选择，添加了随机颜色弹幕效果。为今后的学习打下坚实的基础。
