源码:
https://github.com/junqiduhang/TEST
说明:lab03为本次实验源码
一、实验目标
1、掌握视频列表的切换方法;2、掌握视频自动播放方法;3、掌握视频随机颜色弹幕效果。
二、实验步骤
1、创建小程序项目,选择不使用模板
2、初始化小程序文件
①删除index.js中所有内容,输入page,选中Page自动补全函数
②删除app.js中所有内容,输入app,选中App自动补全函数
③删除index.wxml,index.wxss和app.wxss中所有内容
④在根目录下创建images文件夹,存放视频封皮,如
3、视图设计
1)导航栏设计
navigationBarBackgroundColor设置小程序导航栏背景色
navigationBarTitleText设置小程序导航栏标题
2)页面设计
①通过video组件创建视频窗口
②发射弹幕设计,包括input输入弹幕组件和button发送弹幕组件
③视频列表设计,包括视频封皮和视频标题,分别通过image组件和text组件展示
4、逻辑实现
1)更新播放列表
在index.js添加list数组,保存视频链接等视频信息
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'
}
]
修改videoBar所在组件,通过wx:for循环一条条展示视频
2)点击播放视频
添加playVideo函数用于播放视频,data-url记录每条视频的播放地址
videoCtx.stop()用于暂停正在播放的视频,更新视频源src后,this.videoCtx.play用于播放视频
3)发送弹幕
在video组件中添加如图代码
在danmuArea所在组件中添加getDanmu函数和sendDanmu函数,用于接收弹幕内容和发送弹幕
5、优化
1)视频播放列表优化
在index.wxss中的.videoBar中添加代码
border-style: ridge;
2)弹幕发射器优化
在index.wxss的input代码块中添加
width: 200%;
3)实现发射随机颜色弹幕
在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('')
}
senDanmu函数中的color赋值改为
color:getRandomColor()