TraceabilityAPP/pages/live/live.nvue

99 lines
2.1 KiB
Plaintext

<template>
<view class="container">
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
<view class="root">
<video ref="videoPlayer"
src="http://192.168.1.27/live/test.live.flv?secret=gqig2yFKkDpIMic1uWZY1L5MsIo0eflm" controls
:object-fit="object_fit" autoplay="true"
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'"></video>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
rtmpSources: [],
currentIndex: 0,
room: {},
wHeight: 0, //获取的屏幕高度🌟💗
boxStyle: { //视频,图片封面样式🌟💗
'height': 0,
'width': 0,
},
object_fit: 'contain', //视频样式默认包含🌟
windowWidth: '',
}
},
computed: {
currentSrc() {
return this.rtmpSources[this.currentIndex];
}
},
onLoad() {
this.platform = uni.getSystemInfoSync().platform
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
this.boxStyle.height = this.wHeight; //改变视频高度
this.get()
},
mounted() {
// 初始化时播放第一个源
// this.playCurrent();
},
methods: {
playCurrent() {
console.log(this.$refs.videoPlayer)
if (this.$refs.videoPlayer) {
this.$refs.videoPlayer.load();
this.$refs.videoPlayer.play();
}
},
playNext() {
this.currentIndex++;
if (this.currentIndex >= this.rtmpSources.length) {
this.currentIndex = 0; // 回到第一个源
}
this.playCurrent();
},
get() {
let that = this
this.rtmpSources = ["https://lihai001.oss-cn-chengdu.aliyuncs.com/media/af4b9202306121644508620.mp4"]
// playbackDetail({
// app_name: 'shop',
// live_stream_id: this.room.live_stream_id
// }).then((res) => {
// console.log(res.data, '1111')
// this.rtmpSources = res.data.playback_url;
// })
},
},
}
</script>
<style lang="scss" scoped>
</style>