VUE3视频播放器 videojs-player/vue

news2024/9/21 16:39:07

简介

官网：

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>