42 lines
1.1 KiB
Vue
42 lines
1.1 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 () {
|
|||
|
|
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) {
|
|||
|
|
this.rtcPlayer = new Srs.SrsRtcWhipWhepAsync();
|
|||
|
|
this.rtcPlayer.play(newVal);
|
|||
|
|
this.player.srcObject = this.rtcPlayer.stream;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {}
|
|||
|
|
};
|
|||
|
|
</script>
|