使用js开发的一款高颜值UI的视频播放器veoplayer使用js开发的一款高颜值视频播放器，目前市面上关于播放器的种类

veoplayer使用js开发的一款高颜值视频播放器，目前市面上关于播放器的种类繁多，例如字节出品的西瓜播放器和元老级别的video.js播放器，功能强大且丰富，在了解video的使用便有了写一个视频播放器的想法该项目已在gitee和github上开源，欢迎star

文档地址：veoplayer-doc

示例图

Html 使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="referrer" content="no-referrer" />
    <title>videoplayer</title>
    <script src="https://unpkg.com/veoplayer@1.0.1-beta.1/dist/veoplayer.global.min.js"></script>
    </style>
  </head>
  <body>
    <div id="veo"></div>

    <script type="text/javascript">
      let player = new VeoPlayer({
        id: "veo",
        url: "https://wave.video/embed/649c405b5643bb14d8e353f2/649c405b5643bb14d8e353f0.mp4",
        height: 660,
        width: 445,
        style: {
            themeColor: "#91CB40", // 主题色
            processColor: "#91CB40", // 进度条主题 默认是渐变色
            animation: true, //开启控件微动画交互
            processHeight: 8, // 进度条高度
        },
      });
    </script>
  </body>
</html>

vue3 demo

下载安装 pnpm i veoplayer -S

<template>
	<div id="veo"></div>    
</template>

<script setup>
    import {ref} from 'vue'
	import veoplayer from 'vueplayer'
    
   	let player = new VeoPlayer({
        id: "veo",
        url: "https://wave.video/embed/649c405b5643bb14d8e353f2/649c405b5643bb14d8e353f0.mp4",
        height: 660,
        width: 445,
        style: {
            themeColor: "#91CB40", // 主题色
            processColor: "#91CB40", // 进度条主题 默认是渐变色
            animation: true, //开启控件微动画交互
            processHeight: 8, // 进度条高度
    	},
        plugins: ["speed", "download", "setting", "capture"] // 开启其它控件
  });
</script>

属性

尺寸

new VeoPlayer({
	id:"veo",
	url:"xxx.mp4",
    width:665,
    height:440
})

默认 660 x 445

虚化背景

new VeoPlayer({
	id:"veo",
	url:"xxx.mp4",
	bokeh:{
        seconds:2
    }
    //or
    // bokeh:"xxx.png"
})

虚化背景:当值为对象时传入秒数自动截取帧作为虚化背景

默认 2 秒

主题样式

new VeoPlayer({
	id:"veo",
	url:"xxx.mp4",
    style:{
        themeColor: "#91CB40",
        processColor: "#91CB40",
        processHeight:6,
        animation: true
    }
})

默认进度条为渐变色
themeColor 主题颜色，包括操作区交互颜色
processColor 自定义进度条颜色，替换渐变色
processHeight 进度条高度最低为6px
animation 开启控件交互动画默认 false

记忆播放

new VeoPlayer({
	id:"veo",
	url:"xxx.mp4",
    playTime:500
})

设置记忆播放
单位：秒
number

控件

new VeoPlayer({
	id:"veo",
	url:"xxx.mp4",
    plugins:["speed","download","setting","capture"]
})

默认播放/暂停音量全屏控件
可选 ["speed","download","setting","capture"]
speed 开启倍速控件
download 开启下载控件
settng 开启设置控件，["loop","pip"]
capture 开启截图控件

方法

veoPlay

player.veoPlay()

播放

veoPause

player.veoPause()

暂停

veoSpeedChange

player.veoSpeedChange((e)=>{})

监听倍数播放改变

veoProgressBuffer

player.veoProgressBuffer((e)=>{})

监听视频缓冲中

veoTimeUpdate

player.veoTimeUpdate((e)=>{})

监听时长更改触发进度条拖动，点击等

veoError

player.veoError((e)=>{})

监听播放异常/视频加载异常

veoWaiting

player.veoWaiting((e)=>{})

视频加载中

veoDestroy

player.veoDestroy(boolean)

参数：boolean
默认：false【保留根节点]】 true 【不保留根节点】
销毁元素

结语

该视频播放器目前仅支持高版本浏览器，移动端交互可能不够友好