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

Question

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

使用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>

运行结果及报错内容

Answer 1

video.js-css 放到组件里