vue中使用Video.js，视频组件内容中进度条操作栏显示异常

Question

vue中使用Video.js，视频组件内容显示异常

<template>
  <div class="video-wrapper">
    <video
      :id="videoId"
      ref="videoPlayer"
      controls
      width="100%"
      height="100%"
      class="monitor-video"
      preload="auto"
      autoplay
      loop
      muted="true"
    >
      <!-- autoplay：由于目前在最新版的Chrome浏览器（以及所有以Chromium为内核的浏览器）中，
      已不再允许自动播放音频和视频。就算你为video或audio标签设置了autoplay属性也一样不能自动播放！
      解决方法：设置视频 autoplay 时，视频必须设置为静音 muted: true 即可实现自动播放，-->
      <source :src="url" type="video/mp4">
      <source :src="url" type="application/x-mpeglRL">
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import videozhCN from 'video.js/dist/lang/zh-CN.json'

export default {
  name: 'SurveillanceVideo',
  components: {},
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      videoId: 'id' + new Date().getTime(),
      player: ''
    }
  },
  created() {
  },
  mounted() {
    this.getVideoPlay()
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    getVideoPlay() {
    //   console.log(this.$refs.videoPlayer)
      const options = {
        controls: true,
        // 自动播放属性,muted:静音播放
        autoplay: true,
        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: 'auto',
        language: 'zh-CN',
        errorDisplay: true,
        // fluid: true,
        userActions: {
          hotkeys: true // 是否支持热键
        },
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        // 设置视频播放器的显示宽度（以像素为单位）
        // width: '200',
        // 设置视频播放器的显示高度（以像素为单位）
        // height: '100',
        // playbackRates: [0.5, 1, 1.5, 2, 3], // 倍速播放
        controlBar: {
          playToggle: true
        }
      }
      console.log(options)
      this.player = videojs(this.$refs.videoPlayer, options, function onPlayerReady() {
        console.log('onPlayerReady', this)
      })
      videojs.addLanguage('zh-CN', videozhCN)
      console.log(this.player)
      this.player.play()
    }
  }
}
</script>

<style lang="scss" scoped>
.video-wrapper {
  width: 100%;
  height: 100%;
  .monitor-video {
    width: 100%;
    height: 100%;
  }
}
</style>

Answer 1

引自免费微信小程序：皆我百晓生

首先，我们需要确保video.js库已经正确安装并引入到项目中。然后，我们需要检查video.js配置文件中的语言信息是否与您的需求相符。

首先，确保video.js已正确安装

您可以通过npm或yarn分别安装video.js依赖：

npm install video.js --save
# 或者
yarn add video.js

检查video.js配置文件中的语言信息

打开video.js配置文件（通常位于video.js/dist目录下的config.js），查看其中的语言信息是否与您的需求相符。如果您需要特定语言的支持，比如中文，可以修改lang对象中的语言信息。

const videozhCN = {
  zh: {
    title: "标题",
    subtitle: "副标题",
    timeCaption: "时间",
    currentTime: "当前时间",
    duration: "总时长",
    loaded: "已加载",
    remaining: "剩余时间",
    seekTo: "跳转至",
    pictureInPicture: "全屏模式",
    fullscreenMode: "全屏模式",
    paused: "暂停",
    playing: "正在播放",
    stop: "停止",
    close: "关闭",
    closeError: "关闭错误",
    noInternetConnection: "无网络连接",
    internetConnectionFailed: "网络连接失败",
    connectNetwork: "连接网络",
    networkAvailable: "网络可用",
    networkUnavailable: "网络不可用",
    unknownError: "未知错误",
    loading: "加载中",
    audioError: "音频错误",
    videoError: "视频错误",
    mediaNotFoundError: "媒体文件未找到",
    fileExtensionNotAllowed: "不允许的文件扩展名",
    invalidUrl: "无效URL",
    invalidStream: "无效流",
    streamNotSupported: "流不支持",
    noSource: "没有源",
    noMedia: "没有媒体",
    unknownErrorDescription: "描述"
  }
};

修改video.js配置文件

如果您需要添加新的语言支持，只需将相应的language字段替换为所需语言的JSON对象，并更新video.js配置文件中的lang对象。

将video.js配置文件添加到Vue应用中

将video.js配置文件复制到项目的public目录下，例如public/config.js。

在Vue模板中使用video.js

在video.js配置文件中，您可以根据需要选择要使用的播放器实例。例如，如果您想要使用名为player的变量，可以在video.js配置文件中这样写：

var player = videojs(document.querySelector('#your-player-id'), {...});

确保将document.querySelector替换为您实际的DOM元素ID。

使用video.js播放器

在Vue组件中，您可以通过$refs.videoPlayer获取video.js实例，然后通过play()、pause()等方法控制播放状态。例如：

// 获取video.js实例
const player = $refs.videoPlayer;

// 开始播放
player.play();

// 暂停播放
player.pause();

调整样式和动画

如果你需要调整video.js播放器的外观，可以参考video.js/dist/video.js.css文件中的样例CSS进行更改。例如，调整播放器的尺寸和颜色：

.monitor-video {
  /* 更改宽度和高度 */
  width: 100%;
  height: 100%;
}

/* 更改播放器背景色 */
.monitor-video {
  background-color: #f5f5f5;
}

以上步骤应该可以帮助您解决video.js播放异常的问题。如果有任何疑问，欢迎随时提问。