73 lines
1.5 KiB
Vue
73 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<video-play
|
||
|
|
ref="playerRef"
|
||
|
|
v-bind="options"
|
||
|
|
:src="src"
|
||
|
|
@play="onPlay"
|
||
|
|
@pause="onPause"
|
||
|
|
@timeupdate="onTimeupdate"
|
||
|
|
@canplay="onCanplay"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { reactive, shallowRef } from 'vue'
|
||
|
|
import 'vue3-video-play/dist/style.css'
|
||
|
|
import VideoPlay from 'vue3-video-play'
|
||
|
|
const props = defineProps({
|
||
|
|
src: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
width: String,
|
||
|
|
height: String,
|
||
|
|
poster: String
|
||
|
|
})
|
||
|
|
|
||
|
|
const playerRef = shallowRef()
|
||
|
|
const options = reactive({
|
||
|
|
color: 'var(--el-color-primary)', //主题色
|
||
|
|
muted: false, //静音
|
||
|
|
webFullScreen: false,
|
||
|
|
speedRate: ['0.75', '1.0', '1.25', '1.5', '2.0'], //播放倍速
|
||
|
|
autoPlay: true, //自动播放
|
||
|
|
loop: false, //循环播放
|
||
|
|
mirror: false, //镜像画面
|
||
|
|
ligthOff: false, //关灯模式
|
||
|
|
volume: 0.3, //默认音量大小
|
||
|
|
control: false, //是否显示控制器
|
||
|
|
title: '', //视频名称
|
||
|
|
poster: '', //封面
|
||
|
|
...props
|
||
|
|
})
|
||
|
|
|
||
|
|
const play = () => {
|
||
|
|
playerRef.value.play()
|
||
|
|
}
|
||
|
|
|
||
|
|
const pause = () => {
|
||
|
|
playerRef.value.pause()
|
||
|
|
}
|
||
|
|
|
||
|
|
const onPlay = (event: any) => {
|
||
|
|
console.log(event, '播放')
|
||
|
|
}
|
||
|
|
const onPause = (event: any) => {
|
||
|
|
console.log(event, '暂停')
|
||
|
|
}
|
||
|
|
|
||
|
|
const onTimeupdate = (event: any) => {
|
||
|
|
console.log(event, '时间更新')
|
||
|
|
}
|
||
|
|
const onCanplay = (event: any) => {
|
||
|
|
console.log(event, '可以播放')
|
||
|
|
}
|
||
|
|
|
||
|
|
defineExpose({
|
||
|
|
play,
|
||
|
|
pause
|
||
|
|
})
|
||
|
|
</script>
|