实验3：视频播放小程序

m0_53057170

已于 2022-08-22 19:54:36 修改

阅读量345

点赞数 1

文章标签：小程序前端微信

于 2022-08-22 19:53:47 首次发布

本文链接：https://blog.csdn.net/m0_53057170/article/details/126466250

版权

一、实验目标

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、一些初始操作：

包括项目创建、页面配置（创建页面文件、删除和修改文件、创建其他文件）、视图设计（导航栏设计、页面设计），在此不过多赘述，详情请见Docs。

执行上述操作过程中的效果图：

最终效果图：

2、掌握视频列表的切换方法、视频自动播放方法：

2.1 更新视频列表，点击播放视频

index.wxml 中修改后代码如下：

其中"wx:for='{{list}}'"用于循环展示列表list(更新播放列表)
wx:key通常与wx.for搭配使用，当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。（更新播放列表）
data-url用于记录每行视频对应的播放地址，bindtap用于触发点击事件（自定义函数playVideo）。

index.js 中修改代码如下：

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'
      }
    ]

在生命周期函数olLoad中创建视频上下文，用于控制视频的播放和停止。

自定义函数playVideo用于停止之前正在播放的视频，并播放新点击的视频。

最终效果图：

3、掌握视频随机颜色弹幕效果：

3.1实现发送弹幕效果

index.wxml 中修改代码如下：

enable-danmu 为一video组件，表示是否展示弹幕，只在初始化时有效，不能动态变更。
danmu-btn表示是否显示弹幕按钮，只在初始化时有效，不能动态变更。

bindinput表示键盘输入数据时，数据自动获取，并触发后面的事件（自定义函数getDanmu）。
bindtap用于获取元素的属性值，并触发后面的事件（自定义函数sendDanmu）。
自定义函数getDanmu用于更新弹幕内容（将弹幕数据赋值给data中元素danmuTxt（自定义））。
自定义函数sendDanmu用于发送弹幕，使用this.videoCtx.sendDanmu发送弹幕。（此函数后面继续添加弹幕颜色功能，添加自定义函数getRandomColor）。