40 lines
1.0 KiB
Vue
40 lines
1.0 KiB
Vue
|
<!--ckplayer 视频播放-->
|
||
|
|
<template>
|
||
|
|
<div style="height: 100%">
|
||
|
|
<video :id="'videoItem' + name" style="width: 100%; height: 100%; object-fit: fill" controls :autoplay="autoPlay" muted />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ["videoUrls", "autoPlay", "poster", "deviceIp", "name"],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
player: "",
|
||
|
|
webRtcServer: null
|
||
|
|
};
|
||
|
|
},
|
||
|
|
// watch: {
|
||
|
|
// name: {
|
||
|
|
// handler(newName, oldName) {
|
||
|
|
// console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
|
||
|
|
// let webRtcServer = null;
|
||
|
|
// webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
|
||
|
|
// webRtcServer.connect(this.videoUrls);
|
||
|
|
// },
|
||
|
|
// immediate: true
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
mounted: function () {
|
||
|
|
console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name);
|
||
|
|
let webRtcServer = this.webRtcServer;
|
||
|
|
webRtcServer = new WebRtcStreamer("videoItem" + this.name, this.deviceIp);
|
||
|
|
webRtcServer.connect(this.videoUrls);
|
||
|
|
},
|
||
|
|
beforeDestroy: function () {
|
||
|
|
this.webRtcServer.disconnect();
|
||
|
|
},
|
||
|
|
methods: {}
|
||
|
|
};
|
||
|
|
</script>
|