首先、先来看一下效果图

然后、再看一下官方文档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. Python基础之-----------函数

    ---恢复内容开始--- 函数:在其他的语言中,我们也经常听到函数的概念,那么什么是函数呢?在Java中叫做method: 定义:函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函 ...

  2. 解决pip下载速度慢

    国外的pip源下载速度过慢,可以换成国内的源,这里换成豆瓣的源. 新建一个文件vim ~/.pip/pip.conf 内容为 [global]timeout = 6000index-url= http ...

  3. java.net.UnknownHostException: www.terracotta.org

    异常日志: java.net.UnknownHostException: www.terracotta.org at java.net.PlainSocketImpl.connect(PlainSoc ...

  4. Jmeter+Ant+Jenkins实现接口自动化(转载)

    转载自  http://www.cnblogs.com/chengtch/p/6145867.html 本文转载于上面的网址,稍作修改,实用性更强. Jmeter是压力测试.接口测试工具,Ant是基于 ...

  5. springboot 取消post数据大小限制

    参考 https://blog.csdn.net/kkgbn/article/details/52088068 application.properties 添加 server.tomcat.max- ...

  6. TabError的解决方法

    问题:Python文件运行时报TabError: inconsistent use of tabs and spaces in indentation 原因:说明Python文件中混有Tab和Spac ...

  7. VM 端口映射问题

    环境: 宿主机:WIN 10 --192.168.9.87 虚拟机:CentOS ---192.168.255.129 联通模式:NAT模式 一.VM做端口映射 1.为了方便管理,设置虚拟机为静态IP ...

  8. Python hash() 函数

    Python hash() 函数  Python 内置函数 描述 hash() 用于获取取一个对象(字符串或者数值等)的哈希值. 语法 hash 语法: hash(object) 参数说明: obje ...

  9. 179. Largest Number(INT, String)

    Given a list of non negative integers, arrange them such that they form the largest number. For exam ...

  10. vue 使用scss

    使用vue-cli模板创建的项目中,使用scss步骤 1. cmd命令: cnpm  install sass-loader --save-dev cnpm install node-sass --s ...