1、视频

  小程序提供了wx.createVideoContext(string id,Object this)、wx.chooseVideo(Object object)、wx.saveVideoToPhotosAlbum(Object object)等接口对手机视频进行操作。

1.1 wx.createVideoContext(string id,Object this)接口

  创建 video 上下文 VideoContext 对象。

  语法如下：

this.videoContext=wx.createVideoContext('myVideo')

1.1.2 VideoContext对象常用函数

接口	功能和用途
VideoContext.play()	播放视频
VideoContext.pause()	暂停视频
VideoContext.stop()	停止视频
VideoContext.seek(number position)	跳转到指定位置(单位,s)
VideoContext.sendDanmu(Object data)	发送弹幕
VideoContext.playbackRate(number rate)	设置倍速播放
VideoContext.requestFullScreen(Object object)	进入全屏。若有自定义内容需在全屏时展示，需将内容节点放置到 video 节点内。
VideoContext.exitFullScreen()	退出全屏
VideoContext.showStatusBar()	显示状态栏，仅在iOS全屏下有效
VideoContext.hideStatusBar()	隐藏状态栏，仅在iOS全屏下有效

1.1.3 小案例

  本例使用wx.createVideoContext()创建Video上下文videoContext对象，然后再对食品进行发送弹幕、播放、暂停、定位和回滚操作。

createVideoContext.wxml

<view class="section tc"><video  id="myVideo"  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{{danmuList}}" enable-danmu  danmu-btn  controls ></video><view class="btn-area"><input bindblur="bindInputBlur" /><button bindtap="bindSendDanmu">发送弹幕</button></view>
</view>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">跳到2分钟位置</button>
<button type="primary" bindtap="audioStart">回到开头</button>

createVideoContext.js

