实验3：媒体API之口述校史

一、实验目标

1. 掌握视频API的操作方法;
2. 掌握如何发送随机颜色的弹幕。

二、实验步骤

1. 根据实验手册上的网址，下载视频播放图标，图片如下。

   

2. 进入微信开发者工具，创建一个新项目videoDemo。

   

3. 在根目录下的app.json中定义导航栏标题和背景颜色，如下图所示。

   

4. 根据实验文档，页面设计包括3个区域：

   

   在pages/index/index.wxml中定义组件的代码如下：

   

   在pages/index/index.wxss中定义样式的代码如下：

   

   修改完后编译运行，小程序页面如下：

   

5. 然后需要在pages/index/index.js中对其进行逻辑实现，数据定义在data中，list是播放列表，danmuTxt是弹幕内容：

   

   播放列表在pages/index/index.wxml中使用wx:for和wx:key实现：

   

6. 实现以下4个函数：

   • 播放视频：playVideo
   • 声明周期函数：onLoad
   • 更新弹幕内容：getDanmu
   • 发送弹幕：sendDanmu

   

   可以打开AppData窗口输入弹幕的同时查看danmuTxt的内容，对函数getDanmu进行测试。

   

7. 在函数sendDanmu中，color可以先设置为red进行测试，此时弹幕的颜色为红色。

   

   编写函数getRandomColor，随机生成16进制颜色。

   

   在函数sendDanmu中，将color设置为getRandomColor进行测试，这样就可以看到彩色的弹幕了。

   

三、程序运行结果

播放视频并发送红色弹幕：

播放视频并发送彩色弹幕：

四、问题总结与体会

1. 实验中遇到[WXML Runtime warning] ./pages/index/index.wxml wx:key="video{{index}}" does not look like a valid key name.的warning，查看微信开发者社区后发现是微信小程序更新的原因，改为wx:key="index"即可。

   

2. 实验中遇到[渲染层错误] Uncaught (in promise) [object DOMException]和[渲染层网络层错误] Failed to load media的问题，可以通过清缓存然后重新编译解决。

   

3. 通过这次实验掌握了视频API的操作方法和随机生成16进制颜色的方法，非常有用。