vue-video-player文档（vue使用video.js 黑屏）

之前的vue项目中用到视频播放器，但是UI不是很好看，索性就打算写一个视频播放器插件紧随着vue3的发布，vue3的生态还不是很完整，就索性把这个视频播放器插件修改成了vue3版

插件Github地址 vue-video-player

先看一下这个播放器(vue3-video-play)的界面吧

vue3-video-play视频播放插件基于原生的HTML5的 <video> 标签 开发，所以支持的视频格式和 <video> 一致，并且支持<video>标签的所有原生属性和方法

主页

https://xdlumia.github.io

功能一览

支持快捷键操作支持倍速播放设置支持镜像画面设置支持关灯模式设置支持画中画模式播放支持全屏播放支持网页全屏播放

安装

npm安装：

npm i vue3-video-play --save

yarn安装：

yarn add vue3-video-play --save

开始使用

全局使用

import { createApp } from vue import App from ./App.vue let app = createApp(App) import vue3videoPlay from vue3-video-play // 引入组件 import vue3-video-play/dist/style.css // 引入css app.use(vue3videoPlay) app.mount(#app)

组件内使用

// require styles import vue3-video-play/dist/style.css import { videoPlay } from vue-video-player export default { components: { videoPlay } }

SPA 单页面使用示例

<template> <div> <videoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" /> </div> </template> <script setup lang="ts"> import { reactive } from vue; import { videoPlay } from ../lib/index.js; const options = reactive({ width: 800px, //播放器高度 height: 450px, //播放器高度 color: "#409eff", //主题色 muted: false, //静音 webFullScreen: false, speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速 autoPlay: false, //自动播放 loop: false, //循环播放 mirror: false, //镜像画面 ligthOff: false, //关灯模式 volume: 0.3, //默认音量大小 control: true, //是否显示控制器 title: , //视频名称 src: "http://vjs.zencdn.net/v/oceans.mp4", //视频源 poster: , //封面 }) const onPlay = (ev) => { console.log(播放) } const onPause = (ev) => { console.log(ev, 暂停) } const onTimeupdate = (ev) => { console.log(ev, 时间更新) } const onCanplay = (ev) => { console.log(ev, 可以播放) } </script> <style scoped> </style>

Props

vue3-video-play支持video原生所有属性 video默认属性 使用方式和props属性使用一致

Events

vue3-video-play支持video原生所有事件 video默认事件

视频没有基于任何插件,所以比较小, js和css加起来只有38kb大小,此插件会不断更新,遇到什么问题也可以在github上提issue

插件Github地址 vue-video-player 不妨点个星星

更多示例查看主页

https://xdlumia.github.io

Author

xdlumia