cultivationApp/pages/live/live.nvue

<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>