index.vue
1.67 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
<template>
<div class="j-player-wrapper">
<j-player ref="jplay"
:type="playerType"
:prefix-url="params.prefixUrl"
:player-address="params.address"
:channel-id="params.channelId"
:datetime-range="params.datetimeRange"
/>
</div>
</template>
<script>
import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer';
/**
* 此部分负责：
* 1. iframe通信postmessage
* 2. url获取参数window.location
* 3. 对接小程序需求
*/
export default {
name: 'JPlayerExtension',
components: {
JPlayer,
},
data() {
return {
playerType: 'live',
params: {
// channelId: '20000000001310000011',
channelId: '',
address: '52.130.155.147',
prefixUrl: '',
// 回放参数
playerType: 'live',
datetimeRange: [],
},
}
},
created() {
this.init();
},
methods: {
init() {
// 通过URL获取相关参数
const urlParamsMap = getUrlParams(window.location.hash);
console.log('urlParamsMap', urlParamsMap);
Object.keys(this.params).forEach(key => {
if (urlParamsMap[key]) {
this.params[key] = urlParamsMap[key];
}
});
if (!this.params.address || !this.params.channelId) {
console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
}
},
// 暴露方法
screenshot() {
return this.$refs.jplay.screenshot();
},
stopPlay() {
return this.$refs.jplay.stopPlay();
},
},
}
</script>
<style lang="scss" scoped>
.j-player-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>