微信小程序 video组件详解
主要属性：
效果图：
ml:
<View>1.播放网络视频</View>
<view >
<video style="width: 100%;height=400px;margin:1px;" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" binderror="videoErrorCallback"></video>
</view>
<View>2.播放本地视频</View>
<view style="display: flex;flex-direction: column;">
<video style="width: 100%;height=400px;margin:1px;" src="{{src}}"></video>
<view class="btn-area">
<button bindtap="bindButtonTap">打开本地视频</button>
</view>
</view>
js：
Page({
data: {
src: ''
},
/**
* 打开本地视频
*/
bindButtonTap: function() {
var that = this
//拍摄视频或从手机相册中选视频
wx.chooseVideo({
//album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
sourceType: ['album', 'camera'],
//拍摄视频最长拍摄时间，单位秒。最长支持60秒
maxDuration: 60,
//前置或者后置摄像头，默认为前后都有，即：['front', 'back']
camera: ['front','back'],
//接口调用成功，返回视频文件的临时文件路径，详见返回参数说明
success: function(res) {
console.log(res.tempFilePaths[0])
that.setData({
src: res.tempFilePaths[0]
})
}
})
},
/**
* 当发生错误时触发error事件，event.detail = {errMsg: 'something wrong'}
*/
videoErrorCallback: function(e) {
console.log('视频错误信息:')
console.log(e.detail.errMsg)
}
})
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
-
本文向大家介绍微信小程序 video组件详解及实例代码，包括了微信小程序 video组件详解及实例代码的使用技巧和注意事项，需要的朋友参考一下 视频播放组件与图片加载组件也没啥差别，使用起来也没啥注意的 重要属性： wxml js 相关文章： hello WeApp icon组件 Window tex
-
本文向大家介绍微信小程序 form组件详解，包括了微信小程序 form组件详解的使用技巧和注意事项，需要的朋友参考一下 表单： 将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交 主要属性： 效果图： ml: ss: js: 复制代码 注意： form表单组件 是提交form内的所有选中属性的值， 注意
-
本文向大家介绍微信小程序 Image组件实例详解，包括了微信小程序 Image组件实例详解的使用技巧和注意事项，需要的朋友参考一下 image组件也是一个程序不可缺少的，可以这样说一个app中image组件随处可以看到，一般 image有两种加载方式第一种是网络图片第二种是本地图片资源，都用src属性去指定。 重点属性： 三种缩放模式 九种剪切方式 wxml 相关文章： hello WeApp
-
本文向大家介绍微信小程序搜索组件wxSearch实例详解，包括了微信小程序搜索组件wxSearch实例详解的使用技巧和注意事项，需要的朋友参考一下 wxSearch优雅的微信小程序搜索框 一、功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二、使用 1、将wxSearch文件夹整个拷贝到根目录下 2、引入 3、使用3.1 wxml文件这里有两种模板：一种为wxSe
-
本文向大家介绍微信小程序 （八）View组件详细介绍，包括了微信小程序 （八）View组件详细介绍的使用技巧和注意事项，需要的朋友参考一下 刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单。 主要属性： flex-direction： 主要两个特性”row”横向排列”column”纵向排列 justify-conte
-
本文向大家介绍微信小程序 条件渲染详解，包括了微信小程序 条件渲染详解的使用技巧和注意事项，需要的朋友参考一下 1，wx.if 在微信小程序中，小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块，用法如下： <view wx.if="{{条件}}">True</view> 也可以用wx.elif和wx.else来添加一个else块，事例如下： <view wx:if="{{a>1}}"