index.vue
3.2 KB
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
<template>
<div ref="jPlayer" class="j-player"></div>
</template>
<script>
export default {
name: 'JPlayer',
props: {
type: {
type: String,
default: 'live', // live playback
},
// 渠道ID
channelId: {
type: String,
required: true,
},
datetimeRange: {
type: Array,
default: null,
},
// url 前缀
prefixUrl: {
type: String,
default: 'static',
},
// TODO: 改变属性名称和ip地址由上层传入。若替换组件，应通知应用层人员
playerAddress: {
type: String,
default: '',
},
},
data() {
return {
// eslint-disable-next-line
_iframeEl: null,
}
},
computed: {
prefixSegment() {
if (this.prefixUrl) {
return `/${this.prefixUrl}`;
} else {
return '';
}
},
playerUrl() {
if (this.channelId) {
if (this.type === 'live') {
// 直播
return `${this.prefixSegment}/jplayer/index.html?ip=${this.playerAddress}&id=${this.channelId}`;
} else if (this.type === 'playback') {
// 回放
if (this.datetimeRange && this.datetimeRange.length > 0) {
const startTs = this.formatDatetime(this.datetimeRange[0]);
const endTs = this.formatDatetime(this.datetimeRange[1] || (new Date().getTime()));
// TODO: 时间戳
return `${this.prefixSegment}/jplayer/playback.html?ip=${this.playerAddress}&id=${this.channelId}-${startTs}-${endTs}-1-0`;
// return `/jplayer/playback.html?ip=${this.playerAddress}&id=${this.channelId}-1693877405-1693923756-1-0`;
}
}
}
return '';
},
},
watch: {
playerUrl(val) {
console.log('playerUrl', val);
console.log('playerUrl-iframe', this._iframeEl);
if (val && this._iframeEl) {
this._iframeEl.src = val;
}
},
},
mounted() {
this.init();
},
methods: {
init() {
// 获取playerURL，若地址存在则动态创建iframe
if (this.playerUrl) {
this.createPlayer(this.playerUrl);
}
},
createPlayer(url) {
const iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', 0);
iframe.setAttribute('name', this.type);
iframe.setAttribute('src', url);
iframe.setAttribute('width', '100%')
iframe.setAttribute('height', '100%')
// if (iframe.attachEvent) {
// iframe.attachEvent('onload', () => this.handleReady(name, { path }))
// } else {
// iframe.onload = () => this.handleReady(name, { path })
// }
// 插入iframe
const commonIframeEl = this.$refs.jPlayer;
if (commonIframeEl) {
commonIframeEl.appendChild(iframe);
this._iframeEl = iframe;
}
},
formatDatetime(timestamp) {
return parseInt(timestamp / 1000);
},
// 暴露外部
screenshot() {
const imgData = this._iframeEl.contentWindow.screenshotBase64();
// console.log('handleScreenshot', imgData);
return imgData;
},
stopPlay() {
return this._iframeEl.contentWindow.stopPlayer();
},
},
}
</script>
<style scoped>
.j-player {
height: 100%;
width: 100%;
}
</style>