VUE3视频播放器 videojs-player/vue

本文主要是介绍VUE3视频播放器 videojs-player/vue，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简介

官网：

https://gitcode.com/surmon-china/videojs-player/overview
https://github.com/surmon-china/videojs-player?tab=readme-ov-file

video-player是一个基于video.js的视频播放器组件，它提供了丰富的功能，包括视频播放、暂停、快进、快退、全屏、音量控制等。video-player 还提供了许多其他属性，可以用来配置视频播放器的行为，具体可以参考 video-player 文档。

@videojs-player/vue 是由vue-video-player （不再更新）更新而来的，最新的组件版本仅支持 Vue3。

最新版本支持大多数 Video.js 配置选项的响应性，并允许完全自定义播放器控制面板和交互细节。

使用

安装

npm install video.js @videojs-player/vue --save

全局注册

import { createApp } from 'vue'
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'const app = createApp(App)app.use(VueVideoPlayer)

vue页面

<template><div><video-player ref="videoPlayerRef" :src="videoSrc" :poster="poster" :options="playerOptions" :autoplay="false" /><br /><br /><el-button plain @click="dialogVisible = true"> 打开视频 </el-button><el-dialog v-model="dialogVisible" :title="title" width="800px" :before-close="handleClose"><video-player ref="videoPlayerRef" :src="videoSrc" :poster="poster" :options="playerOptions" :autoplay="false" /></el-dialog></div>
</template><script lang="ts" setup>
import { ref } from "vue";//视频播放器
const videoPlayerRef = ref();const dialogVisible = ref(false);// 视频标题
const title = ref("");
title.value = "小学生写作业";
//视频封面
const poster = ref("http://115.29.200.134:9005/tiku-resources/video/knowledge/p/3.jpg");
// 视频链接地址
const videoSrc = ref("http://115.29.200.134:9005/tiku-resources/video/knowledge/v/1708853066237.mp4");// 视频播放器配置
let playerOptions = ref({// height: 200,// width: document.documentElement.clientWidth, //播放器宽度playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度muted: false, // 默认情况下将会消除任何音频。loop: false, // 导致视频一结束就重新开始。preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）language: "zh-CN",aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。controls: true,controlBar: {timeDivider: true,durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true // 全屏按钮}
});const handleClose = () => {dialogVisible.value = false;
};
</script>
<style scoped>
:deep(.el-dialog__body) {padding: 0;
}
</style>