在vue中使用video.js加载视频，页面出现异常

问题遇到的现象和发生背景

使用video.js加载视频，页面混乱，内部的代码跑到页面上了

问题相关代码，请勿粘贴截图

vue组件代码

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-big-play-centered"></video>
  </div>
</template>

<script>
import videojs from "video.js";
export default {
  name: "VideoPlayer",
  data() {
    return {
      player: null,
      videoOptions: {
        // language: "zh-CN.json",
        autoplay: false, //自动播放
        controls: true, //是否显示底部控制栏
        loop: true, //是否循环播放
        muted: true, //设置默认播放音频
        //是否自适应布局,播放器将会有流体体积。换句话说，它将缩放以适应容器。
        // 如果<video>标签有“vjs-fluid”样式时，这个选项会自动设置为true。
        fluid: false,
        sources: [
          {
            src: "http://vjs.zencdn.net/v/oceans.mp4",
            // type: "rtmp/flv",
          },
        ],
      },
    };
  },
  created() {
    //设置中文
    videojs.addLanguage("zh-CN", {
      Play: "播放",
      Pause: "暂停",
      Mute: "静音",
      Unmute: "取消静音",
      techOrder: ["html5", "flash"],
      "Picture-in-Picture": "画中画",
      Fullscreen: "全屏",
      "Non-Fullscreen": "退出全屏",
    });
  },
  mounted() {
    this.player = videojs(
      this.$refs.videoPlayer,
      this.videoOptions
      // , () => {
      //   this.player.log("onPlayerReady", this);
      // }
    );
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  },
};
</script>

<style scoped>
/* div {
  width: 8.75rem;
  height: 6.25rem;
} */
.video-js .vjs-big-play-button {
  font-size: 2.5em;
  line-height: 2.3em;
  height: 2.5em;
  width: 2.5em;
  -webkit-border-radius: 2.5em;
  -moz-border-radius: 2.5em;
  border-radius: 2.5em;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
  border-width: 0.15em;
  margin-top: -1.25em;
  margin-left: -1.75em;
}
/* 中间的播放箭头 */
.vjs-big-play-button .vjs-icon-placeholder {
  font-size: 1.63em;
}
/* 加载圆圈 */
.vjs-loading-spinner {
  font-size: 2.5em;
  width: 2em;
  height: 2em;
  border-radius: 1em;
  margin-top: -1em;
  margin-left: -1.5em;
}
</style>

运行结果及报错内容

video.js-css 放到组件里

video.js-css 放到组件里

vue视频显示

<template>


  <div class="box">
    <div class="title">
      <el-button @click="clkBtnBack" type="warning" style="cursor:pointer">返回视频列表</el-button>
      <span style="color:#3a8ee6; font-size: 25px;margin: 10px;">当前正在播放视频 <b>{{video.video_name}}</b></span>
    </div>
    <div class="box-video">
      <videoPlayer  class="video-player vjs-custom-skin"
                    ref="videoPlayer"
                    :playsinline="true"
                    :options="playerOptions"
      >
      </videoPlayer>
    </div>
  </div>
</template>
<script>
  import request from '@/common/utils/request';
  import 'video.js/dist/video-js.css'
  import { videoPlayer } from 'vue-video-player'
  export default {
    components:{
      videoPlayer
    },
    data(){
      return{
        // showFileUrl: 'http://localhost:8080/pics/',
        showFileUrl: 'http://39.105.13.178:8369/images/',
        video: {},
        playerOptions : {
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 是否静音。
          loop: false, // 是否循环播放。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "video/mp4",//mp4格式视频,若为m3u8格式，type需设置为 application/x-mpegURL
            src: '',//url地址
          }],
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //是否显示全屏按钮
          }
        },
      }
    },
    watch: {
      $route: {
        handler: function (to, from) {
          if (to.path == '/video-show') {
            this.getVideo();
          }

        }, immediate: true
      },
    },
    methods: {
      getVideo() {
        let url = this.settings.apiUrl + "/video_info/get";
        let d1r = {id: this.$route.query.id};
        console.log(d1r)
        request.post(url, d1r).then((res) => {
          if (res.code === 0) {
            const url = this.showFileUrl + res.data.video_path;
            this.playerOptions['sources'][0]['src'] = url;
            this.video = res.data;
          }
        })
      },
      clkBtnBack() {
        this.$router.push({
          path: 'video-list'
        })
      }
    },
  }
</script>
<style>
  .box{
    margin: 1% 15%;
  }
  .title{
    height: 70px;
  }
  box-video {
    margin: 10% 10%;
  }
  .video-js .vjs-big-play-button{
    margin-left:43%;
    margin-top: 25%;
  }

</style>