【vue video.js】 video.js视频组件的封装，可复制使用

封装一个视频组件，实现效果如下

 

导入video.js

html

<video
      :id="videoId"
      muted
      style="width: 100%; height: 100%"
      class="video-js warn-video vjs-default-skin vjs-big-play-centered"
      controls
      preload="auto"
      crossOrigin="anonymous"
      :poster="vData.pictureUrl"
      :key="resetDiv"
    ></video>

js

import videojs from "video.js";
import 'video.js/dist/video-js.css'; // video.js样式

import videojs from "video.js";
import 'video.js/dist/video-js.css'; // video.js样式
import { baseUrl } from '@/settings'
import imgUrl from "../../../assets/videoDemo.png"
export default {
  data() {
    return {
      baseUrl:baseUrl,
      resetDiv:0,
      // pictureUrlNow:'',
    }},
  props: {
    //视频地址、video的id值
    vData: {
      type: Object,
      default: () => {
        return {
          hlsurl:"", //视频url地址
          cameraId: "rid3", //id
          pictureUrl:imgUrl
        };
      },
    },
    //视频宽度
    videoWidth: {
      type: String,
      default: "100%",
    },
    //视频高度
    videoHeight: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {
      options: {
        autoplay: true, // 设置自动播放
        muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
        preload: "auto", // 预加载
        controls: true, // 显示播放的控件
      },
      player: null,
      videoId: "",
    };
  },
  mounted(){
    console.log("直播的视频组件的props",this.vData)
    // console.log('获取的视频默认地址',this.vData.pictureUrl)
    this.$nextTick(()=>{
      let fullButton=document.getElementsByClassName('vjs-icon-placeholder')[10];
      fullButton.style.display='none'
      // fullButton.addEventListener("click", this.handleClick());
      // console.log('获取到全屏按钮了吗',fullButton)
    })
    
  },
  methods: {
    fullscreen(){
      this.player.requestFullscreen();
      // this.msgToIndex=true
      // this.sendMsg()
      this.$emit('clickNow')
    },
    handleClick() {
      // this.player.fullScreen();
      console.log('点击高清全屏按钮')
      this.$emit('clickNow')
      // this.Visiable = true
      // this.$nextTick(() => {
      //   //这里的dialog与上面dialog-component组件里面的ref属性值是一致的
      //   //init调用的是dialog-component组件里面的init方法
      //   //data是传递给弹窗页面的值
      //   this.$refs.dialog.init(data)
      // })
    },
    getVideo(nowPlayVideoUrl, nowPlayVideoId) {
      this.player = videojs(nowPlayVideoId, this.options);
      // 关键代码， 动态设置src，才可实现换台操作
      //不动态设置依然也可以这样写
      this.player.src([
        {
          src: nowPlayVideoUrl,
          type: "application/x-mpegURL", // 告诉videojs,这是一个hls流
        },
      ]);
    },
  },
  watch: {
    //监听视频地址、video的id值
    vData: {
      deep: true,
      immediate: true,
      handler(val) {
        // 每次获取最新传值的获取当前视频元素
    //     this.$nextTick(()=>{
    //     let fullButton=document.getElementsByClassName('vjs-icon-placeholder')[10];
    //     fullButton.style.display='none'
    //   // fullButton.addEventListener("click", this.handleClick());
    //   // console.log('获取到全屏按钮了吗',fullButton)
    // })
        //
        console.log('更新video组件的值',val)
        this.videoId = `val${val.cameraId}`;
        this.resetDiv++
        this.$nextTick(() => {
          this.getVideo(val.hlsurl, `val${val.cameraId}`);
        });
      },
    },
  },
  beforeDestroy() {
    //  组件销毁时，清除播放器
    if (this.player) {
      this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .vjs-fullscreen-control{
  display: none !important;
}
</style>

官网：快速使用 - video.js 中文文档 (gitcode.host)