Vue3+Ts+video.js:实现自定义视频播放

目录

前言

---

前言

        video.js是一款通用的视频播放工具，相较于直接使用video标签，video.js不存在兼容性问题，同时还有这强大的插件库使自定义播放器成为可能，本文主要简单介绍如何使用video.js，以及常用的基本配置。

如何使用

下载依赖

npm install video.js

简单的使用

<script lang="ts" setup>
import mp4Url from '@/assets/video/test.mp4';
import Videojs from 'video.js';
import 'video.js/dist/video-js.min.css';
const videoRef = ref(null);
const videoInstance = shallowRef(); //提高性能
const potions = {
  sources: [
    // 两种播放格式
    {
      type: 'video/mp4',
      src: mp4Url,
    },
    // {
    //   src: 'https://gcalic.v.myalicdn.com/gc/jsh02_1/index.m3u8?contentid=2820180516001',
    //   type: 'application/x-mpegURL',
    // },
  ],
  autoplay: true, //是否自动播放
  loop: false, //是否循环播放
  controls: true, //控制器
  preload: true, //是否预加载
  language: 'zh-CN', //显示的语言 中文
  playbackRates: [0.5, 1, 1.5, 2], //播放速度
  poster: '', //封面图
};
/**
 * 初始化video
 */
const initVideo = () => {
  if (!videoRef.value) return;
  // Videojs第一个参数可以使video标签的id或者目标标签元素，第二个参数为配置项。
  videoInstance.value = Videojs(videoRef.value, potions);
};
onMounted(() => {
  initVideo();
});
</script>
<template>
  <video ref="videoRef" class="video-js" style="width: 600px; height: 400px"></video>
</template>
<style lang="scss" scoped></style>

效果：

拓展

细心的码友应该发现了，控制台显示的英文。我们明明配置了语言，为什么还是显示的英文。

官网解释是这样的：

那么为了更好的满足需求，我们就需要用到官方videojs中提供的API进行相关的修改。

addLanguage	添加语言，它需要两个参数标准语言代码和一个语言定义对象
dispose	​​​​​​​唯一的支持从DOM和内存中删除Video.js播放器的方法
poster	修改封面图
ready	视频资源初始化回调
reset	重置当前视频资源

官方参考地址：
 videojs官网：https://videojs.com/
 videojs指导：Video.js Guides | Video.js
 videojs的API文档：Video.js API docs