137 lines
3.0 KiB
Plaintext
137 lines
3.0 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://rtsp.lihaink.cn/live/lihai_lot_walnutpi_dev_2.live.flv?secret=ywdtp2llj80ha19jhmxl4po99nsmaynt"
|
|
:object-fit="object_fit" :autoplay="true"
|
|
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" id="video"></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: '',
|
|
url: ""
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
currentSrc() {
|
|
return this.rtmpSources[this.currentIndex];
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
uni.$emit('push', {
|
|
msg: '页面更新'
|
|
})
|
|
// uni.request({
|
|
// url: 'https://iot.lihaink.cn/push_stream',
|
|
// data: {
|
|
// text: 'uni.request'
|
|
// },
|
|
|
|
// success: (res) => {
|
|
// console.log(res.data);
|
|
// this.text = 'request success';
|
|
// }
|
|
// });
|
|
|
|
this.url = option.url
|
|
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()
|
|
},
|
|
onUnload() {
|
|
|
|
console.log("页面关闭")
|
|
|
|
uni.$emit('close', {
|
|
msg: '页面更新'
|
|
})
|
|
setTimeout(() => {
|
|
// uni.request({
|
|
// url: 'https://iot.lihaink.cn/close_stream', //仅为示例，并非真实接口地址。
|
|
// data: {
|
|
// text: 'uni.request'
|
|
// },
|
|
// success() {
|
|
|
|
// },
|
|
// fail: (res) => {
|
|
// console.log(res.data);
|
|
// }
|
|
|
|
// });
|
|
|
|
}, )
|
|
|
|
},
|
|
mounted() {
|
|
// 初始化时播放第一个源
|
|
|
|
// this.playCurrent();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
playVedio() {
|
|
uni.createVideoContext('video', this).requestFullScreen();
|
|
screen.orientation.lock('landscape');
|
|
},
|
|
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> |