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>