美文网首页小程序
微信小程序video组件

微信小程序video组件

作者: 小码哥教育520it | 来源:发表于2016-10-17 16:05 被阅读2444次

    23.video 组件
    视频
    常用属性:


    效果图(压缩过):

    注意:1.电脑端不能测试拍摄功能只能测试选择视频功能,现在只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tempFilePath,文档写的有点问题。
    2.video标签认宽度300px、高度225px,设置宽高需要通过wxss设置width和height。

    video.wxml添加代码:

    <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>
    

    video.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)
    
     }
    
    })
    

    来源:
    http://bbs.520it.com/forum.php?mod=viewthread&tid=2496

    相关文章

      网友评论

        本文标题:微信小程序video组件

        本文链接:https://www.haomeiwen.com/subject/ikfzyttx.html