首先、先来看一下效果图

然后、再看一下官方文档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. SQLMAP自动注入(三):参数介绍

    --delay延时扫描 --scope 从burpsuit日志中过滤日志内容,通过正则表达式筛选扫描目标,19开头,尾数为1.11.121.221的目标 --level=3 会检查user-agent ...

  2. ss源码学习--事件处理

    为了方便区分,以下分别使用local,server,remote代表ss客户端,ss服务端,以及ss客户端请求访问的远程主机. 在shadowsocks中,无论对于local还是server,都需要建 ...

  3. IDEA中配置Maven+spring MVC+tomcat

    一:配置Maven安装教程如下: http://blog.csdn.net/qq_32588349/article/details/51461182 实际安装过程中,如果按照教程配置如下属性,最后创建 ...

  4. leecode 978. Longest Turbulent Subarray(最长连续波动序列,DP or 滚动数组)

    传送门:点我 978. Longest Turbulent Subarray A subarray A[i], A[i+1], ..., A[j] of A is said to be turbule ...

  5. 155. Min Stack (stack)

    Design a stack that supports push, pop, top, and retrieving the minimum element in constant time. pu ...

  6. ora-12899解决方法

    在使用ORACLE的过程中,会出现各种各样的问题,各种各样的错误,其中ORA-12899就是前段时间我在将数据导入到我本地机器上的时候一直出现的问题.不过还好已经解决了这个问题,现在分享一下,解决方案 ...

  7. string类的一些函数方法

    1.请查看String.equals()方法的实现代码,注意学习其实现方法: (1)源程序: public class StringEquals { /** * @param args the com ...

  8. 解决 MySQL 比如我要拉取一个消息表中用户id为1的前10条最新数据

    我们都知道,各种主流的社交应用或者阅读应用,基本都有列表类视图,并且都有滑到底部加载更多这一功能, 对应后端就是分页拉取数据.好处不言而喻,一般来说,这些数据项都是按时间倒序排列的,用户只关心最新的动 ...

  9. vue总结2

    1. 给router-link添加事件 之前用v-link 现在用 router-link 添加事件要用原生的.native修饰v-on <my-component v-on:click.nat ...

  10. YII2中behavior行为的理解与使用

    YII2中的行为说白了就是对组件功能的扩展,在不改变继承关系的条件下. 行为附加到组件后,行为将注入自已的方法和属性到组件,可以像组件访问自定义的方法和属性一样访问行为. 注意行为是对功能的扩展,不要 ...