首先、先来看一下效果图

然后、再看一下官方文档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. 性能测试工具---jmeter

    一.jmeter:简介  Apache jmeter是Apache组织的开发的源代码项目,是一个纯的Java应用,用于压力测试和性能测试,他最初的测试使用于web端的测试,但是后来也被扩展到其他的测试 ...

  2. SQLMAP自动注入(一):sqlmap的简单使用和配合burpsuite使用

    python编写,开源 检测方式 基于布尔的盲注检测 基于时间的盲注检测 基于错误的检测 基于union的检测 基于堆叠的检测 优点 数据库直连 -d cookie过期后自动更新cookie信息 可以 ...

  3. 【C++】c++11多线程初探

    相关头文件c++11 新标准中引入了四个头文件来支持多线程编程,他们分别是<atomic> ,<thread>,<mutex>,<condition_vari ...

  4. 以字符串形式获取excel单元格中的内容

    public static String getCellValue(XSSFCell cell) { if (cell == null) { return ""; } switch ...

  5. ORACLE 如何产生一个随机数

    1.select dbms_random.string('x', 3) from dual ; x是类型,3是长度. /* opt可取值如下: 'u','U'    :    大写字母 'l','L' ...

  6. Maven 添加jar包到本地仓库

    一.使用Maven命令安装jar包 前提:在windows操作系统中配置好了Maven的环境变量,怎么配置请自己百度,这里不介绍,可参考https://jingyan.baidu.com/articl ...

  7. 最短路 poj1125

    输入一个n表示有n个点,接下来n行,每行(假设是u)第一个数字m表示有m对数字(每一对两个数字v,w,表示u到v的时间w),后面接m对数字.找一个起点,它到其他点所花费的时间(求起点到其他点距离的最大 ...

  8. Google、微软软件测试之道

    扫码时备注或说明中留下邮箱 付款后如未回复请至https://shop135452397.taobao.com/ 联系店主

  9. Mac下环境变量设置错误,导致命令行命令不能使用后的解决办法

    1 在命令行中,临时设置环境变量 export PATH=/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin 2 各种命令就可以使用了.然后修复错误的环境变量配置 ...

  10. C++ map与unordered_map

    map与unordered_map对比 map unordered_map 红黑树(非严格二叉平衡搜索树)实现 哈希表实现 有序 无序 -- 查找时间复杂度为O(1),非常快 空间消耗较大 空间消耗较 ...