zhgdlarge/src/views/sevenLargeScreen/videoManagement/ckplayerComp.vue

<!--ckplayer 视频播放-->
<template>
	<div style="width: 100%;height: 100%">
		<video :id="'videoItem' + name" muted controls autoplay style="width: 100%;height: 100%;object-fit: fill;" />
	</div>
</template>

<script>
import Srs from "@/assets/js/srs.sdk";
export default {
	props: ["videoUrls", "autoPlay", "poster", "deviceIp", "name"],
	data() {
		return {
			player: "",
			rtcPlayer: null
		};
	},
	mounted: function () {
		console.log(this.videoUrls, this.deviceIp, this.autoPlay, this.name, 666);
		this.player = document.getElementById("videoItem" + this.name);
		//方法一：使用srs.sdk.js
		this.rtcPlayer = new Srs.SrsRtcWhipWhepAsync();
		this.rtcPlayer.play(this.videoUrls);
		// video标签
		this.player.srcObject = this.rtcPlayer.stream;
		// 方法二：使用jswebrtc.min.js
		// new JSWebrtc.Player(this.url, { video: player, autoplay: true, });
	},
	beforeDestroy: function () {
		this.rtcPlayer.close();
	},
	watch: {
		// watch第一次绑定值的时候不会执行监听，修改数据才会触发函数
		videoUrls(newVal,oldVal) {
			console.log(newVal)
			this.rtcPlayer = new Srs.SrsRtcWhipWhepAsync();
			this.rtcPlayer.play(newVal);
			this.player.srcObject = this.rtcPlayer.stream;
		}
	},
	methods: {}
};
</script>