视频控制API

本文编辑：  大妖怪浏览 3268 版权所有，严禁转载

接口说明:

接口用法：

wxml

index:

<import src="../common/head.wxml" />
<import src="../common/foot.wxml" />
<view class="container">
  <template is="head" data="{{title: 'chooseVideo'}}"/>

  <view class="page-body">
    <view class="page-section">
      <view class="weui-cells weui-cells_after-title">
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">视频来源</view>
          </view>
          <view class="weui-cell__bd">
            <picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}">
              <view class="weui-input">{{sourceType[sourceTypeIndex]}}</view>
            </picker>
          </view>
        </view>
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">摄像头</view>
          </view>
          <view class="weui-cell__bd">
            <picker range="{{camera}}" bindchange="cameraChange" value="{{cameraIndex}}">
              <view class="weui-input">{{camera[cameraIndex]}}</view>
            </picker>
          </view>
        </view>
        <view class="weui-cell weui-cell_input">
          <view class="weui-cell__hd">
            <view class="weui-label">拍摄长度</view>
          </view>
          <view class="weui-cell__bd">
            <picker range="{{duration}}" bindchange="durationChange" value="{{durationIndex}}">
              <view class="weui-input">{{duration[durationIndex]}}</view>
            </picker>
          </view>
        </view>
      </view>

      <view class="page-body-info">
        <block wx:if="{{src === ''}}">
          <view class="image-plus image-plus-nb" bindtap="chooseVideo">
            <view class="image-plus-horizontal"></view>
            <view class="image-plus-vertical"></view>
          </view>
          <view class="image-plus-text">添加视频</view>
        </block>
        <block wx:if="{{src != ''}}">
          <video src="{{src}}" class="video"></video>
        </block>
      </view>
    </view>
  </view>
</view>

head:

<template name="head">
  <view class="page-head">
    <view class="page-head-title">{{title}}</view>
    <view class="page-head-line"></view>
    <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
  </view>
</template>

js

var sourceType = [ ['camera'], ['album'], ['camera', 'album'] ]
var camera = [ ['front'], ['back'], ['front', 'back'] ]
var duration = Array.apply(null, {length: 60}).map(function (n, i) {
  return i + 1
})

Page({
  data: {
    sourceTypeIndex: 2,
    sourceType: ['拍摄', '相册', '拍摄或相册'],

    cameraIndex: 2,
    camera: ['前置', '后置', '前置或后置'],

    durationIndex: 59,
    duration: duration.map(function (t) { return t + '秒'}),

    src: ''
  },
  sourceTypeChange: function (e) {
    this.setData({
      sourceTypeIndex: e.detail.value
    })
  },
  cameraChange: function (e) {
    this.setData({
      cameraIndex: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      durationIndex: e.detail.value
    })
  },
  chooseVideo: function () {
    var that = this
    wx.chooseVideo({
      sourceType: sourceType[this.data.sourceTypeIndex],
      camera: camera[this.data.cameraIndex],
      maxDuration: duration[this.data.durationIndex],
      success: function (res) {
        that.setData({
          src: res.tempFilePath
        })
      }
    })
  }
})

wxss

@import "../lib/weui.wxss";

.page-body-info {
  display: flex;
  margin-top: 40rpx;
  padding: 0;
  height: 360rpx;
  border-top: 1rpx solid #D9D9D9;
  border-bottom: 1rpx solid #D9D9D9;
  align-items: center;
  justify-content: center;
}
.image-plus-text{
  color: #888888;
  font-size: 28rpx;
}
.image-plus {
  width: 150rpx;
  height: 150rpx;
  border: 2rpx solid #D9D9D9;
  position: relative;
}
.image-plus-nb{
  border: 0;
}
.image-plus-horizontal {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #d9d9d9;
  width: 4rpx;
  height: 80rpx;
  transform: translate(-50%, -50%);
}
.image-plus-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #d9d9d9;
  width: 80rpx;
  height: 4rpx;
  transform: translate(-50%, -50%);
}
.page-body-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  width: 100%;
  padding: 50rpx 0 150rpx 0;
}

主要方法：

【wx.chooseVideo】：【拍摄视频或从手机相册中选视频，返回视频的临时文件路径】

【方法内容描述】

success返回参数说明：

<view class="container">
    <video src="{{src}}"></video>
    <button bindtap="bindButtonTap">获取视频</button>
</view>

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

Bug & Tip
1.bug：音频播放进度条在IEDv0.12.130400版本上测试无效。