MoeNovaClient/components/VideoPlayer/VideoPlayer.vue

<template>
  <view class="video-container">
    <!-- 使用uniapp的video组件 -->
    <video
      :src="src"
      :controls="controls"
      :autoplay="autoplay"
      :loop="loop"
      :muted="muted"
      :initial-time="initialTime"
      :duration="duration"
      :direction="direction"
      :show-fullscreen-btn="showFullscreenBtn"
      :show-play-btn="showPlayBtn"
      :show-center-play-btn="showCenterPlayBtn"
      :enable-progress-gesture="enableProgressGesture"
      :object-fit="objectFit"
      :poster="poster"
      :show-mute-btn="showMuteBtn"
      :title="title"
      :play-btn-position="playBtnPosition"
      :enable-play-gesture="enablePlayGesture"
      :auto-pause-if-navigate="autoPauseIfNavigate"
      :auto-pause-if-open-native="autoPauseIfOpenNative"
      :vslide-gesture="vslideGesture"
      :vslide-gesture-in-fullscreen="vslideGestureInFullscreen"
      :style="videoStyle"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      @timeupdate="onTimeUpdate"
      @fullscreenchange="onFullscreenChange"
      @waiting="onWaiting"
      @error="onError"
      @progress="onProgress"
    ></video>
  </view>
</template>

<script>
export default {
  name: 'VideoPlayer',
  props: {
    // 视频源地址
    src: {
      type: String,
      required: true
    },
    // 是否显示默认播放控件
    controls: {
      type: Boolean,
      default: true
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: false
    },
    // 是否循环播放
    loop: {
      type: Boolean,
      default: false
    },
    // 是否静音播放
    muted: {
      type: Boolean,
      default: false
    },
    // 指定视频初始播放位置
    initialTime: {
      type: Number,
      default: 0
    },
    // 指定视频时长
    duration: {
      type: Number,
      default: 0
    },
    // 设置全屏时视频的方向
    direction: {
      type: Number,
      default: 0
    },
    // 是否显示全屏按钮
    showFullscreenBtn: {
      type: Boolean,
      default: true
    },
    // 是否显示播放按钮
    showPlayBtn: {
      type: Boolean,
      default: true
    },
    // 是否显示视频中间的播放按钮
    showCenterPlayBtn: {
      type: Boolean,
      default: true
    },
    // 是否开启控制进度的手势
    enableProgressGesture: {
      type: Boolean,
      default: true
    },
    // 当视频大小与 video 容器大小不一致时，视频的表现形式
    objectFit: {
      type: String,
      default: 'contain'
    },
    // 视频封面的图片网络资源地址
    poster: {
      type: String,
      default: ''
    },
    // 是否显示静音按钮
    showMuteBtn: {
      type: Boolean,
      default: false
    },
    // 视频的标题
    title: {
      type: String,
      default: ''
    },
    // 播放按钮的位置
    playBtnPosition: {
      type: String,
      default: 'bottom'
    },
    // 是否开启播放手势
    enablePlayGesture: {
      type: Boolean,
      default: false
    },
    // 当跳转到其它小程序页面时，是否自动暂停本页面的视频
    autoPauseIfNavigate: {
      type: Boolean,
      default: true
    },
    // 当跳转到其它微信原生页面时，是否自动暂停本页面的视频
    autoPauseIfOpenNative: {
      type: Boolean,
      default: true
    },
    // 在非全屏模式下，是否开启亮度与音量调节手势
    vslideGesture: {
      type: Boolean,
      default: false
    },
    // 在全屏模式下，是否开启亮度与音量调节手势
    vslideGestureInFullscreen: {
      type: Boolean,
      default: true
    },
    // 视频容器的样式
    videoStyle: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    // 播放事件
    onPlay(e) {
      this.$emit('play', e)
    },
    // 暂停事件
    onPause(e) {
      this.$emit('pause', e)
    },
    // 播放结束事件
    onEnded(e) {
      this.$emit('ended', e)
    },
    // 播放进度变化事件
    onTimeUpdate(e) {
      this.$emit('timeupdate', e)
    },
    // 全屏变化事件
    onFullscreenChange(e) {
      this.$emit('fullscreenchange', e)
    },
    // 视频缓冲事件
    onWaiting(e) {
      this.$emit('waiting', e)
    },
    // 视频错误事件
    onError(e) {
      this.$emit('error', e)
    },
    // 加载进度事件
    onProgress(e) {
      this.$emit('progress', e)
    }
  }
}
</script>

<style lang="scss" scoped>
.video-container {
  width: 100%;
  height: 100%;
  
  video {
    width: 100%;
    height: 100%;
  }
}
</style>