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 --saveyarn装置： yarn add vue3-video-play --save开始应用全局应用import { createApp } from 'vue'import App from './App.vue'let app = createApp(App)import videoPlay from 'vue3-video-play' // 引入组件import 'vue3-video-play/dist/style.css' // 引入cssapp.use(videoPlay)app.mount('#app')组件内应用// require stylesimport '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>Propsvue3-video-play反对video原生所有属性 video默认属性 应用形式和props属性应用统一 ...