97 lines
2.0 KiB
Plaintext
97 lines
2.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="currentSrc" 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> |