<style>
	.nvideo_Page {
		width: 100%;
		height: 98%;
	}
</style>
<template>
	<view class="nvideo_Page">
		<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" :autoplay="false">
				<view class="videoControlsContainer flex justify-center">
					<image v-if="!isPlay" class="play-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"
					 @click="videoPlayed" mode="aspectFill"></image>
					<image v-else class="pause-icon" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_start.png"
					 @click="videoPause" mode="aspectFill"></image>
					<view class="slideBox">
						<!--slider自定义播放控件-->
						<slider @changing="sliderDown" style="margin: 0;" :value="value" @change="sliderChange" activeColor="#FFFFFF"
						 backgroundColor="rgba(245, 245, 245, 0.45)" block-color="#F5F5F5" :block-size="14" />
					</view>
					<!--播放时间-->
					<p class="custdownTime">{{computedTime(nowPlayTime)}}</p>
				</view>
			</video>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				videoName: "", //视频名称
				videoUrl: "", //视频地址
				videoCoverImg: "", //封面图
				vid: "", //视频Id
				vWidth: "", //视频宽
				vHeight: "", //视频高
				videoPlay: 0,
				videoContext: null,
				videoDuration: 0, //总播放时长
				isPlay: false, //判断是否播放
				nowPlayTime: 0, //当前播放时间
				value: 0, //当前滑块的值
				controls: false, //是否隐藏默认控制器
				isEnd: false, //播放是否结束
				sliderAble: true,
				isSliderIng: false
			}
		},
		components: {

		},
		onReady() {

		},
		onLoad(option) {
			if (option && option.vId) {
				this.vid = option.vId;
				this.getVideoInfo();
			}
		},
		methods: {
			getVideoInfo() {
				this.videoUrl = "";
				this.videoCoverImg = "";
				this.videoName = "";
				this.vWidth = "";
				this.vHeight = "";
				var postMsg = {
					vid: this.vid
				};
				this.apipost(
					"Video_get_GetLXYVideoInfo",
					postMsg,
					res => {
						if (res.resultCode == 1) {
							var tempData = res.data;
							this.videoUrl = tempData.VideoAddress;
							this.videoCoverImg = tempData.Cover;
							this.videoName = tempData.Name;
							if (tempData && tempData.VideoWH && tempData.VideoWH != '') {
								var tempArray = tempData.VideoWH.split(',')
								if (tempArray && tempArray.length == 2) {
									this.vWidth = tempArray[0];
									this.vHeight = tempArray[1];
								}
							}
						}
						uni.hideLoading();
					},
					err => {
						this.loading = false
					}
				);
			},
			//回到首页
			goHome() {
				uni.redirectTo({
					url: "/pages/index/index"
				});
			},
			/**
			 * 播放
			 */
			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
			}

		},
		mounted() {
			this.videoContext = uni.createVideoContext('myVideo', this);
			this.videoContext.stop();
		},
		created() {
			uni.setNavigationBarTitle({
				title: "视频分享"
			})
		},
	}
</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>
