vue3-video-play 具体使用方式
npm安装
npm i vue3-video-play --save
SPA 单页面使用示例
<script setup>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
import 'vue3-video-play/dist/style.css'
import {videoPlay} from 'vue3-video-play'
const data = reactive({
options: {
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: "https://yun.66dm.net/SBDM/SummerTimeRendering23.m3u8",
poster: "",
type: "m3u8",
},
});
onBeforeMount(() => {
console.log("2.组件挂载页面之前执行----onBeforeMount");
});
onMounted(() => {
console.log("3.-组件挂载到页面之后执行-------onMounted");
});
const onPlay = (ev) => {
console.log("播放", ev);
};
const onPause = (ev) => {
console.log(ev, "暂停");
};
const onTimeupdate = (ev) => {
console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
console.log(ev, "可以播放");
};
const { options } = { ...toRefs(data) };
</script>
<template>
<div>
<videoPlay v-bind="options" @play="onPlay" @pause="onPause" @timeupdate="onTimeupdate" @canplay="onCanplay" />
</div>
</template>
可选属性
名称 | 说明 | 类型 | 可选值 | 默认值 |
---|
width | 播放器宽度 | string | - | 800px |
height | 播放器高度 | string | - | 450px |
title | 视频名称 | string | - | |
src | 视频资源 | string | | |
color | 播放器主色调 | string | - | #409eff |
webFullScreen | 网页全屏 | boolean | - | false |
speedRate | 倍速配置 | array | - | [“0.75”, “1.0”, “1.25”, “1.5”, “2.0”] |
mirror | 镜像画面 | boolean | - | false |
ligthOff | 关灯模式 | boolean | - | false |
muted | 静音 | boolean | - | false |
autoPlay | 自动播放 | booleanv | - | false,为true时会自动静音 |
loop | 循环播放 | boolean | - | false |
volume | 默认音量 | 0.3 | 0-1 | 0.3 |
poster | 视频封面 | string | - | 视频第一帧 |
可选事件
事件名称 | 说明 | 回调 |
---|
loadstart | 客户端开始请求数据 | event |
progress | 客户端正在请求数据 | event |
error | 请求数据时遇到错误 | event |
stalled | 网速失速 | event |
play | 开始播放时触发 | event |
pause | 暂停时触发 | event |
loadedmetadata | 成功获取资源长度 | event |
loadeddata | | event |
waiting | 等待数据,并非错误 | event |
playing | 开始回放 | event |
canplay | 暂停状态下可以播放 | event |
canplaythrough | 可以持续播放 | event |
timeupdate | 更新播放时间 | event |
ended | 播放结束 | event |
ratechange | 播放速率改变 | event |
durationchange | 资源长度改变 | event |
volumechange | 音量改变 | event |