2022暑期微信小程序学习03期-视频播放小程序

源码：

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

三、程序运行结果