| | |
| | | <!--视频直播--> |
| | | <template> |
| | | <div class="live-video" ref="JessibucaContainer"> |
| | | <video ref="liveVideoRef" class="video-player" controls autoplay muted playsinline> |
| | | <video ref="liveVideoRef" class="video-player" :controls="props.controls" autoplay muted playsinline> |
| | | Your browser is too old which doesn't support HTML5 video. |
| | | </video> |
| | | </div> |
| | |
| | | type: String, |
| | | default: '', |
| | | }, |
| | | controls:{ |
| | | type:Boolean, |
| | | default: true |
| | | } |
| | | }); |
| | | |
| | | let liveVideoRef = ref(null); |
| | | |
| | | const play = (url) => { |
| | | pause(); |
| | | webrtcPlayer = new window.ZLMRTCClient.Endpoint({ |
| | | element: liveVideoRef.value, // video 标签 |
| | | debug: true, // 是否打印日志 |
| | |
| | | ) |
| | | }; |
| | | |
| | | // 销毁 |
| | | const pause = () => { |
| | | if (webrtcPlayer) { |
| | | webrtcPlayer.close(); |
| | |
| | | (newValue) => { |
| | | if (!newValue) return; |
| | | nextTick(() => { |
| | | pause(); |
| | | play(newValue); |
| | | }); |
| | | }, |
| | |
| | | immediate: true |
| | | } |
| | | ); |
| | | |
| | | onBeforeUnmount(() => { |
| | | pause() |
| | | }) |
| | | |
| | | onMounted(() => { |
| | | if (props.videoUrl) { |
| | |
| | | object-fit: cover; |
| | | } |
| | | } |
| | | </style> |
| | | </style> |