微信小程序——video视频播放

1、功能介绍

可以实现视频的播放暂停，发送弹幕，获取视频所处位置等。

2、video组件

2.1、用处

video组件常用于视频的播放，默认宽度为300px，高度为225px。

2.2、属性

属性	说明
src	视频的资源地址
loop	是否循环播放，默认false
controls	是否显示默认播放按钮(暂停，播放进度，时间）默认为true
danmu-list	弹幕列表
danmu-btn	是否显示弹幕按钮，只在初始化有效，不能动态变更，默认为false
enable-danmu	是否展示弹幕，只在初始化有效，不能动态变更，默认false
autoplay	是否自动播放，默认false
poster	视频封面的图片网络资源地址，如果controls属性为false,则设置poster无效
bindplay	当播放时触发play事件
bindpause	当暂停播放时触发pause事件

3、index.js中的数据部分

data: {src:"http://localhost:3000/1.mp4",danmuList:[{text:'first',color:'#ff0000',time:1},{text:'second',color:'#008080',time:2},{text:'three',color:'#ff00ff',time:3}]},

4、结构布局index.wxml

<video id="myVideo" src='{{src}}' danmu-list="{{danmuList}}" enable-danmu  danmu-btn controls></video>
<input bindblur="bindInputBlur"/>
<button bindtap="bindSendDanmu">发送弹幕</button>
<button bindtap="bindButtonTap">获取视频</button>

5、样式部分index.wxss

video{width: 100vw;
}
input{border: 1rpx  solid #ccc;margin: 20rpx;
}
button{background-color: rgb(76, 250, 114);
}
button{margin-bottom: 10rpx;
}

6、弹幕实现功能

 videoContext:null,inputValue:'',onReady:function(){this.videoContext=wx.createAudioContext('myVideo')},bindInputBlur:function(e){this.inputValue=e.detail.value},bindSendDanmu: function () {this.videoContext.sendDanmu({text: this.inputValue,color: "#f90"})},

创建的videoContent对象，用于对video组件进行控制

7、获取视频功能

bindButtonTap:function(){wx.chooseVideo({sourceType:['album','camera'],maxDuration:60,camera: 'back',success:res=>{this.setData({src:res.tempFilePath})}})}

8、运行效果

微信小程序——video视频播放相关推荐

微信小程序 video 视频播放卡顿
m3u8是一种索引文件,本质上是存放的对应服务器上的视频网络地址.微信小程序使用这种作为视频源可以完美解决卡顿的问题. 手机上传到服务器的视频大部分格式是mp4的,这里服务器可以把mp4转换成m3u8 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序 - video组件poster无效 / 视频播放列表
在做有关微信小程序有关视频播放页面的时候,遇到video组件设置poster无效果,然后查了下poster属性:视频封面的图片网络资源地址,如果 controls 属性值为 false 则设置 pos ...
微信小程序video组件调用腾讯视频的解决方案
最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下. 对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的. 对方提供的视频链接: https ...
解决微信小程序video属性controls失效问题
解决微信小程序video属性controls失效问题参考文章: (1)解决微信小程序video属性controls失效问题 (2)https://www.cnblogs.com/lguow/p/92 ...
微信小程序安卓视频播放卡顿问题
在微信小程序开发中遇到在video组件的两个问题 1.安卓手机里播放视频会有明显的卡顿问题刚开始以为是网络问题,或者是视频文件问题.排查了一下发现都没问题最后加了个属性就OK了 uniapp和原生 ...
微信浏览器video标签没有封面_织梦百度小程序微信小程序video标签不支持视频封面，autoplay等问题修复方法...
在现有的百度小程序富文本组件bdParse,以及微信小程序富文本组件wxParse,对于video的标签解析仅仅只是有个video而已,其他的属性几乎都过滤掉了,所以就需要我们假设对于属性(由于H5的 ...
微信小程序 video 层级高问题
解决方案一:使用微信小程序提供的cover-view组件. 解决方案二:设置video的z-index为1,然后设置弹窗z-index为99999,即可在视频上方弹出弹窗.
微信小程序video默认不播放且显示视频第一帧
小程序video 只设置 controls="{{false}}" 会显示播放按钮通过设置show-center-play-btn="{{false}}" 就 ...
微信小程序video组件调用腾讯视频的解析
1.首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的 https://v.qq.com/x/page/b0136et5ztz.html 上面我加粗的是视频的vid 2.我们把vid放到接口 ...

微信小程序——video视频播放

微信小程序——video视频播放相关推荐

最新文章

热门文章