实验3：媒体API之口述校史
一、实验目标
- 掌握视频API的操作方法;
- 掌握如何发送随机颜色的弹幕。
二、实验步骤
-
根据实验手册上的网址，下载视频播放图标，图片如下。
-
进入微信开发者工具，创建一个新项目videoDemo。
-
在根目录下的
app.json中定义导航栏标题和背景颜色，如下图所示。
-
根据实验文档，页面设计包括3个区域：
在
pages/index/index.wxml中定义组件的代码如下：
在
pages/index/index.wxss中定义样式的代码如下：
修改完后编译运行，小程序页面如下：
-
然后需要在
pages/index/index.js中对其进行逻辑实现，数据定义在data中，list是播放列表，danmuTxt是弹幕内容：
播放列表在
pages/index/index.wxml中使用wx:for和wx:key实现：
-
实现以下4个函数：
- 播放视频：
playVideo - 声明周期函数：
onLoad - 更新弹幕内容：
getDanmu - 发送弹幕：
sendDanmu
可以打开AppData窗口输入弹幕的同时查看
danmuTxt的内容，对函数getDanmu进行测试。
- 播放视频：
-
在函数
sendDanmu中，color可以先设置为red进行测试，此时弹幕的颜色为红色。
编写函数
getRandomColor，随机生成16进制颜色。
在函数
sendDanmu中，将color设置为getRandomColor进行测试，这样就可以看到彩色的弹幕了。
三、程序运行结果
播放视频并发送红色弹幕：
播放视频并发送彩色弹幕：
四、问题总结与体会
-
实验中遇到
[WXML Runtime warning] ./pages/index/index.wxml wx:key="video{{index}}" does not look like a valid key name.的warning，查看微信开发者社区后发现是微信小程序更新的原因，改为wx:key="index"即可。
-
实验中遇到
[渲染层错误] Uncaught (in promise) [object DOMException]和[渲染层网络层错误] Failed to load media的问题，可以通过清缓存然后重新编译解决。
-
通过这次实验掌握了视频API的操作方法和随机生成16进制颜色的方法，非常有用。