102 lines
2.1 KiB
Plaintext
102 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="https://lihai001.oss-cn-chengdu.aliyuncs.com/media/af4b9202306121644508620.mp4" controls @ended="playNext" :object-fit="object_fit"
|
|
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'"></video>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
rtmpSources: ["https://lihai001.oss-cn-chengdu.aliyuncs.com/media/af4b9202306121644508620.mp4"],
|
|
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; //改变视频高度
|
|
|
|
},
|
|
mounted() {
|
|
|
|
// 初始化时播放第一个源
|
|
this.$nextTick(() => {
|
|
this.playCurrent();
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
playCurrent() {
|
|
|
|
if (this.$refs.videoPlayer) {
|
|
this.$refs.videoPlayer.load();
|
|
this.$refs.videoPlayer.play();
|
|
|
|
}
|
|
|
|
},
|
|
playNext() {
|
|
if (this.rtmpSources.length > 0) {
|
|
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> |