veterans_H5/h5_web/pages/publicCourse/videoDetails/videoDetails.vue

<template>
  <view class="container" v-loading="loading">
    <video
      v-if="videoInfo.url"
      class="container-video"
      id="myVideo"
      @timeupdate="timeUpdate"
      :src="videoInfo.url"
      controls
      :initial-time="videoInfo.initial_time"
      object-fit="fill"
      play-btn-position="center"
      @ended="videoEnded"
      @tap="videoClick"
      @loadedmetadata="loadedmetadata"
    >
      <cover-view class="video-control">
        <cover-view class="multi rate" @tap.stop="showSwitchRate">x {{ videoInfo.currentRate }}</cover-view>
      </cover-view>
      <cover-view class="multi-list rate" :class="{ active: rateShow }">
        <cover-view
          v-for="(item, index) in rateList"
          :key="index"
          class="multi-item rate"
          :data-rate="item"
          @tap="switchRate"
          :class="{ active: item == videoInfo.currentRate }"
        >
          {{ item }}
        </cover-view>
      </cover-view>
    </video>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      videoInfo: {
        url: '',
        initial_time: '',
        currentRate: 1.0
      },
      // 视频创建dom
      videoContext: uni.createVideoContext('myVideo', this),
      // 倍速
      rateList: [0.5, 1.0, 1.5, 2.0],
      rateShow: false
    };
  },
  onLoad(options) {
		const { chapterName, videoUrl } = options
		if (videoUrl) {
			this.videoInfo.url = videoUrl
		}
    this.loading = true;
  },
  methods: {
    videoClick() {},
    timeUpdate() {},
    videoEnded() {},
    loadedmetadata() {
      this.loading = false;
    },
    showSwitchRate() {
      this.rateShow = true;
    },
    switchRate(e) {
      let rate = Number(e.currentTarget.dataset.rate);
      this.videoInfo.currentRate = rate;
      this.rateShow = false;
      this.videoContext.playbackRate(rate);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './videoDetails.scss';
</style>