<template>
	<view class="container">
		<!--播放按钮-->
		<image v-if="!isPlay" class="play-img" @click="videoPlayed" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"
		 mode=""></image>
		<view class="videoTitle">{{videoName}}</view>
		<video :show-center-play-btn="false" class="video-view" id="myVideo" ref="myVideo" :src="videoUrl" :poster="videoCoverImg"
		 :controls="controls" :show-loading="true" @timeupdate="handleTimeUpdate" @loadedmetadata="loadedmetadata"
		 @fullscreenchange="fullscreenchange" @play="playChange" @pause="pauseChange" @ended="ended">
			<cover-view class="videoControlsContainer flex justify-center">
				<cover-image v-if="!isPlay" class="play-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"
				 @click="videoPlayed" mode="aspectFill"></cover-image>
				<cover-image v-else class="pause-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_start.png"
				 @click="videoPause" mode="aspectFill"></cover-image>
				<view class="slideBox">
					<!--slider自定义播放控件-->
					<slider @changing="sliderDown" style="margin: 0;" :value="value" @change="sliderChange" activeColor="#FFFFFF"
					 backgroundColor="rgba(0, 0, 0, 0.45)" block-color="#4263EB" :block-size="14" />
				</view>
				<!--播放时间-->
				<p class="custdownTime">{{computedTime(nowPlayTime)}}</p>
			</cover-view>
		</video>
	</view>

</template>

<script>
	export default {
		components: {},
		props: [
			"videoUrl", //视频地址
			"videoCoverImg", //视频封面图
			"videoName", //视频名称
			"vWidth", //视频宽
			"vHeight" //视频高
		],
		data() {
			return {
				videoPlay: 0,
				videoContext: null,
				videoDuration: 0, //总播放时长
				isPlay: false, //判断是否播放
				nowPlayTime: 0, //当前播放时间
				value: 0, //当前滑块的值
				controls: false, //是否隐藏默认控制器
				isEnd: false, //播放是否结束
				sliderAble: true,
				isSliderIng: false
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo', this);
		},
		onLoad() {

		},
		methods: {
			/**
			 * 播放
			 */
			videoPlayed() {
				this.videoContext.play()
			},
			/**
			 * 暂停
			 */
			videoPause() {
				this.videoContext.pause()
			},
			/**
			 * 滑块进行拖动进度播放
			 */
			sliderChange(e) {
				this.isSliderIng = false
				const t = e.detail.value / 100
				this.videoContext.seek(t * this.videoDuration);
				this.nowPlayTime = t * this.videoDuration
				console.log(t * this.videoDuration);
			},
			/**
			 * 播放后触发方法，获得播放总时长
			 */
			handleTimeUpdate(e) {
				// 设置滑块位置
				if (!this.isEnd && !this.isSliderIng) {
					this.value = this.nowPlayTime / this.videoDuration * 100
				}
				// 设置当前时间
				this.nowPlayTime = e.detail.currentTime
				// 首次获取到duration时存储它
				if (this.videoDuration === 0 && e.detail.duration > 0) {
					this.videoDuration = e.detail.duration;
				}
			},
			/**
			 * 初始化获得视频总时长
			 */
			loadedmetadata(e) {
				this.nowPlayTime = e.detail.duration
			},
			computedTime(minutesAndSeconds) {
				let totalSeconds = Math.floor(minutesAndSeconds) * 60 + Math.round((minutesAndSeconds % 1) * 60);
				let hours = Math.floor(totalSeconds / 3600);
				let minutes = Math.floor((totalSeconds % 3600) / 60);
				hours = hours.toString().padStart(2, '0');
				minutes = minutes.toString().padStart(2, '0');
				return `${hours}:${minutes}`;
			},
			/**
			 * 监听是否为全屏，默认控制器是否显示
			 */
			fullscreenchange(e) {
				if (e.detail.fullScreen) {
					this.controls = true
				} else {
					this.controls = false
				}
			},
			/**
			 * 监听是否播放
			 */
			playChange() {
				this.isPlay = true
				this.isEnd = false
				this.sliderAble = false
			},
			/**
			 * 监听是否暂停
			 */
			pauseChange() {
				this.isPlay = false
				this.sliderAble = true
			},
			/**
			 * 是否播放完毕
			 */
			ended(e) {
				this.isEnd = true
				this.isPlay = false
				this.value = 0
				this.videoContext.seek(0);
				this.videoContext.pause();
			},
			/**
			 * 滑块滑动期间
			 */
			sliderDown(e) {
				this.isSliderIng = true
				const t = e.detail.value / 100
				this.videoContext.seek(t * this.videoDuration);
				this.nowPlayTime = t * this.videoDuration
			},
		}
	}
</script>


<style>
	.container {
	 
 
		position: absolute;
	}

	.videoTitle {
		width: 100%;
		height: 200rpx;
		position: absolute;
		top: 10rpx;
		left: 20rpx;
		font-size: 25rpx;
		color: white;
		z-index: 1;
	}

	.play-img {
		width: 114rpx;
		height: 114rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -62%);
		z-index: 2;
	}

	.video-view {
		width: 100vw;
		height: 100vh;
	}

	.videoControlsContainer {
		position: fixed;
		left: 50%;
		bottom: 60rpx;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 704rpx;
		height: 88rpx;
		border-radius: 20rpx;
		/* background: rgba(255, 255, 255, 0.5); */
		/* backdrop-filter: blur(20rpx); */
		padding: 0 31rpx;
		box-sizing: border-box;
	}

	.play-icon {
		padding-top: 4rpx;
		width: 57rpx;
		height: 57rpx;
	}

	.pause-icon {
		padding-top: 4rpx;
		width: 57rpx;
		height: 57rpx;
	}

	.custdownTime {
		font-size: 22rpx;
		font-weight: normal;
		color: white;
	}

	.slideBox {
		width: 481rpx;
	}
</style>
