vue视频播放组件

vue视频播放组件（原生html封装）

PS：视频链接是后台爬虫抓取的

特别注意： 需要在html里面设置属性，加一个meta就ok，不然很多视频会报403错误

<meta name="referrer" content="never">

注意：this.$refs.video.src = this.videoUrl 此行很重要，在父组件传入src后，mounted里面进行赋值（设置meta后没有出现跨域的问题，要么是链接失效，只要链接没问题就能播放）

手机端不能自动播放问题： 由于移动端需要用户产生交互，因此在video标签上设置autoplay属性是不太行的。如果想实现点开后自动播放，需要手动添加播放事件。在mounted里面获取到video组件，直接video.play()就ok了。

<template>
  <!-- 视频查看 -->
  <div class="PlayVideo" v-if="show">
    <!-- 关闭按钮 -->
    <div class="close">
      <img src="~@assets/imgs/rtps-icon/close.png" alt="" @click="close" />
    </div>
    <!-- 视频播放 -->
    <video
      class="video"
      controls=""
      ref="video"
      id="video"
      v-on:error.prevent="error($event)"
    >
    </video>
    <!-- 信息提示 -->
    <div class="msg" v-if="isError">
      <div  style="color: #fff">{{errMsg}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PlayVideo",
  props: ["videoUrl"],
  data() {
    return {
      // videoUrls: ''
      show: true,
      isError: false, // 是否不能播放视频
      errMsg: "",
    };
  },
  computed: {},
  components: {},
  mounted() {
    this.$refs.video.src = this.videoUrl
    let video = document.getElementById("video");
    // 如果是手机端，在挂载时播放
    if(this.isMobile){
      video.play()
    }
  },
  methods: {
    close() {
      this.show = false;
      this.$emit("close");
    },
    error(e) {
      console.log(e);
      if(this.videoUrl == ''){
        this.isError = true
        this.errMsg = "该文章暂无视频！"
      }else{
        this.isError = true
        this.errMsg = "视频链接失效！无法播放！"
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.PlayVideo {
  width: 45.3125vw;
  height: 50.1vh;
  position: relative;
  // z-index: 99999;
  // background: rgba(0, 0, 0, 0.5);
  .close {
    position: absolute;
    top: -32px;
    right: -32px;
    z-index: 9999;
  }
  .video {
    width: 45.3125vw;
    height: 50.1vh;
    background: #000;
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%,-50%);
    // z-index: 100000;
  }
  .msg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }
}
</style>

效果图