hwnc/components/yfs-video/yfs-video.vue

<template>
	<view class="bbl-content">
		<view class="uni-padding-wrap uni-common-mt">
			<view class="bbl-content_video">
				<!-- #ifdef H5 -->
				<EasyPlayer v-model="videoUrl" :muted="muted" ref="easyPlayer" live :reconnection="true"></EasyPlayer>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<video id="myVideo" :src="videoUrl" :autoplay="autoplay" :muted="muted" :loop="loop"
					:initial-time="initialtime" :duration="duration" :controls="controls"
					:show-center-play-btn="showcenterplaybtn" :danmu-list="danmuList" :enable-danmu="enabledanmu"
					:page-gesture="pagegesture" :direction="90" :show-play-btn="false" :show-fullscreen-btn="true"
					:objectFit="objectFit" :poster="poster" :enable-progress-gesture="false"
					:enable-play-gesture="enableplaygesture" :videoTitle="videoTitle" @play="Clickplay"
					@pause="Clickpause" @error="videoErrorCallback" @ended="Clickended" @timeupdate="Clicktimeupdate"
					@loadedmetadata="loadedmetadata" @fullscreenchange="Clickfullscreenchange" @waiti="Clickwaitin"
					@click="clk" @waiting="waiting">
					<!--顶部栏 竖屏-->

					<view class="video-control" v-if="isMenu && showLeftBack" @tap.stop>
						<view class="video-control-back" @tap.native.stop="backup">
							<cover-image :src="settingFile.root_img+'/static/app/yfs-video/backup.png'"></cover-image>
						</view>
						<view class="video-control-text" v-if="isFullScree" @tap.native.stop="backup">
							{{ ResVideoTitle }}
						</view>
						<view class="video-control-more" v-if="isFullScree">
							<cover-image :src="settingFile.root_img+'/static/app/yfs-video/more.png'"></cover-image>
						</view>
					</view>
					<!--全屏左侧锁定-->
					<view class="video-hz-lock" v-if="isFullScree && isMenu" @tap.native.stop="lock">
						<cover-image :src="srcLock"></cover-image>
					</view>
					<!--全屏右侧截屏-->
					<!-- <view class="video-hz-jp" @tap.native.stop="tapImg">
							<cover-image :src="srcLock"></cover-image>
						</view> -->
					<!--底部栏 竖屏 非全屏-->
					<view class="video-control-bottom" v-if="isMenu && !isFullScree" @tap.native.stop>
						<!--播放暂停区域-->
						<view class="video-control-bottom-playOrPause" @tap.native.stop="playPause">
							<cover-image :src="playOrPauseSrc" mode="aspectFit"></cover-image>
						</view>
						<!--时间区域-->
						<view class="video-control-bottom-time">{{ currtime }}/{{ druation }}</view>
						<!--进度条区域-->
						<view class="video-control-bottom-bar" :style="[{ width: dotBaseWidth + 'rpx' }]">
							<!--灰色进度条区域-->
							<view class="video-control-bottom-bar-gray">
								<!--动态有进度进度条区域-->
								<view class="video-control-bottom-bar-color" :style="[{ width: dotSlide + 'rpx' }]">
								</view>
							</view>
							<view class="video-control-bottom-bar-dot" :style="[{ left: dotSlide + 'rpx' }]"
								@touchmove.stop.prevent="moveDot" @touchstart="touchstartDot" @touchend="touchendDot">
								<view class="video-control-bottom-bar-dot-pad"></view>
							</view>
						</view>
						<!--全屏按钮区域-->
						<view class="video-control-bottom-fullScree" @tap.native.stop="fullscree">
							<cover-image :src="settingFile.root_img+'/static/app/yfs-video/full.png'"></cover-image>
						</view>
					</view>
					<!--底部栏 竖屏 全屏-->
					<view class="video-control-bottom" v-if="isMenu && isFullScree" @tap.stop>
						<!--播放暂停区域-->
						<view class="video-control-bottom-playOrPause" @tap.native.stop="playPause">
							<cover-image :src="playOrPauseSrc" mode="aspectFit"></cover-image>
						</view>
						<!--时间区域-->
						<view class="video-control-bottom-time">{{ currtime }}/{{ druation }}</view>
						<!--进度条区域-->
						<view class="video-control-bottom-bar" :style="[{ width: dotBaseWidth + 'rpx' }]">
							<!--灰色进度条区域-->
							<view class="video-control-bottom-bar-gray">
								<!--动态有进度进度条区域-->
								<view class="video-control-bottom-bar-color" :style="[{ width: dotSlide + 'rpx' }]">
								</view>
							</view>
							<view class="video-control-bottom-bar-dot" :style="[{ left: dotSlide + 'rpx' }]"
								@touchmove.stop.prevent="moveDot" @touchstart="touchstartDot" @touchend="touchendDot">
								<view class="video-control-bottom-bar-dot-pad"></view>
							</view>
						</view>
						<view class="video-fullScree-speed" @tap.native.stop="showSwitchRate">x {{ currentRate }}
						</view>
						<!--全屏按钮区域-->
						<view class="video-control-bottom-fullScree" @tap.native.stop="fullscree">
							<cover-image :src="settingFile.root_img+'/static/app/yfs-video/exitfull.png'"></cover-image>
						</view>
					</view>
					<!--上顶菜单栏-->
					<view class="multi-list rate" :class="{ active: rateShow }" @tap.native.stop>
						<view v-for="(item, index) in ['0.5', '0.8', '1.0', '1.25', '1.5']" :key="index"
							class="multi-item rate" :data-rate="item" @tap="switchRate"
							:class="{ active: item == currentRate }">
							{{ item }}
						</view>
					</view>
				</video>
				<!-- #endif -->
				<view v-if="hasptz==1" class="outer-ring">
					<view class="control-wrapper">
						<view @touchstart="PtzCtrl(1,'ptz1')" id="ptz1" @touchend="onMouseOut('ptz1')"
							:class="ptzid=='ptz1'?'control-btn control-top selectbtn':'control-btn control-top'"></view>
						<view @touchstart="PtzCtrl(7,'ptz7')" id="ptz7" @touchend="onMouseOut('ptz7')"
							:class="ptzid=='ptz7'?'control-btn control-left selectbtn':'control-btn control-left'">
						</view>
						<view @touchstart="PtzCtrl(4,'ptz4')" id="ptz4" @touchend="onMouseOut('ptz4')"
							:class="ptzid=='ptz4'?'control-btn control-bottom selectbtn':'control-btn control-bottom'">
						</view>
						<view @touchstart="PtzCtrl(8,'ptz8')" id="ptz8" @touchend="onMouseOut('ptz8')"
							:class="ptzid=='ptz8'?'control-btn control-right selectbtn':'control-btn control-right'">
						</view>
						<view class="control-round">
							<view :class="ptzid=='ptz9'?'inner-ring1':(ptzid=='ptz10'?'inner-ring2':'inner-ring')">
								<view class="anticon anticon-plus plus" style="border: none;">
									<u-icon @touchstart="PtzCtrl(9,'ptz9')" id="ptz9" @touchend="onMouseOut('ptz9')"
										name="plus" size="20"></u-icon>
								</view>
								<view class="line"></view>
								<view class="anticon anticon-minus minus" style="border: none;">
									<u-icon @touchstart="PtzCtrl(10,'ptz10')" id="ptz10" @touchend="onMouseOut('ptz10')"
										name="minus" size="20"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>
