<template>
|
<div class="notice">
|
<el-dialog
|
v-model="dialogVisible"
|
:title="title"
|
width="50%"
|
:before-close="handleClose"
|
center
|
:close-on-press-escape="false"
|
:close-on-click-modal="false"
|
>
|
<div style="text-align: center" v-if="showVideo">
|
<video ref="videoPlayer" class="video-js" style="margin: auto auto"></video>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script setup>
|
import { ElMessage } from "element-plus";
|
import videojs from "video.js"
|
import { computed, nextTick, onMounted, onUnmounted,ref,reactive,watch } from "vue";
|
import SparkMD5 from "spark-md5";
|
import pLimit from 'p-limit'
|
const emit = defineEmits(["getFile"]);
|
|
const dialogVisible = ref(false);
|
const title = ref("");
|
const state = reactive({
|
|
})
|
const videoPlayer = ref(null)
|
const myPlayer = ref(null)
|
const resourcePath = ref()
|
const showVideo = ref(false)
|
|
const getVideo = () => {
|
nextTick(() => {
|
console.log("111111",videoPlayer.value)
|
myPlayer.value = videojs(videoPlayer.value, {
|
poster: "",//视频封面
|
controls: true,//视频控件
|
autoplay:true,//自动播放
|
sources: [
|
{
|
src: resourcePath.value ? resourcePath.value : '',
|
// src:'',
|
type: 'application/x-mpegURL',
|
}
|
],
|
controlBar: {
|
remainingTimeDisplay: {
|
displayNegative: false
|
}
|
},
|
playbackRates: [0.5, 1, 1.5, 2]//设置播放速度
|
}, onPlayerReady)
|
});
|
}
|
const onPlayerReady = () => {
|
myPlayer.value.log("play.....")
|
bindVideoEvents()
|
}
|
// 绑定事件
|
const bindVideoEvents = () => {
|
if (!myPlayer.value) return
|
myPlayer.value.on('play', onPlay)
|
myPlayer.value.on('pause', onPause)
|
myPlayer.value.on('ended', onEnded)
|
myPlayer.value.on('timeupdate', onTimeupdate)
|
myPlayer.value.on('loadedmetadata', onLoadedmetadata)
|
myPlayer.value.on('fullscreenchange', onFullscreenchange)
|
myPlayer.value.on('error', err => {
|
console.log('视频加载发生错误', err)
|
})
|
}
|
const openDialog = async (value) => {
|
dialogVisible.value = true;
|
showVideo.value = true;
|
resourcePath.value = value.resourcePath
|
title.value = value.name
|
getVideo();
|
}
|
|
const handleClose = () => {
|
// if(myPlayer.value){
|
// myPlayer.value.dispose();
|
// resourcePath.value = ''
|
// }
|
showVideo.value = false;
|
resourcePath.value = '';
|
dialogVisible.value = false;
|
emit("getList")
|
|
}
|
const onPlay = () => {
|
console.log('播放视频')
|
}
|
const onPause = () => {
|
console.log('暂停播放')
|
}
|
const onEnded = () => {}
|
const onTimeupdate = () => {
|
console.log('播放位置已更改时，播放时间更新')
|
}
|
// 全屏切换
|
const onFullscreenchange = () => {
|
console.log('全屏状态改变')
|
}
|
// 元数据加载完成
|
const onLoadedmetadata = () => {
|
console.log('元数据加载完成')
|
|
}
|
const dispose = () => {
|
resourcePath.value = ''
|
}
|
|
defineExpose({
|
openDialog
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
.notice{
|
:deep(.video-js) {
|
width: 500px;
|
height: 500px;
|
}
|
:deep(.el-form .el-form-item__label) {
|
font-size: 15px;
|
}
|
.file {
|
display: flex;
|
flex-direction: column;
|
align-items: flex-start;
|
}
|
}
|
</style>
|
