简单使用video.js
官方文档： Home | Video.js Documentation (videojs.com)
-
- 安装依赖
pnpm i video.js
pnpm i @types/video.js -D
-
- 引入
import videojs from 'video.js'
import type { VideoJsPlayerOptions } from 'video.js'
import 'video.js/dist/video-js.min.css'
-
- 初始化video
// 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)
-
- 简单封装成一个组件
<script setup lang="ts">
import { computed, CSSProperties, onMounted, ref } from 'vue'
import videojs from 'video.js'
import type { VideoJsPlayerOptions } from 'video.js'
import 'video.js/dist/video-js.min.css'
type MyVideoProps = {
/** 视频地址 */
src: string
width?: string
height?: string
}
const props = withDefaults(defineProps<MyVideoProps>(), {})
// video标签
const videoRef = ref<HTMLElement | null>(null)
// video实例对象
let videoPlayer: videojs.Player | null = null
const videoWrapStyles = computed<CSSProperties>(() => {
return {
width: props.width || '100%',
height: props.height || '100%'
}
})
// 初始化videojs
const initVideo = () => {
// https://gitcode.gitcode.host/docs-cn/video.js-docs-cn/docs/guides/options.html
const options: VideoJsPlayerOptions = {
language: 'zh-CN', // 设置语言
controls: true, // 是否显示控制条
preload: 'auto', // 预加载
autoplay: true, // 是否自动播放
fluid: false, // 自适应宽高
src: props.src // 要嵌入的视频源的源 URL
}
if (videoRef.value) {
// 创建 video 实例
videoPlayer = videojs(videoRef.value, options, onPlayerReady)
}
}
// video初始化完成的回调函数
const onPlayerReady = () => {}
onMounted(() => {
initVideo()
})
</script>
<template>
<div :style="videoWrapStyles">
<video id="my-player" ref="videoRef" class="video-js w-full h-full">
<source :src="src" />
</video>
</div>
</template>
<style lang="scss" scoped>
.w-full {
width: 100%;
}
.h-full {
height: 100%;
}
</style>
在App.vue中使用
<script setup lang="ts">
import MyVideo from './components/MyVideo/index.vue'
</script>
<template>
<div>
<div class="video-container">
<MyVideo src="https://media.w3.org/2010/05/sintel/trailer.mp4" />
</div>
</div>
</template>
<style scoped>
.video-container {
width: 800px;
height: 600px;
}
</style>
然后点击就可以播放了。
自定义控件
在实际项目开发中，我们都是使用自定义控件，而不是使用默认的控件。
1. video事件
| 事件名 | 说明 |
|---|---|
| loadstart | 视频查找，当浏览器开始加载资源时触发 |
| durationonchange | 时长变化 |
| loadedmetadata | 元数据加载，当指定资源的元数据已加载时触发，元数据包括时长/尺寸/文本轨道等信息值 |
| loadeddata | 视频下载监听，当当前帧的数据已加载，但没有足够的数据来播放指定资源的下一帧时触发 |
| progress | 浏览器下载监听，当浏览器正在下载指定资源时触发 |
| canplay | 浏览器下载监听，当浏览器正在下载指定资源时触发 |
| canplaythrough | 可流畅播放，当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定资源时触发 |
| play | 播放监听 |
| pause | 暂停监听 |
| seeking | 查找开始，当用户开始移动、跳跃到资源中新的位置时触发 |
| seeked | 查找结束，当用户已经移动、跳跃到视频中新的位置时触发 |
| waiting | 视频加载等待，当视频由于需要缓冲下一帧而停止，等待时触发 |
| playing | 当视频在已经因缓冲而暂停或停止后已就绪时触发 |
| timeUpdate | 目前的播放位置已更改时，播放时间更新 |
| ended | 播放结束 |
| error | 播放错误 |
| volumechange | 音量改变时 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时 |
| ratechange | 当视频的播放速度已更改时 |
| fullscreenchange | 全屏状态改变 |
以上方法可以通过video的实例on方法进行绑定：
videoPlayer.on('play', onPlay)
2. video.js方法
| 方法名 | 说明 |
|---|---|
| play | 播放视频 |
| pause | 暂停播放 |
| paused | 是否已暂停播放，返回boolean值 |
| requestFullscreen | 全屏 |
| exitFullscreen | 退出全屏 |
| requestPictureInPicture | 画中画 |
| exitPictureInPicture | 退出画中画 |
| volume | 设置音量 videoPlayer.volume(0.6) |
| playbackRate | 倍速播放 videoPlayer.playbackRate(1.5) |
| currentTime | 改变当前播放进度 |
