44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
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>
|