首先、先来看一下效果图

然后、再看一下官方文档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. Signed Distance Field Technique

    [Distance Field Technique] 一种小纹理高清放大的技术. A distance field is generated from a high resolution image, ...

  2. date命令转换日期命令提示date: illegal time format

    问题:运行date命令抛错 date -j -f "%a %b %d %T %Z %Y" "Sat Sep 29 11:33:00 CST 2018" &quo ...

  3. (django1.10)访问url报错Forbidden (CSRF cookie not set.): xxx

    问题:页面访问时报错 Forbidden (CSRF cookie not set.): xxx     解决方法: 修改settings.py文件,注释掉 django.middleware.csr ...

  4. Numpy函数库基础

    利用Numpy函数库构造4*4随机数组,然后将数组转化为矩阵,然后矩阵与其逆矩阵相乘,计算机处理的误差 from numpy import * random.rand(4,4) print(rando ...

  5. DRF的视图和路由

    DRF的视图 APIView Django中写CBV的时候继承的是View,rest_framework继承的是APIView, urlpatterns = [ url(r'^book$', Book ...

  6. leetcode题库解答源码(python3)

    下面和大家分享本人在leetcode上已经ace的题目源码(python3): 本人会持续更新!- class Leetcode_Solution(object): def twoSum_1(self ...

  7. http://www.rabbitmq.com/documentation.html

    http://www.rabbitmq.com/documentation.html https://www.gitbook.com/book/geewu/rabbitmq-quick/details

  8. TableViewCell去除选中效果

    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{ [tableV ...

  9. Validate常用校验

    1.首先将jQuery.js和jquery.validate.js加入对应的页面中,如果要中文的提示语还要把messages_zh.js加入,以及对应的css文件. <link href=&qu ...

  10. 自动化运维工具 SaltStack 搭建

    原文地址:https://www.ibm.com/developerworks/cn/opensource/os-devops-saltstack-in-cloud/index.html#N10072 ...