小程序video时长获取

可以通过小程序的API获取视频的时长，具体步骤如下：

1. 在wxml文件中添加video组件，并给它设置一个ID，例如：

<video id="myVideo" src="{{videoSrc}}"></video>

2. 在js文件中获取video组件，并调用它的duration属性获取视频时长，例如：

var video = wx.createVideoContext('myVideo');
video.onCanplay(function() {
  console.log("视频时长为：" + video.duration);
})

注意，需要在视频加载完成后才能获取到视频时长，因此需要在onCanplay回调函数中获取。同时，也需要确保videoSrc属性指向的视频文件存在且可以正常播放。

相关问题

微信小程序中如何获取视频时长

在微信小程序中，获取视频文件的时长可以通过JavaScript的FileReader API来实现。首先，你需要让用户选择视频文件，然后你可以通过以下步骤获取视频时长：

1. **用户选择视频**: 使用`wx.chooseVideo(Object options)`方法让用户选择视频，返回结果包含选定的video对象。

async chooseVideo() {
    const res = await wx.chooseVideo({
        sourceType: ['camera', 'album'],
        maxDuration: 60, // 设置最大录制时间限制（秒）
        success: function (res) {
            const video = res.video;
            getVideoDuration(video);
        }
    });
}

2. **读取视频二进制数据**: 使用`wx.downloadFile`下载视频到临时路径，然后读取文件内容。

async getVideoDuration(video) {
    let tempFilePath;
    // ... (处理视频下载到本地的逻辑)
    wx.downloadFile({
        url: video.tempFilePath, // 视频临时路径
        header: {},
        success: async function (res) {
            tempFilePath = res.tempFilePath; // 获取视频的本地临时路径
            const reader = new FileReader();
            reader.onloadend = function (e) { // 当文件读取完毕
                const blob = e.target.result;
                const mediaInfo = await wx.getVideoInfo({mediaId: tempFilePath});
                const duration = mediaInfo.duration; // 获取视频时长（单位秒）
                console.log('视频时长:', duration);
            };
            reader.readAsArrayBuffer(blob); // 读取视频二进制数据
        },
        fail: () => {
            console.error('视频加载失败');
        }
    });
}

注意：这个过程需要用户授权并允许小程序访问他们的相机和相册，以及在后台运行的情况下才能读取视频。此外，`getVideoInfo`方法在iOS环境中可能不可用，只适用于Android设备。

微信小程序video自定义进度条

要自定义微信小程序video的进度条，可以使用wx.createVideoContext()方法获取video组件实例，然后通过该实例的属性和方法来实现自定义进度条的效果。

以下是一个简单的示例代码：

wxml文件部分：

<video src="{{src}}" id="myVideo"></video>
<view class="progress-bar" style="width: {{progress}}%;"></view>

js文件部分：

Page({
  data: {
    src: '视频地址',
    duration: 0, // 视频总时长
    currentTime: 0, // 当前播放时间
    progress: 0 // 进度条进度
  },
  onLoad: function () {
    // 获取video组件实例
    this.videoContext = wx.createVideoContext('myVideo', this);
    // 监听视频播放时间变化事件
    this.videoContext.onTimeUpdate(this.handleTimeUpdate);
    // 获取视频总时长
    this.videoContext.duration((duration) => {
      this.setData({
        duration: duration
      });
    });
  },
  handleTimeUpdate: function (e) {
    // 更新当前播放时间和进度条进度
    this.setData({
      currentTime: e.detail.currentTime,
      progress: e.detail.currentTime / this.data.duration * 100
    });
  }
});

css文件部分：

.progress-bar {
  height: 6px;
  background-color: #ccc;
}

在上述代码中，我们首先通过wx.createVideoContext()方法获取video组件实例，然后在onLoad()生命周期函数中监听视频播放时间变化事件，并获取视频总时长。在handleTimeUpdate()函数中，我们更新当前播放时间和进度条进度，最后在wxml文件中使用style属性来设置进度条的宽度。

需要注意的是，为了让Video组件支持进度条拖动功能，还需要在wxml文件中添加bindtouchstart、bindtouchmove和bindtouchend事件，并在js文件中添加相应的处理函数。