Retired/components/zx-video/zx-video.vue

<template>
	<view class="content">
		<video id="playVideo" class="top-video" :src="url" :picture-in-picture-mode="wxsetPicture"
			:show-screen-lock-button="lockButton" :show-casting-button="showCasting" autoplay="true"
			@fullscreenchange="fullscreenchange" @controlstoggle="controlstoggle">

			<cover-view class="video-heizith-menu" @tap.stop="showSpeedOptions"
				v-show="isShowControl">{{playbackRateItem == '1.0'?'倍数':playbackRateItem+'x'}}</cover-view>
			<cover-view v-if="showSpeedModal" class="modal" @tap.stop="hideSpeedOptions">
				<cover-view class="modal-content" @click.stop>
					<cover-view class="modal-content-txt">
						倍数
					</cover-view>
					<cover-view class="speed-option" v-for="(items,indexs) in playbackRateList" :key="indexs"
						@tap.stop="changeSpeed" :data-rate="items" :class="{ active: items == playbackRateItem }">
						{{ items }}X
					</cover-view>
				</cover-view>
			</cover-view>

		</video>
	</view>
</template>

<script>
	export default {
		props: {
			showCasting: { // 是否显示投屏按钮
				type: Boolean,
				default: false
			},
			lockButton: { // 是否显示锁屏按钮
				type: Boolean,
				default: false
			},
			isSpeed: { // 是否打开倍速功能
				type: Boolean,
				default: false
			},
			url: { // 视频路径
				type: String,
				default: ''
			},
		},
		data() {
			return {
				wxsetPicture: [
					'push',
					'pop'
				],
				// 是否显示视频控件
				isShowControl: false,
				// 倍速播放
				playbackRateItem: '1.0',
				// 倍速设置选项列表
				playbackRateList: ['0.5', '0.8', '1.0', '1.25', '1.5', '2.0'],
				showSpeedModal: false,
				videoCtx: null,
				fullScreen: false
			}
		},
		methods: {
			// 唤起倍速操作
			showSpeedOptions() {
				this.showSpeedModal = true;
			},
			// 隐藏倍速操作
			hideSpeedOptions() {
				this.showSpeedModal = false;
			},

			// 倍速切换
			changeSpeed(e) {
				this.playbackRateItem = e.currentTarget.dataset.rate;
				let rate = Number(this.playbackRateItem);
				this.videoCtx = uni.createVideoContext('playVideo', this);
				this.videoCtx.playbackRate(rate);
				this.hideSpeedOptions();
			},

			// 是否显示控件
			controlstoggle(e) {
				if (!e.detail.show) {
					this.isShowControl = false;
					return;
				}
				this.isShowControl = true;
			},

			// 全屏操作
			fullscreenchange(e) {
				let that = this;
				that.fullScreen = e.detail.fullScreen;
				if (that.fullScreen) {
					wx.setPageOrientation({
						orientation: 'landscape'
					});
				} else {
					wx.setPageOrientation({
						orientation: 'portrait'
					});
				}
				uni.showToast({
					title: that.fullScreen ? '开启全屏' : '关闭全屏',
					icon: 'none',
					duration: 1500
				});
			},
		}
	}
</script>


<style>
	page {
		width: 100%;
		height: auto;
	}

	.content {
		position: relative;
		width: 750rpx;
		height: auto;
		min-height: 100vh;
		margin: 0;
		padding: 0;
		background-color: #fff;

	}

	.top-video {
		width: 100%;
		height: 422rpx;
	}

	.video-heizith-menu {
		position: absolute;
		right: 30rpx;
		bottom: 20%;
		z-index: 998;
		font-size: 20rpx;
		width: 52rpx;
		height: 40rpx;
		text-align: center;
		line-height: 38rpx;
		border: 1rpx solid #c9cccc;
		border-radius: 8rpx;
		color: #c9cccc;
	}

	.modal {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
	}

	.modal-content {
		position: absolute;
		left: 46rpx;
		bottom: 20%;
		z-index: 9999;

	}

	.modal-content-txt {
		text-align: left;
		padding-bottom: 20rpx;
		color: #fff;
		font-size: 18rpx;
		z-index: 9999;
	}

	.speed-option {
		float: left;
		width: 72rpx;
		height: 72rpx;
		text-align: center;
		line-height: 68rpx;
		font-size: 22rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 4rpx;
		margin-right: 10rpx;
		z-index: 9999;


	}

	.speed-option.active {
		/* border-bottom: 2rpx solid #fd750b; */
		color: #fd750b;
	}
</style>