视频播放小程序

最新推荐文章于 2024-04-22 02:16:41 发布

m0_61354632

最新推荐文章于 2024-04-22 02:16:41 发布

阅读量544

点赞数

文章标签：音视频小程序前端

本文链接：https://blog.csdn.net/m0_61354632/article/details/126437156

版权

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

一、实验目标

1、掌握视频列表的切换方法；

2、掌握视频自动播放方法；

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

二、实验步骤

4.1 项目创建

同实验一、二，输入项目名称、选择目录、测试号和后端服务，点击确定即可。

4.2 页面配置

同实验1、2，创建页面文件、删除和修改文件、创建其他文件等，其中要下载一个播放图标（下载地址：https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/images_play.zip ），保存到images文件中。

截屏2022-08-20 08.33.31 截屏2022-08-20 08.32.38

4.3 视图设计

进行导航栏和页面的设计。

设定标题文字，背景颜色，效果如图：

页面的设计包括三个区域：

区域一是视频播放器，播放视频的位置；区域二是弹幕发送区域，包括文本输入框和发送按钮两个元素；区域三是视频列表，点击不同的视频标题播放不同的视频，效果如下图所示：

修改WXSS和WXML代码实现页面的设计，其中视频播放器使用组件，还需添加data-url和bindtap属性用于记录每行视频对应的播放地址和出发点击事件，弹幕区域使用组件，视频目录的多行区域也是用组件，之后使用wx:for属性循环来得到多行。其中每一个组件的宽度、高度、布局、外边距等都要调试好合适的参数，使得观感更佳。

4.4 逻辑实现

在JS文件的data属性中追加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'
      }
    ]

在JS文件的onLoad函数中创建视频上下文，用于控制视频的播放和停止，接着添加自定义函数playVideo代码和运行效果如下：

截屏2022-08-20 09.27.19 截屏2022-08-20 09.25.06

发送随机颜色弹幕：

编写随机颜色函数，在JS中的color属性地方调用函数即可，实现效果如图：

三、程序运行结果

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

四、问题总结与体会

有了前两次实验的知识和经验积累，本次实验的进行过程也都比较顺利，在实验过程中遇到了一个小问题就是弹幕的发送，开始的时候点击发送弹幕弹幕无法发送，在视频上方无法显示，后来经过一段时间的检查，反复查看代码发现弹幕函数中的一段代码敲错了，编写代码还是要仔细，完整的代码才能有功能的实现。通过本次实验我对于小程序的开发更加的熟练了，慢慢也理解了很多文件的含义以及参数的调试等，后续也会继续学习，使得技能包更加丰富。