微信小程序视频基本操作

article/2025/10/29 15:24:22

微信小程序视频基本操作

  • 1、视频
    • 1.1 wx.createVideoContext(string id,Object this)接口
      • 1.1.2 VideoContext对象常用函数
      • 1.1.3 小案例
    • 1.2 wx.chooseVideo()接口
        • object.success 回调函数
          • 参数
            • Object res
        • 示例代码
      • 1.2.1 小案例
    • 1.3 wx.saveVideoToPhotosAlbum(Object object)接口
      • 1.3.1 案例

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)	//回到开头}
})

image-20220320194050607

播放

image-20220320194106940

跳转到2分钟位置：

image-20220320194144174

回到开头：

image-20220320194156539

1.2 wx.chooseVideo()接口

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

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

object.success 回调函数

参数
Object res
属性类型说明
tempFilePathstring选定视频的临时文件路径 (本地路径)
durationnumber选定视频的时间长度
sizenumber选定视频的数据量大小
heightnumber返回选定视频的高度
widthnumber返回选定视频的宽度

示例代码

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()来播放选择的视频。

image-20220320195038513

点击上传视频

image-20220320195109228

image-20220320195120583

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

image-20220320195137916

1.3 wx.saveVideoToPhotosAlbum(Object object)接口

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

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

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: '保存图片失败！',})}})}}})}
})

image-20220320195528151

点击保存视频

image-20220320195627990

image-20220320195706219

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

image-20220320195755260


http://chatgpt.dhexx.cn/article/DBofS5nl.shtml

相关文章

【微信小程序】视频播放小程序

【微信小程序】视频播放小程序

课程&#xff1f;中国海洋大学22夏《移动软件开发》实验名称实验3&#xff1a;视频播放小程序 一、实验目标 1、掌握视频列表的切换方法&#xff1b; 2、掌握视频自动播放方法&#xff1b; 3、掌握视频随机颜色弹幕效果。 二、实验步骤 一、项目创建 二、页面配置 创建页面…
阅读更多...
微信小程序如何使用视频组件

微信小程序如何使用视频组件

小程序中可以使用视频组件来播放自己想要展示的视频&#xff0c;具体步骤如下 一、添加视频组件 1、点击“店铺”——“装修店铺”——“编辑”&#xff0c;进入小程序页面编辑。 2、点击“组件库”——“视频”&#xff0c;页面会添加视频组件&#xff0c;点击视频组件的“编…
阅读更多...
PHP实现页面静态化、纯静态化及伪静态化

PHP实现页面静态化、纯静态化及伪静态化

概念 php静态化分为&#xff1a;纯静态化 和 伪静态化&#xff1b; 纯静态化又分为&#xff1a;局部静态化 和 完全静态化 纯静态化&#xff1a;是把PHP生成的动态页面保存成静态的html文件&#xff0c;用户访问该静态页面&#xff0c;而不是用户每一次访问都重新生成一张相…
阅读更多...
SpringBoot整合Thymleaf实现页面静态化

SpringBoot整合Thymleaf实现页面静态化

文章整理题材来源于传智播客乐优商城项目实战&#xff01; 1. 问题需求分析 在做乐优商城时&#xff0c;页面是通过Thymeleaf模板引擎渲染后返回到客户端。当商品详情页数据渲染时&#xff0c;在后台需要大量的数据查询&#xff0c;而后渲染得到HTML页面。在用户访问量大的情况…
阅读更多...
网站页面静态化（二）thymeleaf生成

网站页面静态化（二）thymeleaf生成

今年是农历大年初三&#xff0c;在这里首先给各位朋友拜个年&#xff0c;祝大家新年快乐&#xff0c;虎年大吉大利&#xff0c;事业蒸蒸日上。过年无事&#xff0c;把页面静态化技术整理整理。本文将以thymeleaf为例子&#xff0c;说明在springboot当中&#xff0c;如何基于thy…
阅读更多...
HTML页面静态化技术

HTML页面静态化技术

随着网站的内容的增多和用户访问量的增多&#xff0c;无可避免的是网站加载会越来越慢&#xff0c;受限于带宽和服务器同一时间的请求次数的限制&#xff0c;我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化。 此文已Django的电商网站为例&#xff08;处理高并…
阅读更多...
Thymeleaf动态页面静态化

Thymeleaf动态页面静态化

Thymeleaf 目标 Thymeleaf的介绍Thymeleaf的入门Thymeleaf的语法及标签搜索页面渲染商品详情页静态化功能实现 1.Thymeleaf介绍 1动态页面&#xff1a; 通过执行asp、php、jsp和.net等程序生成客户端网页代码的网页。通常可以通过网站后台管理系统对网站的内容进行更新管理…
阅读更多...
Java使用Freemarker页面静态化生成实现

Java使用Freemarker页面静态化生成实现

Java使用Freemarker页面静态化生成实现 页面静态化其实就是将原来的动态网页(例如通过ajax请求动态获取数据库中的数据并展示的网页)改为通过静态化技术生成的静态网页&#xff0c;这样用户在访问网页时&#xff0c;服务器直接给用户响应静态html页面&#xff0c;没有了动态查询…
阅读更多...
CMS-页面静态化技术

