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
| <template>
| <div class="ez-open">
| <div :id="id"></div>
| </div>
| </template>
|
| <script>
| import EZUIKit from "ezuikit-js";
|
| export default {
| name: "ezVideo",
| player: "",
| props: {
| type: {
| type: String,
| default: 'standard'
| },
| width: {
| type: Number,
| default: 600,
| },
| height: {
| type: Number,
| default: 400
| },
| sn: {
| type: String,
| default: ''
| }
| },
| data() {
| let id = 'video-container-'+Math.random();
| return {
| id: id,
| accessToken: "",
| }
| },
| methods: {
| getAccessToken() {
| this.$apis.video.getAccessToken().then(res=>{
| let rs = JSON.parse(res.data.result);
| if(rs.code == 1) {
| this.accessToken = rs.data;
| }else {
| this.accessToken = "";
| }
| this.init();
| }).catch(error=>{
| this.init();
| console.log(error);
| });
| },
| init() {
| let player = this.$options.player;
| let width = this.width;
| let height = this.height;
| let type = this.type;
| let url = 'ezopen://open.ys7.com/'+this.sn+'/1.hd.live';
| let id = this.id;
| let accessToken = this.accessToken;
| player = new EZUIKit.EZUIKitPlayer({
| autoplay: true,
| id: id,
| accessToken: accessToken,
| url: url,
| template: type, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
| // 视频上方头部控件
| //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
| //plugin: ['talk'], // 加载插件，talk-对讲
| // 视频下方底部控件
| // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
| // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
| // openSoundCallBack: data => console.log("开启声音回调", data),
| // closeSoundCallBack: data => console.log("关闭声音回调", data),
| // startSaveCallBack: data => console.log("开始录像回调", data),
| // stopSaveCallBack: data => console.log("录像回调", data),
| // capturePictureCallBack: data => console.log("截图成功回调", data),
| // fullScreenCallBack: data => console.log("全屏回调", data),
| // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
| width: width,
| height: height
| });
| },
| stop() {
| let player = this.$options.player;
| if(player) {
| this.player.stop()
| }
| },
| },
| mounted() {
| this.getAccessToken();
| },
| beforeDestroy() {
| this.stop();
| }
| }
| </script>
|
| <style scoped>
|
| </style>
|
|
