data-room/data-room-ui/packages/BasicComponents/Video/index.vue

<template>
  <div
    style="width: 100%; height: 100%"
    class="bs-design-wrap"
  >
    <video-player
      ref="videoPlayer1"
      :options="videoOptions"
      class="vjs-custom-skin videoPlayer"
      :playsinline="true"
    />
  </div>
</template>
<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'videojs-contrib-hls'
import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
export default {
  name: 'Video',
  components: { videoPlayer },
  mixins: [refreshComponentMixin],
  props: {
    // 卡片的属性
    config: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {},
  beforeDestroy () {
    this.$refs.videoPlayer1.dispose()
  },
  data () {
    return {
      // TODO 这里介绍各个参数的意义
      videoOptions: {
        live: true,
        // 浏览器准备好时开始回放
        autoplay: false,
        // true：默认视频播放无声音，需要手动开启声音
        muted: false,
        // 播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 语言
        language: 'zh-CN',
        // 当true时，播放器将按比例缩放以适应其容器
        fluid: true,
        // 无法播放时提示信息
        notSupportedMessage: '该视频无法正常播放',
        // 纵横比或屏幕高宽比
        aspectRatio: '16:9',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: true,
          // 全屏按钮
          fullscreenToggle: true
        },
        // 播放器宽度，测试无效
        // width: 100,
        // 视频封面图
        poster: this.config.customize.posterUrl,
        sources: [
          {
            // 流配置，数组形式，会根据兼容顺序自动切换
            type: this.config.customize.videoType,
            src: this.config.customize.videoUrl
          }
        ]
      },
      dataForm: {
        script: ''
      }
    }
  },

  watch: {},
  mounted () {},
  methods: {
    // 由于静态组件没有混入公共函数，所以需要定义一个changeStyle方法，以免报错
    changeStyle (config) {
      this.videoOptions.sources.type = config.customize.videoType
      this.videoOptions.sources.type = config.customize.videoUrl
      this.videoOptions.poster = config.customize.posterUrl
    }
  }
}
</script>

<style lang="scss" scoped>
.bs-design-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;

  .videoPlayer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
}

/*滚动条样式*/
::v-deep ::-webkit-scrollbar {
  width: 4px;
  border-radius: 4px;
  height: 4px;
}

::v-deep ::-webkit-scrollbar-thumb {
  background: #dddddd !important;
  border-radius: 10px;
}
::v-deep .video-js .vjs-big-play-button {
  z-index: 100;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 4em;
}
</style>