104 lines
2.7 KiB
Plaintext
104 lines
2.7 KiB
Plaintext
<template>
|
||
<view class="container">
|
||
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
|
||
<!--
|
||
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
|
||
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
|
||
3.由于方法比较多，可以采取下面的方式查看代码：
|
||
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
|
||
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
|
||
-->
|
||
<view class="root">
|
||
<video ref="videoPlayer" :src="currentSrc" controls @ended="playNext" :object-fit="object_fit" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'"></video>
|
||
</view>
|
||
<sd-float-page :room='room' :msgList='msgList'
|
||
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
|
||
</view>
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import sdFloatPage from '@/components/sd-live-page/histroy.nvue';
|
||
|
||
import {
|
||
playbackDetail
|
||
} from '@/api/api.js'
|
||
export default {
|
||
components: {
|
||
sdFloatPage
|
||
},
|
||
data() {
|
||
return {
|
||
rtmpSources: [],
|
||
currentIndex: 0,
|
||
room: {},
|
||
wHeight: 0, //获取的屏幕高度🌟💗
|
||
boxStyle: { //视频，图片封面样式🌟💗
|
||
'height': 0,
|
||
'width': 0,
|
||
},
|
||
object_fit: 'cover', //视频样式默认包含🌟💗
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
currentSrc() {
|
||
return this.rtmpSources[this.currentIndex];
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
this.room = JSON.parse(decodeURIComponent(options.data));
|
||
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() {
|
||
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
|
||
console.log(this.room)
|
||
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> |