function getRandomColor() {const rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')
}Page({onReady(res) {this.videoContext = wx.createVideoContext('myVideo')},inputValue: '',data: {src: '',danmuList: [{text: '第 1s 出现的弹幕',color: '#ff0000',time: 1},{text: '第 3s 出现的弹幕',color: '#ff00ff',time: 3}]},bindInputBlur(e) {this.inputValue = e.detail.value},bindSendDanmu() {this.videoContext.sendDanmu({text: this.inputValue,color: getRandomColor()})},audioPlay: function () {this.videoContext.play()  //播放},audioPause: function () {this.videoContext.pause()    //暂停},audio14: function () {this.videoContext.seek(120) //跳转到120秒处},audioStart: function () {this.videoContext.seek(0)  //回到开头}
})

播放

跳转到2分钟位置：

回到开头：

1.2 wx.chooseVideo()接口

  拍摄视频或从手机相册中选视频。wx.chooseVideo()接口参数如表所示。

属性	类型	默认值	必填	说明	最低版本
	sourceType	Array.	[‘album’, ‘camera’]	否	视频选择的来源	album从相册选择视频camera使用相机拍摄视频
	compressed	boolean	true	否	是否压缩所选择的视频文件	1.6.0
	maxDuration	number	60	否	拍摄视频最长拍摄时间，单位秒
	camera	string	‘back’	否	默认拉起的是前置或者后置摄像头。部分 Android 手机下由于系统 ROM 不支持无法生效
	success	function		否	接口调用成功的回调函数
	fail	function		否	接口调用失败的回调函数
	complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
tempFilePath	string	选定视频的临时文件路径 (本地路径)
duration	number	选定视频的时间长度
size	number	选定视频的数据量大小
height	number	返回选定视频的高度
width	number	返回选定视频的宽度

示例代码

wx.chooseVideo({sourceType: ['album','camera'],maxDuration: 60,camera: 'back',success(res) {console.log(res.tempFilePath)}
})

1.2.1 小案例

  本例使用wx.chooseVideo()接口选中手机上的某一视频，然后对选中的视频进行播放操作。

chooseVideo.wxml

<view class="section tc"><video  id="myVideo"  src="{{src}}" danmu-list="{{danmuList}}" enable-danmu  danmu-btn  controls ></video>
</view>
<button type="primary" bindtap="uploadvideo">上传视频</button>
<button type="primary" bindtap="audioPlay">播放</button>

chooseVideo.js

Page({onReady(res) {},inputValue: '',data: {src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'},uploadvideo: function () {var that=this;wx.chooseVideo({sourceType: ['album', 'camera'],maxDuration: 60,camera: 'back',success(res) {that.setData({src: res.tempFilePath})console.log(that.data.src)}})},audioPlay: function () {this.videoContext = wx.createVideoContext('myVideo')this.videoContext.play()}})

   sourceType:[‘album’,‘camera’]说明可以选择手机上的视频，也可以及时拍摄视频。在选择了新视频之后采用wx.createVideoContext()来获取VideoContext对象，使用this.videoContext.play()来播放选择的视频。

点击上传视频

点击播放(可以正常播放，测试正常)

1.3 wx.saveVideoToPhotosAlbum(Object object)接口

  该接口保存视频到系统相册。支持mp4视频格式。

属性	类型	默认值	必填	说明
filePath	string		是	视频文件路径，可以是临时文件路径也可以是永久文件路径 (本地路径)
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

1.3.1 案例

  本例使用wx.saveVideoToPhotosAlbum(Object object)接口保存一个视频到手机视频库中。

saveVideo.wxml

<view class="section tc"><video  id="myVideo"  src="{{src}}" danmu-list="{{danmuList}}" enable-danmu  danmu-btn  controls></video>
</view>
<button type="primary" bindtap="save">保存视频</button>

saveVideo.js

Page({inputValue: '',data: {src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'},save: function () {var that=this;wx.downloadFile({url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',     //仅为示例，并非真实的资源success: function (res) {// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容if (res.statusCode === 200) {wx.saveVideoToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '保存视频成功！',})},fail(res) {wx.showToast({title: '保存图片失败！',})}})}}})}
})

点击保存视频

  我这里用的开发者工具模拟的，手机上面操作也是一样的。

微信小程序视频基本操作相关推荐

1. 第21课 微信小程序视频标签显示弹幕

   第21课 微信小程序视频标签显示弹幕 效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...

2. 微信小程序视频上传组件直接上传至阿里云OSS

   一.微信小程序视频上传组件示例 多视频上传功能,直传OSS,可以直接从OSS删除:组织接受以逗号分隔的视频url地址,自动列出多个视频,但点击上传按钮上传视频后,同样返回以逗号分隔的视频url地址. ...

3. 微信小程序 视频列表 封面图 禁止多个视频同时播放

   微信小程序视频列表用到的组件是  video 链接  https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...

4. 详细解析黑马微信小程序视频--【思维导图知识范围】

   语言视频选择 收录专辑链接 C 张雪峰推荐选择了计算机专业之后-在大学期间卷起来-[大学生活篇] JAVA 黑马B站视频JAVA部分的知识范围.学习步骤详解 JAVAWEB 黑马B站视频JAVAWEB ...

5. 微信小程序-视频弹幕的项目

   1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 一般微信小程序需要配置.wxml.wxss.js.json文件,所有接下来也是要配置这几个文件,请看下图: 第一:  index.wxml < ...

6. 微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...

   在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...

7. 微信小程序 视频列表滑动无限循环（仿抖音）

   一.写在前面: 1:安卓ios表现基本一致,不是swiper组件实现,滑动效果流畅不卡顿,实现了列表无限循环.不是使用官方的腾讯视频播放组件,完整代码在下面 2:实现功能:支持位置导航.拨打电话.复制 ...

8. 通过wireshark下载微信小程序视频一例

   一.准备 wireshark   下载地址[https://www.wireshark.org/download.html] 微信 windows版 二.打开wireshark 打开wireshark ...

9. 【Fidder网络抓包+Python爬虫】下载微信小程序视频

   首先声明本篇博客以学习为目的,侵权即删. 文章目录 1. Fidder抓包 1.1 在电脑上打开微信小程序视频播放页以及Fidder软件 1.2 点击视频播放按钮,并查看Fidder抓到的数据包 2. ...

10. 微信小程序 # 视频接入方法

    参考资料 腾讯视频插件 微信小程序 腾讯视频插件 https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wxa75efa648b60994b&t ...

最新文章

1. BCH压力测试最终统计
2. DOS之BAT批处理文件语法3(转)
3. 欧拉遗留240多年的问题，被物理学家用量子力学解决
4. java 游戏视频_Java swing实现的小游戏24点游戏源码附带视频指导教程
5. java 什么是内存屏障,java内存屏障和可见性
6. Java Optional学习笔记
7. 19年8月 字母哥 第三章 spring boot 配置原理实战 用热点公司网不行
8. 【Java】猜数字小游戏设计由浅入深
9. matlab fftshift_MATLAB信号频谱分析FFT详解
10. 复杂性思维中文第二版 七、物理建模
11. 余额宝限购了！为啥？
12. linux内核双向链表学习
13. 计算机十大经典算法整理
14. 摩托罗拉e680i手机刷linux开源系统
15. zzuli OJ 2331：小新同学的智商
16. 计算机语言编码常用英文,MQ4语言编程 EA常用英文词汇
17. 为什么选择语雀-你想知道的都在这
18. Redis基础——数据类型详解
19. SolidWorks PDM二次开发---检出与检入
20. 自定义 Drawable实现灵动红鲤鱼特效

热门文章

1. 百度用户增长SQL面试题
2. 2020软件测试最新视频教程大合集汇总
3. 设置火狐 账号服务器,Firefox 账号问答
4. 电源模块-LM5117-BUCK- 电路
5. kali扫描内网ip_kali linux 如何查找局域网ip
6. 面向对象设计与构造课程作业 _第三单元总结 _北京航空航天大学计算机学院 2019春季...
7. SQL2017安装教程
8. GD32F303 移植 FreeRTOS
9. iVX低代码平台系列制作APP简单的个人界面
10. 工地物资出入库管理软件系统