<script>
	import home from '@/api/home/index.js';
	// #ifdef H5
	import EasyPlayer from "@easydarwin/easyplayer"
	// #endif
	export default {
		props: {
			src: {
				//视频路径
				type: String,
				default: ''
			},
			videoTitle: {
				//视频标题
				type: String,
				default: ''
			},
			autoplay: {
				//是否自播放
				type: Boolean,
				default: true
			},
			showcenterplaybtn: {
				//视频中间按钮
				type: Boolean,
				default: false
			},
			loop: {
				//是否循环播放
				type: Boolean,
				default: false
			},
			muted: {
				//是否静音播放
				type: Boolean,
				default: false
			},
			initialtime: {
				//指定视频初始播放位置 单位为秒（s）
				type: Number,
				default: 0
			},
			showLeftBack: {
				type: Boolean,
				default: false
			},
			duration: {
				//指定视频时长
				type: Number,
				default: 0
			},
			danmuList: {
				//弹幕列表
				type: Array,
				default: () => []
			},
			enabledanmu: {
				//是否展示弹幕，只在初始化时有效，不能动态变更
				type: Boolean,
				default: false
			},
			pagegesture: {
				//在非全屏模式下，是否开启亮度与音量调节手势
				type: Boolean,
				default: false
			},
			controls: {
				//在非全屏模式下，是否开启亮度与音量调节手势
				type: Boolean,
				default: true
			},
			objectFit: {
				//当视频大小与 video 容器大小不一致时，视频的表现形式。contain：包含，fill：填充，cover：覆盖
				type: String,
				default: 'contain'
			},
			poster: {
				//视频封面的图片网络资源地址，如果 controls 属性值为 false 则设置 poster 无效
				type: String,
				default: ''
			},
			enableplaygesture: {
				//是否开启播放手势，即双击切换播放/暂停
				type: Boolean,
				default: true
			},
			isMenu: {
				//是否显示控制面板
				type: Boolean,
				default: false
			}
		},
		components: {
			// #ifdef H5
			EasyPlayer
			// #endif
		},
		data() {
			return {
				videoUrl: '',
				input: '',
				startVideotape: false,
				settingFile: getApp().globalData.siteinfo,
				rateShow: false, //是否显示播放速度选项
				fullControlsWidth: 0, //屏幕窗口宽度
				fullControlsHeigt: 0, //屏幕窗口高度
				currentRate: '1.0', //当前播放速度
				videoCtx: '', //视频上下文
				touchStartTime: 0, //双击视频播放还是暂停
				damu: {}, //弹幕
				dotLeftBase: 0, //基础偏移度 初步计算为滑块的半径 现在 为0
				dotSlide: 0, //进度
				dotBaseWidth: 0, //进度条计算后宽度
				currtime: '00:00:00', //当前播放时间 字符串 计算后
				druation: '00:00:00', //总时间 字符串 计算后
				durationInt: 0, //总时间
				currentInt: 0, //当前播放时间
				isPlay: false, //是否播放
				isFullScree: false, //是否全屏
				// ismoregn:false,
				rdo: 0.94, //基础比例 为了设置进度条
				playOrPauseSrc: getApp().globalData.siteinfo.siteroot + '/public/static/app/yfs-video/play.png', //播放或者暂停图片
				srcLock: getApp().globalData.siteinfo.siteroot + '/public/static/app/yfs-video/uplock.png', //锁住横屏
				isLock: false, //是否锁屏
				hasptz: 0,
				did: 0,
				ptzid: '',
			};
		},
		mounted() {

		},
		destroyed() {

		},
		created() {

		},

		onResize: function() {

		},
		methods: {
			PtzCtrl(ptztype, id) {
				let that = this;
				that.ptzid = id;
				let pdata = {
					id: that.did,
					ptztype: ptztype,
					speed: 250
				};
				home.ptzctrl(pdata).then(res => {
					if (res.status != 200) {
						that.$api.msg(res.msg);
					}
				});
			},
			onMouseOut(id) {
				let that = this;
				let pdata = {
					id: that.did,
					ptztype: 0,
					speed: 250
				};
				setTimeout(function() {
					that.ptzid = '';
				}, 100)
				setTimeout(function() {
					home.ptzctrl(pdata).then(res => {
						if (res.status != 200) {
							that.$api.msg(res.msg);
						}
					});
				}, 1000)
			},
			playvideo(_src, _did = 0, _hasptz = 0) {

				this.hasptz = _hasptz;
				this.did = _did;
				this.videoUrl = _src
			},
			player() {
				if (!this.input) {
					this.$api.msg('播放地址错误！');
				} else {
					this.videoUrl = this.input
				}
			},
			//保存快照
			saveSnap() {
				if (!this.videoUrl) {
					this.$api.msg('播放地址错误！');
				} else {
					this.$refs.easyPlayer.saveLocalSnapshot()
				}
			},
			//录像
			videotape() {
				if (!this.videoUrl) {
					this.$api.msg('播放地址错误！');
				} else {
					if (this.$refs.easyPlayer.switchRecording) {
						this.$refs.easyPlayer.switchRecording()
						this.startVideotape = !this.startVideotape
					}
				}
			},
			play() {
				this.$refs.easyPlayer.play()
			},
			pause() {
				this.$refs.easyPlayer.pause()
			},
			switchAudio() {
				this.$refs.easyPlayer.switchAudio()
				this.muted = !this.muted
			},
			fullScreen() {
				this.$refs.easyPlayer.fullscreen()
			},
			loadedmetadata: function() {
				console.log('loadedmetadata')
				this.closeloading();
			},
			waiting: function() {
				console.log('waiting')
				this.closeloading();
			},
			closeloading: function() {
				setTimeout(function() {
					uni.hideLoading();
				}, 1000)
			},
			videoErrorCallback: function(e) {
				console.log(e);
				let that = this;
				that.closeloading();
			},
			sendDanMu: function(obj) {
				//发送弹幕
				let that = this;
				that.videoCtx.sendDanmu(obj);
			},
			Clickplay: function(e) {
				let that = this;
				that.isPlay = true;
				that.playOrPauseSrc = that.settingFile.siteroot + '/public/static/app/yfs-video/pause.png';
			},
			Clickpause: function(e) {
				let that = this;
				that.isPlay = false;
				that.playOrPauseSrc = that.settingFile.siteroot + '/public/static/app/yfs-video/play.png';
			},
			Clickended: function() {
				//当播放到末尾时触发 ended 事件
				console.log('ended');
			},
			Clicktimeupdate: function(event) {
				let that = this;
				//播放进度变化时触发，event.detail = {currentTime, duration} 。触发频率 250ms 一次
				that.$emit('getTimeVideo', event.detail.currentTime);
				that.dotSlide = (event.detail.currentTime / event.detail.duration) * that.dotBaseWidth * that.rdo;
				that.druation = that.formatSeconds(event.detail.duration);
				that.currtime = that.formatSeconds(event.detail.currentTime);
				that.durationInt = event.detail.duration;
				that.currentInt = event.detail.currentTime;
			},
			Clickfullscreenchange: function(e) {
				let that = this;
				if (!that.isFullScree) {
					that.dotBaseWidth = that.fullControlsHeigt * 1.4;
				} else {
					that.dotBaseWidth = that.fullControlsWidth * 1.2;
				}
				that.isFullScree = !that.isFullScree;
			},
			Clickwaitin: function() {
				//视频出现缓冲时触发
				console.log('Clickwaitin');
			},
			showSwitchRate: function(rate) {
				let that = this;
				that.rateShow = true;
			},
			switchRate: function(e) {
				let that = this;
				let rate = Number(e.currentTarget.dataset.rate);
				that.currentRate = rate;
				that.rateShow = false;
				that.videoCtx.playbackRate(rate * 1);
				if (!that.isPlay) {
					that.videoCtx.play();
				}
			},
			clk: function() {
				//video点击事件
				let that = this;
				that.rateShow = false;
				if (!that.isPlay) {
					that.videoCtx.play();
				} else {
					// that.videoCtx.pause();
				}
			},
			formatSeconds(a) {
				var hh = parseInt(a / 3600);
				var mm = parseInt((a - hh * 3600) / 60);
				if (mm < 10) mm = '0' + mm;
				var ss = parseInt((a - hh * 3600) % 60);
				if (ss < 10) ss = '0' + ss;
				if (hh < 10) hh = hh == 0 ? '' : `0${hh}:`;
				var length = hh + mm + ':' + ss;
				if (a >= 0) {
					return length;
				} else {
					return '00:00';
				}
			},
			playPause: function() {
				let that = this;
				if (!that.isPlay) {
					that.videoCtx.play();
				} else {
					// that.videoCtx.pause();
				}
			},
			fullscree: function() {
				let that = this;
				if (that.isLock) {
					return false;
				}
				if (!that.isFullScree) {
					that.videoCtx.requestFullScreen({
						direction: 'horizontal'
					});
					that.dotBaseWidth = that.fullControlsHeigt * 1.4;
				} else {
					that.videoCtx.exitFullScreen();
					that.dotBaseWidth = that.fullControlsWidth * 1.2;
				}
			},
			backup: function() {
				let that = this;
				if (that.isFullScree) {
					that.fullscree();
					return false;
				}
				uni.navigateBack();
			},
			moregn: function() {
				this.ismoregn = !this.ismoregn;
			},
			hideModal: function() {
				this.ismoregn = false;
			},
			moveDot: function(e) {
				//进度条移动点 触摸移动
				// 单指触摸 不是单指触摸不移动
				let that = this;
				if (e.touches.length !== 1) {
					return false;
				}

				that.dotSlide = e.touches[0].clientX;
				if (that.dotSlide < 0) {
					//左边界
					that.dotSlide = 0;
				}
				if (that.dotSlide > that.dotBaseWidth * that.rdo) {
					//右边界
					that.dotSlide = that.dotBaseWidth * that.rdo;
				}
				let time = (that.dotSlide / that.dotBaseWidth) * that.rdo * that.durationInt;
				that.currentInt = time;
				that.currtime = that.formatSeconds(time);
				that.videoCtx.seek(time);
			},
			touchstartDot: function(e) {
				//进度条移动点 触摸开始
				// this.initX = e.changedTouches[0].clientX;
				console.log('startdot');
			},
			touchendDot: function(e) {
				console.log('enddot');
			},
			lock: function() {
				if (this.isLock) {
					this.srcLock = this.settingFile.siteroot + '/public/static/app/yfs-video/uplock.png';
				} else {
					this.srcLock = this.settingFile.siteroot + '/public/static/app/yfs-video/downlock.png';
				}

				this.isLock = !this.isLock;
			}
		}
	};
