vue3-video-play 插件在 Vue 3 项目上的应用
文章目录
- vue3-video-play 插件在 Vue 3 项目上的应用
-
- 一、插件简介
- 二、插件安装
- 三、插件组件应用示例
-
- 1. 局部引入组件
- 2. 全局引入组件
- 四、需要注意的事项
- 五、本地环境将 `package.json` 中 `"module": "./dist/index.es.js"` 改为 `"module": "./dist/index.mjs"` 问题解析探索
-
- 问题描述
- 原因分析
- 解决方案
- 格式及应用实例
-
- vue3-video-play支持的视频格式
- 事件参数详解及示例
vue3-video-play 插件在 Vue 3 项目上的应用
一、插件简介
vue3-video-play 是一个适用于 Vue 3 的视频播放插件，它提供了丰富的视频播放功能，如播放、暂停、快进、音量控制等，能帮助开发者快速集成视频播放功能到 Vue 3 项目中。
二、插件安装
在开始使用 vue3-video-play 之前，需要先将其安装到你的 Vue 3 项目中。打开终端，进入项目根目录，执行以下命令：
npm install vue3-video-play --save
或者使用 yarn 进行安装：
yarn add vue3-video-play
三、插件组件应用示例
1. 局部引入组件
在需要使用视频播放功能的组件中，局部引入 vue3-video-play 组件。以下是一个简单的示例：
2. 全局引入组件
如果你希望在整个项目中都能使用 vue3-video-play 组件，可以在项目的入口文件（通常是 main.js 或 main.ts）中进行全局引入。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import Vue3VideoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';
const app = createApp(App);
app.use(Vue3VideoPlay);
app.mount('#app');
全局引入后，你可以在任何组件中直接使用
四、需要注意的事项
- 样式引入：使用
vue3-video-play时，需要引入其 CSS 文件，否则组件的样式可能无法正常显示。如果是局部引入组件，需要在组件中单独引入样式；如果是全局引入，在入口文件中引入即可。 - 视频格式兼容性：不同浏览器对视频格式的支持可能不同，确保你提供的视频格式能被目标浏览器支持。常见的视频格式有 MP4、WebM 等。
- 跨域问题：如果视频文件位于不同的域名下，可能会遇到跨域问题。需要确保服务器端配置了正确的 CORS 策略，允许跨域访问。
五、本地环境将 package.json 中 "module": "./dist/index.es.js" 改为 "module": "./dist/index.mjs" 问题解析探索
问题描述
在本地开发环境中，将 package.json 文件中的 "module": "./dist/index.es.js" 改为 "module": "./dist/index.mjs" 可能会导致一些问题，如模块无法正确导入等。
原因分析
- 文件扩展名的含义：
.es.js通常是指使用 ES 模块语法编写的 JavaScript 文件，而.mjs是 ES 模块的官方文件扩展名。虽然两者都可以表示 ES 模块，但不同的工具和环境对它们的处理方式可能不同。 - 工具配置问题：一些构建工具（如 Webpack、Vite 等）和 Node.js 版本可能对
.mjs文件的支持存在差异。例如，旧版本的 Node.js 可能需要额外的配置才能正确处理.mjs文件。
解决方案
- 检查 Node.js 版本：确保你使用的是支持
.mjs文件的 Node.js 版本。从 Node.js 13.2.0 开始，官方正式支持.mjs文件。 - 更新构建工具配置：如果使用 Webpack 或 Vite 等构建工具，需要检查并更新其配置，以确保能正确处理
.mjs文件。例如，在 Vite 中，可以通过配置resolve.extensions来支持.mjs文件：
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx']
}
});
- 回退到
.es.js：如果问题仍然存在，可以考虑将package.json中的"module"字段改回原来的.es.js文件路径。
通过以上步骤，你应该能够在 Vue 3 项目中成功使用 vue3-video-play 插件，并解决 package.json 中文件扩展名更改可能带来的问题。
格式及应用实例
vue3-video-play支持的视频格式
- MP4：作为一种常见的多媒体容器格式，广泛应用于网络视频、移动设备视频存储等场景。在vue3-video-play中，它是默认支持的格式之一，无需额外配置即可正常播放。例如在基本示例中，使用
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4"指定视频源为MP4格式视频，可顺利播放。 - WebM：这是一种基于开源技术的多媒体格式，具有良好的跨平台性和对HTML5的原生支持。在vue3-video-play中，同样可以直接播放WebM格式视频，开发者只需将视频源路径设置为WebM文件的地址，即可实现播放功能。
- Ogg：是一种免费、开源的多媒体容器格式。vue3-video-play支持该格式，为开发者提供了更多视频格式选择。在实际应用中，若项目中有Ogg格式的视频资源，可通过配置
src属性来播放。 - HLS（m3u8）：常用于直播和流媒体播放。vue3-video-play对HLS格式有良好的支持，能够实现流畅的播放体验。如在Hls m3u8视频/直播示例中，使用
src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"和type: "m3u8"配置，即可播放HLS格式的视频或直播流。
事件参数详解及示例
- play事件
- 说明：当视频开始播放时触发。
- 回调参数：
event，包含与播放事件相关的信息，如视频的当前播放状态、播放时间等。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@play="onPlay"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onPlay = (ev) => {
console.log("播放", ev);
};
script>
- pause事件
- 说明：当视频暂停时触发。
- 回调参数：
event，提供视频暂停时的相关信息。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@pause="onPause"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onPause = (ev) => {
console.log("暂停", ev);
};
script>
- timeupdate事件
- 说明：当视频的播放时间更新时触发，可用于实时获取视频的播放进度。
- 回调参数：
event，包含当前播放时间等信息。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@timeupdate="onTimeupdate"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onTimeupdate = (ev) => {
console.log("时间更新", ev.target.currentTime);
};
script>
- canplay事件
- 说明：当视频处于暂停状态且可以开始播放时触发，意味着视频已经准备好播放。
- 回调参数：
event，提供视频当前的可播放状态等信息。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@canplay="onCanplay"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onCanplay = (ev) => {
console.log("可以播放", ev);
};
script>
- mirrorChange事件
- 说明：当视频镜像翻转状态发生改变时触发。
- 回调参数：
val，为boolean类型，true表示开启镜像，false表示关闭镜像。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@mirrorChange="onMirrorChange"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onMirrorChange = (val) => {
console.log("镜像翻转状态改变", val);
};
script>
- loopChange事件
- 说明：当视频循环播放开关状态发生改变时触发。
- 回调参数：
val，为boolean类型，true表示开启循环播放，false表示关闭循环播放。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@loopChange="onLoopChange"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onLoopChange = (val) => {
console.log("循环播放状态改变", val);
};
script>
- lightOffChange事件
- 说明：当视频关灯模式状态发生改变时触发。
- 回调参数：
val，为boolean类型，true表示开启关灯模式，false表示关闭关灯模式。 - 示例：
<template>
<div>
<vue3VideoPlay
width="800px"
title="钢铁侠"
:src="options.src"
:poster="options.poster"
@lightOffChange="onLightOffChange"
/>
div>
template>
<script setup lang="ts">
import { reactive } from "vue";
const options = reactive({
src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4",
poster: ""
});
const onLightOffChange = (val) => {
console.log("关灯模式状态改变", val);
};
script>