一、实验目标
- 掌握视频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
进行测试,这样就可以看到彩色的弹幕了。
三、程序运行结果
播放视频并发送红色弹幕:
![微信截图_20230828160250](/i/l/?n=23&i=blog/2608164/202308/2608164-20230828175451908-1490680010.png)
播放视频并发送彩色弹幕:
![微信截图_20230828160430](/i/l/?n=23&i=blog/2608164/202308/2608164-20230828175500252-641318559.png)
四、问题总结与体会
-
实验中遇到
[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进制颜色的方法,非常有用。