lc_smart_admin/web/src/view/monitoring/multiScreen/videoplay4.vue

<template>
  <div style="position:relative;">
    <video id="video-webrtc4"  controls autoplay style="width:100%"></video>
  </div>
</template>
<script setup>

import { ref,toRef,watch,defineProps } from 'vue'
const props = defineProps({
  url: String
});

const refToWatch = toRef(props,'url')
watch(refToWatch,(newVal,oldValue)=>{
  if (newVal !== oldValue && newVal !== ""){
    getScript()
  }
})

var player = ''
const getScript = ()=>{
  var video = '';
  video = document.getElementById('video-webrtc4');
  player = new JSWebrtc.Player(props.url, { video: video, autoplay: true, onPlay: (obj) => {  } });
}

const endde =()=>{
  player.destroy()
}

defineExpose({
  endde
})
</script>
<style scoped>
.video-js .vjs-progress-control.vjs-control {
  display: none;
}
.btn-zhuapai{
  position:absolute;
  top:15px;
  right:10px;
  background: rgba(255,255,255,0.5);
  width:44px;
  height:27px;
  text-align:center;
  line-height: 27px;
  font-size:14px;
  cursor:pointer;
}
</style>