微信小程序播放视频发送弹幕效果
首先、先来看一下效果图
然后、再看一下官方文档API对video的说明
相关属性解析:
- danmu-list:弹幕列表
- enable-danmu:是否显示弹幕
- danmu-btn:弹幕按钮
- controls:是否显示视频控件,并没有什么用
在这里主要是介绍两个部分:视频播放和发送弹幕
1、视频播放
1)视频video的wxml结构如下所示:
![](https://images2018.cnblogs.com/blog/1375272/201804/1375272-20180413143426449-893033047.jpg)
src的链接是视频来源地址,在这里主要使用danmu-list,enable-danmu,danmu-btn,controls这几个属性值
2)视频屏幕中可以使用danmu-list设置弹幕内容、字体颜色以及出现时间点,如下:
![](https://images2018.cnblogs.com/blog/1375272/201804/1375272-20180413143447046-1671734040.jpg)
这时你可以看到视频的效果图:
![](https://images2018.cnblogs.com/blog/1375272/201804/1375272-20180413143501842-76349896.jpg)
接下来就是该怎么发送弹幕的问题了
2、发送弹幕
1)wxml布局结构:
![](https://images2018.cnblogs.com/blog/1375272/201804/1375272-20180413143514631-1199423692.jpg)
2)wxss比较简单在此不做介绍了,.js写法如下:
![](https://images2018.cnblogs.com/blog/1375272/201804/1375272-20180413143531190-1810228356.jpg)