首先、先来看一下效果图

然后、再看一下官方文档API对video的说明

相关属性解析:

  1. danmu-list:弹幕列表
  2. enable-danmu:是否显示弹幕
  3. danmu-btn:弹幕按钮
  4. controls:是否显示视频控件,并没有什么用

在这里主要是介绍两个部分:视频播放和发送弹幕

1、视频播放
1)视频video的wxml结构如下所示:
src的链接是视频来源地址,在这里主要使用danmu-list,enable-danmu,danmu-btn,controls这几个属性值
2)视频屏幕中可以使用danmu-list设置弹幕内容、字体颜色以及出现时间点,如下:
 
这时你可以看到视频的效果图:
 
接下来就是该怎么发送弹幕的问题了
 
2、发送弹幕
1)wxml布局结构:
 
 
2)wxss比较简单在此不做介绍了,.js写法如下:
 

微信小程序播放视频发送弹幕效果的更多相关文章

  1. 微信小程序播放视频

    <view class="section tc"> <video id="myVideo" src="http://wxsnsdy. ...

  2. 腾讯技术分享:微信小程序音视频技术背后的故事

    1.引言 微信小程序自2017年1月9日正式对外公布以来,越来越受到关注和重视,小程序上的各种技术体验也越来越丰富.而音视频作为高速移动网络时代下增长最快的应用形式之一,在微信小程序中也当然不能错过. ...

  3. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  4. 微信小程序实现标签页滑块效果

    微信小程序实现标签页滑块效果 小程序完整代码: wxml: <view class="swiper-tab"> <view class="swiper- ...

  5. 微信小程序存放视频文件到阿里云用到算法js脚本文件

           peterhuang007/weixinFileToaliyun: 微信小程序存放视频文件到阿里云用到算法js脚本文件 https://github.com/peterhuang007/ ...

  6. 微信小程序里实现跑马灯效果

    在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...

  7. 微信小程序中视频的显示与隐藏

    在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视 ...

  8. 微信小程序实现“鲜肉APP”首页效果

    项目地址http://git.oschina.net/djcx/WeiXinXiaoChengXu/tree/master 如果您觉得不错,记得给一个star 由于微信小程序目前是当下趋势,正好昨天弄 ...

  9. 如何使用微信小程序云函数发送短信验证码

    其实微信小程序前端和云端都是可以调用短信平台接口发送短信的,使用云端云函数的好处是无需配置域名,也没有个数限制. 本文使用的是榛子云短信平台(http://smsow.zhenzikj.com) ,S ...

随机推荐

  1. 截图软件FastStone

    屏幕截图软件(FastStone Capture) 好用,可以粘贴 / 复制. 可以做页面设计,有屏幕标尺,取色器.

  2. 替换空格(python)

    题目描述 请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. # -*- coding:ut ...

  3. RxJS之catchError

    Catches errors on the observable to be handled by returning a new observable or throwing an error. 返 ...

  4. WISH开发API

    https://merchant.wish.com/documentation/api#api http://wishquan.com/

  5. privilege instruction error

    检查新建的回调函数是否用了__stdcall修饰

  6. jira与svn的调研

    centos7.3 + jira7.8.3 + svn 1.7.14 一.环境搭建 1.centos7.3环境搭建:(1)下载centos7.3的.iso文件 http://mirrors.aliyu ...

  7. 用户Cookie和会话Session、SessionId的关系

    一.客户端用cookie保存了sessionID 客户端用cookie保存了sessionID,当我们请求服务器的时候,会把这个sessionID一起发给服务器,服务器会到内存中搜索对应的sessio ...

  8. JFinal Web开发学习(六)验证码验证和注册细节

    效果: 实现了注册界面的验证码验证.确认密码.密码md5加盐加密.C3P0插件数据库操作.读取外部配置文件. 1.在注册页面添加了确认密码输入框,修改了字段名称 <!DOCTYPE html&g ...

  9. 梦殇 chapter four

    有人说,当你为一个问题发愁时,投掷硬币是最好的解决办法.不是因为硬币本身,而是当抛在空中时,你心里希望它落在哪面.       或许是这样吧.     时间会淡化一切记忆么,总是不相信,时间是最好的解 ...

  10. 百度 echarts

    插件地址:http://echarts.baidu.com/index.html ECharts 特性 特性 丰富的可视化类型 多种数据格式无需转换直接使用 千万数据的前端展现 移动端优化 多渲染方案 ...