vue videojs视频播放插件 动态资源

概览：使用vediojs第三方视频播放插件，视频加载有两种方式，第一种是html方式，类似于img标签的src，写在video标签内的；第二种方式是js方式，实例化一个videojs对象并且赋值src。

一、定义

videojs官网

videojs中文文档

videojs英文文档

gitlab源码

videojs的option的所有的配置参数

二、操作步骤

1.1 安装

pnpm i video.js

pnpm i @types/video.js -D

或者

yarn add ...

或者

npm install --save-dev video.js

1.2 引入挂载

1.全局引入main.js

import VideoPlayer from '@videojs-player/vue'

import 'video.js/dist/video-js.css'

const app = createApp(App)

app.use(VideoPlayer)

2.局部引入

import videojs from 'video.js'

import type { VideoJsPlayerOptions } from 'video.js'  //ts写法需要

import 'video.js/dist/video-js.min.css'

1.3 核心代码

// options简单的一些参数

const options: VideoJsPlayerOptions = {

language: 'zh-CN', // 设置语言

controls: true, // 是否显示控制条

preload: 'auto', // 预加载

autoplay: true, // 是否自动播放

fluid: true, // 自适应宽高

src: props.src // 要嵌入的视频源的源 URL

}

// 1. id video元素或video的id

// 2. options 参数配置

// 3. onReady 回调函数，可选

const videoPlayer = videojs(id, options, onReady)

1.4 整体代码

1.封装成一个带ts的页面组件

2.不封装，直接使用，分为