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
| <template>
| <div class="video-monitor" @click="handleClick">
| <video
| ref="videoPlayer"
| class="video-player"
| autoplay
| muted
| loop
| ></video>
| </div>
| </template>
|
| <script>
| import flvjs from 'flv.js'
|
| export default {
| name: 'VideoMonitor',
| props: {
| videoUrl: {
| type: String,
| required: true
| }
| },
| data() {
| return {
| flvPlayer: null
| }
| },
| watch: {
| videoUrl: {
| handler(newUrl) {
| this.$nextTick(() => {
| this.initFlvPlayer(newUrl)
| })
| },
| immediate: true
| }
| },
| mounted() {
| if (this.videoUrl) {
| this.initFlvPlayer(this.videoUrl)
| }
| },
| methods: {
| handleClick() {
| this.$emit('click')
| },
| initFlvPlayer(url) {
| if (this.flvPlayer) {
| this.flvPlayer.destroy()
| }
|
| if (flvjs.isSupported()) {
| this.flvPlayer = flvjs.createPlayer({
| type: 'flv',
| url: url,
| isLive: true
| })
| this.flvPlayer.attachMediaElement(this.$refs.videoPlayer)
| this.flvPlayer.load()
| this.flvPlayer.play()
| }
| }
| },
| beforeDestroy() {
| if (this.flvPlayer) {
| this.flvPlayer.destroy()
| this.flvPlayer = null
| }
| }
| }
| </script>
|
| <style scoped lang="less">
| .video-monitor {
| width: 207px;
| height: 128px;
| background: linear-gradient(180deg, #58b8fc 0%, rgba(114, 215, 246, 0.29) 100%);
| margin-bottom: 17px;
| cursor: pointer;
| overflow: hidden;
|
| .video-player {
| width: 100%;
| height: 100%;
| object-fit: cover;
| }
| }
| </style>
|
|
