###
Vue 3 中的
视频播放插件
对于希望在
Vue 3 应用程序中集成
视频播放功能的开发者来说，`
vue-video-player` 是一个不错的选择。然而需要注意的是 `
vue-video-player` 的早期版本主要针对
Vue 2 进行优化，在使用于
Vue 3 项目时可能会遇到兼容性问题。
为了更好地支持
Vue 3, 社区推出了专门适配
Vue 3 版本的 `
vue-videoplayer-next`, 它基于 Video.js 构建并提供了良好的 API 和自定义选项[^1]。
安装此插件可以通过 npm 或 yarn 来完成：
```bash
npm install
vue-videoplayer-next --save
```
或者
```bash
yarn add
vue-videoplayer-next
```
接下来可以在组件内部引入该库，并通过注册全局或局部组件的方式将其应用到页面上:
```javascript
import { createApp } from &#
39;
vue&#
39;;
import App from &#
39;./App.
vue&#
39;;
// 导入 videoplayer 组件及其样式文件
import VideoPlayer from &#
39;
vue-videoplayer-next&#
39;;
import &#
39;video.js/dist/video-js.css&#
39;;
const app = createApp(App);
app.component(&#
39;video-player&#
39;, VideoPlayer); // 注册为全局组件
app.mount(&#
39;#app&#
39;);
```
之后便可在模板内像下面这样简单地配置和使用 `<video-player>` 标签来加载媒体资源了：
```html
<template>
<div id="example">
<!-- 使用 video-player 组件 -->
<video-player class="vjs-custom-skin"
:options="playerOptions"></video-player>
</div>
</template>
<script>
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 1.0, 1.5, 2.0], // 可选播放速度
autoplay: false,
muted: false,
loop: false,
preload: &#
39;auto&#
39;,
language: &#
39;en&#
39;,
aspectRatio: &#
39;16:9&#
39;,
fluid: true,
sources: [{
type: "video/mp4",
src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen.mp4", // 替换成自己的 mp4 文件路径
}],
poster: "/path/to/poster.jpg", // 封面图地址
notSupportedMessage: &#
39;This browser does not support the video tag.&#
39;,
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true // 是否显示全屏按钮
}
}
};
},
};
</script>
```
上述代码展示了如何创建一个基本的
视频播放器实例，其中包含了多种实用的功能设置以及对不同浏览器的支持处理。
这篇文章介绍了GitHub上名为vue3-video-play的HLS.js播放器组件，专为Vue3设计，配置灵活且界面美观，中文文档更新频繁。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
