Uniappvideo的使用指南

一、uniappvideo层级

可以在页面的模板中使用<uniappvideo>标签创建视频播放器。该标签有两种形式，一种是通过v-for循环创建，另一种是通过指定id属性来创建独立的视频播放器。视频的源通过指定src属性来设置。

<template>
  <view>
    <uniappvideo
      id="video"
      src="http://example.com/video.mp4">
    </uniappvideo>
  </view>
</template>

二、uniappvideo标签

<uniappvideo>标签可以设置多个属性，包括src、autoplay、muted等。其中，autoplay表示视频是否自动播放，muted表示视频是否静音。此外，还可以使用controls属性来开启播放器的控制条。<uniappvideo>标签可以嵌套在任意的view组件中，并且可以用若干个<template>标签组合。

<template>
  <view>
    <uniappvideo
      id="video"
      src="http://example.com/video.mp4"
      autoplay="true"
      controls="true">
    </uniappvideo>
  </view>
</template>

三、uniappvideo闪退

当视频播放过程中出现错误时，会有不同的错误信息提示用户。如因视频格式不受支持而无法播放时，可以使用<uniappvideo>标签中的poster属性设置一张错误提示图片。

<template>
  <view>
    <uniappvideo
      id="video"
      src="http://example.com/video.mp4"
      poster="http://example.com/error.jpg">
    </uniappvideo>
  </view>
</template>

四、uniappvideo标签回调

使用<uniappvideo>标签时，可以注册一些回调函数来处理视频播放过程中的事件，如在视频播放完成时，可以调用ended回调函数。可以使用v-on指令来绑定回调函数。

<template>
  <view>
    <uniappvideo
      id="video"
      src="http://example.com/video.mp4"
      v-on:ended="onVideoEnd">
    </uniappvideo>
  </view>
</template>

<script>
export default {
  methods: {
    onVideoEnd(event) {
      // 视频播放完成后的回调函数
    }
  }
}
</script>

五、uniappvideo改变src

可以通过设置<uniappvideo>标签中的src属性来改变视频播放地址。例如，当用户选择另一个视频时，可以使用setData方法来更新src属性，实现视频的切换。

<template>
  <view>
    <uniappvideo
      id="video"
      src="{{videoSrc}}">
    </uniappvideo>
    <button bindtap="changeVideo">切换视频</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'http://example.com/video1.mp4'
    }
  },
  methods: {
    changeVideo(event) {
      this.setData({
        videoSrc: 'http://example.com/video2.mp4'
      })
    }
  }
}
</script>

六、uniappvideo拖动进度条显示图片选取

当用户在控制条上拖动进度条时，可以使用<uniappvideo>标签中的seeked回调函数来获取当前播放位置。例如，可以显示当前播放位置的截图，来帮助用户选择视频的播放位置。

<template>
  <view>
    <uniappvideo
      id="video"
      src="{{videoSrc}}"
      controls="true"
      v-on:seeked="onSeek">
    </uniappvideo>
    <image v-if="showThumb" src="{{thumbSrc}}"></image>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showThumb: false,
      thumbSrc: '',
      videoSrc: 'http://example.com/video.mp4'
    }
  },
  methods: {
    onSeek(event) {
      // 获取当前播放位置并显示截图
      let videoEl = this.$refs['video'].$el
      let thumbCanvas = document.createElement('canvas')
      thumbCanvas.width = videoEl.videoWidth
      thumbCanvas.height = videoEl.videoHeight
      let thumbCtx = thumbCanvas.getContext('2d')
      thumbCtx.drawImage(videoEl, 0, 0)
      this.thumbSrc = thumbCanvas.toDataURL()
      this.showThumb = true
    }
  }
}
</script>