用Video标签实现简单的视频播放

 

废话不多说直接上代码！！！

<template>
  <!-- Video组件 -->
  <div id="common-video" >
    <div >
      <video
        ref="myVideo"
        :poster="poster"
        src="src"
        :controls="controls"
        oncontextmenu="return false"  //禁止下载
        controlslist="nodownload"
        class="video-box"
        loop="loop"  //自动播放
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommonVideo',
  /**
   *  poster 展示图
   *  src 视频路径
   *  controls 是否显示控件
   */
  props: {
    poster: {
      type: String,
      required: false,
      default: ''
    },
    controls: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data() {
    return {
      videoSrc: require('@/assets/operating/[余罪][第2季]第10集_hd.mp4')
    }
  },
  mounted() {
    this.$refs.myVideo.src = this.videoSrc
    // 监听视频播放
    this.$refs.myVideo.addEventListener('play', () => {})
    // 监听视频暂停
    this.$refs.myVideo.addEventListener('pause', () => {})
  }
}
</script>

<style lang="scss" scoped>
#common-video {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: relative;
  > div {
    width: 100%;
    height: 100%;
  }
  .video-box {
    box-sizing: border-box;
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none !important;
  }
}
</style>

注释：

我这边使用的是本地视频 线上链接的话替换VideoSrc就可以了