zhouwx
2024-07-18 026b72ee0218e9cf93c2ba2d4f944e7a7d3b56ae
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<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 ? "http://192.168.2.16:9000/trainexam/" + 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>