</script>

<style>
	.selectbtn {
		color: black;
		background: #1298c8;
	}

	.control-wrapper {
		position: relative;
		width: 50vw;
		height: 50vw;
		max-width: 300px;
		max-height: 300px;
		min-width: 240px;
		min-height: 240px;
		margin: 0 auto;
		border-radius: 50%;
		background: transparent;
	}

	.control-btn {
		position: absolute;
		width: 38%;
		height: 38%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #78aee4;
		box-sizing: border-box;
		transition: all .3s linear;
	}

	.control-btn:after {
		content: '';
		position: absolute;
		width: 60%;
		height: 60%;
		background: #fff;
		z-index: 2;
	}

	.control-btn:before {
		content: '';
		position: relative;
		display: block;
		width: 16px;
		height: 16px;
		border-top: 3px solid #78aee4;
		border-right: 3px solid #78aee4;
		border-radius: 0 4px 0 0;
		box-sizing: border-box;
		z-index: 2;
	}

	.control-top {
		top: 0;
		left: 50%;
		transform: translateX(-50%) rotate(-45deg);
		border-radius: 4px 100% 4px 4px;
	}

	.control-top:before {
		transform: translate(30%, -25%);
	}

	.control-top:after {
		left: 0;
		bottom: 0;
		border-top: 1px solid #78aee4;
		border-right: 1px solid #78aee4;
		border-radius: 0 100% 0 0;
	}

	.control-bottom {
		left: 50%;
		bottom: 0;
		transform: translateX(-50%) rotate(45deg);
		border-radius: 4px 4px 100% 4px;
	}

	.control-bottom:before {
		transform: translate(25%, 25%) rotate(90deg);
	}

	.control-bottom:after {
		top: 0;
		left: 0;
		border-bottom: 1px solid #78aee4;
		border-right: 1px solid #78aee4;
		border-radius: 0 0 100% 0;
	}

	.control-left {
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(45deg);
		border-radius: 4px 4px 4px 100%;
	}

	.control-left:before {
		transform: translate(-25%, 30%) rotate(180deg);
	}

	.control-left:after {
		right: 0;
		top: 0;
		border-bottom: 1px solid #78aee4;
		border-left: 1px solid #78aee4;
		border-radius: 0 0 0 100%;
	}

	.control-right {
		top: 50%;
		right: 0;
		transform: translateY(-50%) rotate(45deg);
		border-radius: 4px 100% 4px 4px;
	}

	.control-right:before {
		transform: translate(30%, -25%);
	}

	.control-right:after {
		left: 0;
		bottom: 0;
		border-top: 1px solid #78aee4;
		border-right: 1px solid #78aee4;
		border-radius: 0 100% 0 0;
	}

	.control-round {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 51.2%;
		height: 51.2%;
		background: #fff;
		border-radius: 50%;
	}

	.control-round-inner {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 66%;
		height: 66%;
		border: 1px solid #78aee4;
		border-radius: 50%;
	}

	.control-round-inner:after {
		content: "| |";
		display: block;
		width: 50px;
		line-height: 50px;
		text-align: center;
		font-weight: bolder;
		color: #fff;
		border-radius: 50%;
	}


	.outer-ring .inner-ring .line {
		height: 1px;
		width: 100%;
		background-color: #ddd;
		position: absolute;
		top: 50px;
		left: 0;
	}

	.outer-ring .inner-ring {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #ddd;
	}

	.outer-ring .inner-ring1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #ddd;
		background: linear-gradient(to top,
				white 0%,
				white 50%,
				#1298c8 50.01%,
				#1298c8 100%);
	}

	.outer-ring .inner-ring2 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #fff;
		border: 1px solid #ddd;
		background: linear-gradient(to bottom,
				white 0%,
				white 50%,
				#1298c8 50.01%,
				#1298c8 100%);
	}

	.outer-ring .inner-ring .minus {
		position: absolute;
		bottom: 15px;
		left: 41px;
	}

	.outer-ring .inner-ring .plus {
		position: absolute;
		top: 15px;
		left: 41px;
	}

	.outer-ring .inner-ring1 .minus {
		position: absolute;
		bottom: 15px;
		left: 41px;
	}

	.outer-ring .inner-ring1 .plus {
		position: absolute;
		top: 15px;
		left: 41px;
	}

	.outer-ring .inner-ring2 .minus {
		position: absolute;
		bottom: 15px;
		left: 41px;
	}

	.outer-ring .inner-ring2 .plus {
		position: absolute;
		top: 15px;
		left: 41px;
	}

	video {
		width: 100%;
		height: 419rpx;
	}

	video::-webkit-media-controls {
		display: none !important;
	}

	.bbl-content {
		width: 100%;
	}

	.bbl-content_video {
		width: 100%;
		height: 419rpx;
	}

	.uni-padding-wrap.uni-common-mt {
		width: 100%;
	}

	#myVideo {
		width: 100%;
		height: 419rpx;
	}

	.video {
		width: 100%;
	}

	.video-wrap {
		position: relative;
	}

	.multi-list.full-screen.vertical {
		height: 100vh !important;
		padding: 8vh 0;
	}

	.multi-list.full-screen.horizontal {
		height: 100vw !important;
		padding: 8vw 0;
	}

	.multi {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 998;
		width: 100rpx;
		color: red;
		padding: 10rpx 0;
		text-align: center;
		transition: color ease 0.3s;
	}

	.multi.rate {
		right: 30rpx;
		color: red;
	}

	.multi-list {
		position: absolute;
		height: 100%;
		width: 0;
		background-color: rgba(0, 0, 0, 0.65);
		top: 0;
		right: 0;
		transition: width 0.3s ease;
		z-index: 999;
		box-sizing: border-box;
		padding: 50rpx 0;
	}

	.multi-list.rate {
		padding: 25rpx 0;
	}

	.multi-list.active {
		width: 300rpx;
	}

	.multi-item {
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		transition: color ease 0.3s;
	}

	.multi-item.rate {
		line-height: 70rpx;
	}

	.multi-item:hover,
	.multi:hover {
		color: #00d8ff;
	}

	.multi-item.active {
		color: #00d8ff;
	}

	.cuIcon-more.text-white {
		color: #ffffff;
		font-size: 40upx;
	}

	.video-contrl-top {
		height: 80upx;
		line-height: 80upx;
		min-height: 80upx;
		display: flex;
		padding: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.1);
		background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.1)));
		background: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
	}

	.cu-list-tb {
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		background: #cccccc;
		padding: auto;
		margin: auto;
		text-align: center;
		height: auto;
		line-height: 60upx;
		align-items: center;
	}

	.cu-list {
		align-items: flex-start;
		justify-items: left;
		text-align: left;
		padding: 30upx 0;
	}

	.video-control {
		background-color: rgba(0, 0, 0, 0.2);
		height: 80upx;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		flex-direction: row;
		display: flex;
	}

	.video-control-back {
		position: relative;
		width: 74rpx;
		height: 100%;
		line-height: 80upx;
	}

	.video-control-back cover-image {
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 50%;
		height: 50%;
	}

	.video-control-text {
		color: #ffffff;
		width: 70%;
		height: 100%;
		text-align: left;
		line-height: 80upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.video-control-more {
		position: relative;
		height: 100%;
		width: 80upx;
		margin-left: 10%;
	}

	.video-control-more cover-image {
		position: absolute;
		top: 20rpx;
		left: 10rpx;
		width: 50%;
		height: 50%;
	}

	/* 底部栏样式 */
	.video-control-bottom {
		background-color: rgba(0, 0, 0, 0.2);
		height: 60rpx;
		position: absolute;
		padding-top: 10rpx;
		line-height: 60rpx;
		padding: 5upx;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-items: center;
	}

	.video-control-bottom-playOrPause {
		height: 80%;
		width: 48rpx;
		align-items: center;
		justify-items: center;
		padding-top: 10rpx;
		flex-shrink: none;
	}

	.video-control-bottom-playOrPause cover-image {
		width: 80%;
		height: 80%;
		margin: auto;
	}

	.video-control-bottom-time {
		height: 80%;
		width: 185rpx;
		line-height: 48rpx;
		align-items: center;
		justify-items: center;
		text-align: center;
		margin-right: 10upx;
		flex-shrink: none;
		color: #ffffff;
		font-size: 20rpx;
	}

	.video-control-bottom-bar {
		height: 80%;
		line-height: 48rpx;
		align-items: center;
		justify-items: center;
		flex-shrink: none;
		padding: 0 10rpx;
	}

	.video-control-bottom-bar-gray {
		background-color: #fcf7e9;
		position: relative;
		height: 5rpx;
		width: 94%;
		top: 45%;
		left: 12.5rpx;
		right: 12.5rpx;
		border-radius: 5rpx;
	}

	.video-control-bottom-bar-color {
		height: 100%;
		background-color: #e54d42;
	}

	.video-control-bottom-bar-dot {
		position: relative;
		width: 25rpx;
		height: 25rpx;
		line-height: 15rpx;
		border-radius: 50%;
		top: 15%;
		background-color: rgba(255, 0, 0, 0.3);
		box-shadow: -1px 1px 1px 2px rgba(255, 255, 255, 0.1), -1px 1px 1px 0 rgba(0, 0, 0, 0.1) inset;
	}

	.video-control-bottom-bar-dot-pad {
		width: 15upx;
		height: 15upx;
		border-radius: 50%;
		background: #e54d42;
		/* box-shadow: 0 0 2px 0 rgba(0,0,0,0.2) inset; */
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}

	.video-control-bottom-fullScree {
		height: 25rpx;
		width: 25rpx;
		flex-shrink: none;
		margin-right: 10rpx;
	}

	.video-control-bottom-fullScree cover-image {
		width: 100%;
		height: 100%;
	}

	.video-control-item {
		color: #cccccc;
		padding: 2rpx;
		margin-top: 10rpx;
		width: 100%;
	}

	.video-heizith-menu {
		position: absolute;
		right: 0;
		top: 20%;
		z-index: 998;
		/* background-color: rgba(0,0,0,0.1); */
		height: 100rpx;
		width: 80rpx;
		padding: 10rpx;
		padding-top: 30rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		line-height: 200rpx;
		align-items: center;
		justify-items: center;
		text-align: center;
		flex-direction: row;
	}

	.video-fullScree-speed {
		margin-right: 20rpx;
		color: #ffffff;
		font-size: 25rpx;
		text-align: center;
		align-items: center;
	}

	.video-hz-lock {
		position: absolute;
		left: 50rpx;
		top: 45%;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0.1);
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
		padding: 10rpx;
	}

	.video-hz-lock cover-image {
		height: 100%;
		width: 100%;
	}

	.video-hz-jp {
		position: absolute;
		right: 50rpx;
		top: 45%;
		z-index: 998;
		background-color: rgba(0, 0, 0, 0.1);
		height: 50rpx;
		width: 50rpx;
		border-radius: 50%;
		padding: 10rpx;
	}

	.video-hz-jp cover-image {
		height: 100%;
		width: 100%;
	}
</style>