视频播放小程序

一、实验目标

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

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

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

二、实验步骤

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

1. 创建一个新的项目，并手动修改页面配置文件。步骤同实验一相似，同时注意添加images文件，并将小程序所用图标添加进去（主要是播放按钮的图标）。配置好后的项目结构如下图所示。

2. 导航栏设计。我们通过navigationBarTitleText设置导航栏标题，设置为：口述校史，使用navigationBarBackgroundColor改变导航栏背景颜色，改变成金棕色。设计好的导航栏如下图所示。

3. 页面设计。本次页面设计主要包括三个区域，主要涉及到的组件包括：video、view、input、text等组件，来完成视频播放，输入弹幕等功能。其中视频播放如下图图一所示，宽度占比为100%。弹幕输入为下图二所示，又两个组件构成，包括文本输入和发送按钮。视频列表区域如图三所示。我们通过wx：for循环添加全部内容，其中全部内容存放在js文件中的data的list数组里面。每一个内容包含两部分，分别是播放图标和视频标题。经过循环，我们就可以显示全部内容信息了。

   点击播放视频。在区域3对<view class='videoBar'>组件添加data-url属性和 bindtap属性。其中 data-url用于记录每行视频对应的播放地址, bindtap 用于触发点击事件。代码展示如下。在图1添加了两个属性，属性的实现我们需要在js文件中进行：在js文件的 onLoad函数中创建视频上下文,用于控制视频的播放和停止。js(pages/index/index.js)代码片段修改如下图二所示:主要设置了onLoad和playVideo。运行效果图如图三和图四所示。

4. 发送弹幕。在区域1对<video>组件添加enable-danmu和 danmu-btn属性,用于允许发送弹幕和显示“发送弹幕”按钮。发送的弹幕在input组件里面进行输入，并存放到js文件中data的danmuTxt中，初始我们设定danmuTxt为空值。我们在js文件中通过getDanmmu和sendDanmu来接收输入内容并发送出去。代码展示如图二所示。至此我们实现了可以发出红色文本的弹幕，页面展示如图三所示。如果希望发出随机颜色的弹幕内容,可以在JS文件中追加自定义函数getRandomColor，可以随机生成一个十六进制的颜色,将其在原先需要录入color属性的地方调用即可实现彩色弹幕效果。

三、程序运行结果

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

四、问题总 结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

1. 在实验过程中，出现了视频播放不了的情况，此时我们只需要多运行几次，将代码继续完善就可以了。

1. 通过本次实验，我掌握了视频列表的切换方法；掌握了视频自动播放方法；掌握了视频随机颜色弹幕效果。同时我对小程序中视频的插入方法以及更换方法也有了更加清晰的认识。