小程序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属性指向的视频文件存在且可以正常播放。

相关问题

微信小程序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文件中添加相应的处理函数。

微信小程序video模拟实现进度条功能可拖拽

要实现微信小程序video组件的进度条可拖拽功能，可以使用以下步骤：

1. 在.wxml文件中，使用video组件，并加上一个view容器作为进度条的背景，再加上一个view作为进度条的滑块，代码如下：

<video src="{{src}}" poster="{{poster}}" bindtimeupdate="timeUpdate"></video>
<view class="progress-bar">
  <view class="progress" style="width: {{progress}}%;"></view>
  <view class="progress-btn" style="left: {{btnLeft}}px;"></view>
</view>

2. 在.wxss文件中，设置进度条和滑块的样式：

.progress-bar {
  position: relative;
  height: 6px;
  background-color: #ddd;
}
.progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  background-color: #f00;
}
.progress-btn {
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #f00;
  box-shadow: 0 0 2px #f00;
  transform: translateX(-50%);
}

3. 在.js文件中，定义一个data对象，包含视频的总时长、当前播放时间、进度条长度和滑块位置等信息：

data: {
  src: 'http://www.example.com/video.mp4',
  poster: 'http://www.example.com/poster.jpg',
  duration: 0,
  currentTime: 0,
  progress: 0,
  btnLeft: 0,
}

4. 在onLoad生命周期函数中，获取视频的总时长：

onLoad: function() {
  var that = this;
  wx.createVideoContext('myVideo', that).requestFullScreen();
  wx.createVideoContext('myVideo', that).play();
  wx.createVideoContext('myVideo', that).pause();
  wx.createVideoContext('myVideo', that).seek(0);
  wx.createVideoContext('myVideo', that).play();
  wx.createVideoContext('myVideo', that).on('loadedmetadata', function(res) {
    that.setData({
      duration: res.duration
    });
  });
},

5. 在timeUpdate事件回调函数中，更新当前播放时间和进度条长度以及滑块位置：

timeUpdate: function(e) {
  var that = this;
  var currentTime = e.detail.currentTime;
  var duration = that.data.duration;
  var progress = Math.floor(currentTime / duration * 100);
  var btnLeft = progress * 3.4 - 7;
  that.setData({
    currentTime: currentTime,
    progress: progress,
    btnLeft: btnLeft
  });
},

6. 在进度条的view容器上，绑定touchstart、touchmove和touchend事件，实现滑动改变进度条长度和滑块位置：

touchstart: function(e) {
  var that = this;
  that.setData({
    startX: e.touches[0].pageX,
  });
},
touchmove: function(e) {
  var that = this;
  var startX = that.data.startX;
  var moveX = e.touches[0].pageX;
  var distance = moveX - startX;
  var duration = that.data.duration;
  var progress = that.data.progress + distance / 340 * 100;
  if (progress < 0) {
    progress = 0;
  } else if (progress > 100) {
    progress = 100;
  }
  var currentTime = progress / 100 * duration;
  var btnLeft = progress * 3.4 - 7;
  that.setData({
    progress: progress,
    currentTime: currentTime,
    btnLeft: btnLeft,
    startX: moveX,
  });
},
touchend: function(e) {
  var that = this;
  wx.createVideoContext('myVideo', that).seek(that.data.currentTime);
},

通过以上步骤，就可以实现微信小程序video组件的进度条可拖拽功能。