index.vue
2.51 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
<template>
<div class="extension-page">
<div class="j-player-wrapper">
<j-player ref="jplay"
:type="playerType"
:prefix-url="params.prefixUrl"
:watermark-text="params.watermark"
:player-address="params.address"
:channel-id="params.channelId"
:datetime-range="datetimeRange"
/>
</div>
<!-- 时间线组件 -->
<div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" @ptzControlStop="ptzControlStop"/>
</div>
</div>
</template>
<script>
import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer';
import videoTime from './videoTime';
import moment from "moment";
/**
* 此部分负责：
* 1. iframe通信postmessage
* 2. url获取参数window.location
* 3. 对接小程序需求
*/
export default {
name: 'JPlayerExtension',
components: {
JPlayer,
videoTime,
},
data() {
return {
playerType: 'live',
datetimeRange: [],
params: {
// channelId: '20000000001310000011',
channelId: '',
address: '52.130.155.147',
prefixUrl: '',
watermark: '',
},
}
},
created() {
this.init();
},
methods: {
// 时间线改变
videoTimeChange(val) {
this.playerType = moment(val).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')?'live':'playback';
if(this.playerType == 'playback'){
this.datetimeRange = [new Date(moment(val).format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date().getTime()]
}
},
// 云台控制
ptzControlClick(type) {
console.log(type)
// this.$refs.jplay.ptzController(type);
},
// 云台控制结束
ptzControlStop() {
// this.$refs.jplay.ptzController('stop');
},
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: 100vw;
height: 56vw;
overflow: hidden;
}
</style>