CMS-页面静态化技术

页面静态化技术 页面静态化技术是什么&#xff1f; 页面静态化主要运用在一些大型网站&#xff0c;有大量信息需要与数据库交互。比如大型电商网站京东&#xff0c;淘宝 &#xff0c;天猫等。电商网站最大的特点是什么&#xff1f;数据庞大&#xff0c;页面众多。那么我们都知…
阅读更多...
java页面静态化

java页面静态化

1.概念 页面静态化&#xff0c;其实就是将动态生成的jsp页面&#xff0c;变成静态的HTML页面&#xff0c;让用户直接访问。 2.优点 &#xff08;1&#xff09;加快页面打开浏览速度&#xff0c;静态页面无需连接数据库&#xff0c;打开速度较动态页面有明显提高。 &#xff…
阅读更多...
页面静态化流程

页面静态化流程

本文首先采用CMS管理页面。 首先我们知道模板数据模型输出&#xff0c;页面静态化需要准备数据模型和模板&#xff0c;先知道数据模型的结构才可以编写模板&#xff0c;因为在模板中要引用数据模型中的数据&#xff0c;那么下面我来系统讲解CMS页面数据模型获取、模板管理及静…
阅读更多...
django笔记--页面静态化

django笔记--页面静态化

什么是页面静态化&#xff1a; 1&#xff09;减少数据库查询次数 2&#xff09;提高页面响应效率 页面静态化的作用&#xff1a; 1&#xff09;将动态渲染生成的页面结果保存成html文件&#xff0c;放到静态文件服务器中。 2&#xff09;用户直接去静态服务器&#xff0c;访问…
阅读更多...
PHP实现页面静态化

PHP实现页面静态化

为什么要页面静态化&#xff1f; 1.动态文件执行过程:语法分析-编译-运行 2.静态文件&#xff0c;不需要编译&#xff0c;减少了服务器脚本运行的时间&#xff0c;降低了服务器的响应时间&#xff0c;直接运行&#xff0c;响应速度快&#xff1b;如果页面中一些内容不经常改动…
阅读更多...
【Java】页面静态化

【Java】页面静态化

1.页面静态化介绍 2.Freemarker介绍 3.Freemarker入门案例 3.1环境搭建 创建maven工程并导入Freemarker的maven坐标 <dependency><groupId>freemarker</groupId><artifactId>freemarker</artifactId><version>2.3.23</version> &…
阅读更多...
网站优化---页面静态化技术

网站优化---页面静态化技术

一&#xff1a; 首先先区分一下动态页面和静态页面的区别 动态文件&#xff1a;PHP脚本、Java脚本等 动态文件的执行过程&#xff1a;词法、语法分析 -> 编译 -> 渲染输出 静态文件&#xff1a;HTML文件 从加载速度上可以看出&#xff0c;静态文件明显比动态文件速度…
阅读更多...
openresty 页面静态化及多级缓存

openresty 页面静态化及多级缓存

openresty 页面静态化及多级缓存 多级缓存&#xff1a; 数据缓存的好处不用介绍了吧&#xff01;&#xff0c; 所谓多级缓存&#xff0c;即在整个系统架构的不同系统层级进行数据缓存&#xff0c;以提升访问效率&#xff0c;这也是应用最广的方案之一。而 nginx 是可以缓存数据…
阅读更多...
java网站页面静态化方案

java网站页面静态化方案

要生活得漂亮&#xff0c;需要付出极大的忍耐&#xff0c;一不抱怨&#xff0c;二不解释&#xff0c;绝对是个人才。——《变形记》 1、概述 在大型网站中&#xff0c;如京东和当当商品详情界面&#xff0c;看到的页面基本上是静态页面。为什么都要把页面静态化呢&#xff1f;…
阅读更多...
freemarker 页面静态化技术

freemarker 页面静态化技术

文章目录 一.背景二.页面静态化技术freemarker三.Freemarker基本操作1.引入依赖&#xff1a;2.创建模板文件&#xff1a;3.FTL指令&#xff1a; 四.freemarker整合spring五.总结&#xff1a;1.什么是网页静态化技术2.网页静态化技术与缓存技术的比较3.网页静态化技术的应用场景…
阅读更多...
springboot 页面静态化

springboot 页面静态化

springboot 页面静态化 页面静态化&#xff1a;将动态渲染的页面保存为静态页面&#xff08;一般存储在nginx&#xff09;&#xff0c;提高访问速度 说明&#xff1a;页面静态化适用于数据不常变更的场景&#xff0c;如果数据频繁变更&#xff0c;宜使用其他方案提高访问性能 …
阅读更多...
PHP 页面静态化

PHP 页面静态化

前言 随着网站的内容的增多和用户访问量的增多&#xff0c;网站加载会越来越慢&#xff0c;受限于带宽和服务器同一时间的请求次数的限制&#xff0c;我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化。 一、页面静态化概念 静态化定义 静态化就是指把原本的动态…
阅读更多...
推荐文章

Copyright @ 2022~2023