minnan-tv/pages/index2/wenZhangXQ/videoPlay.vue

<template>
	<view class="body">
		<view class="top_bg">
			<topBox></topBox>

			<view @click="backBtn" class="back" tabindex="0">返回上一级</view>
		</view>
		<view class="vdo_box" tabindex="0">
			<video style="width: 80%; height: 70%" id="myVideo" :src="list.video" autoplay loop="true" controls @keydown="handleVideoKey" ref="tvVideo"></video>
		</view>
	</view>
</template>

<script>
let that;
export default {
	data() {
		return { list: [] };
	},
	onLoad(o) {
		console.log(o.id, '是朋友');
		that = this;
		this.getContentDetails(o);
	},
	methods: {
		// 详情
		getContentDetails(o) {
			this.$api.getContentDetails(
				{
					main_body_id: 1,
					id: o.id
				},
				function (res) {
					that.list = res.data;
					console.log(that.list, 'list');
				}
			);
		},
		handleVideoKey(e) {
			const video = this.$refs.tvVideo;
			switch (e.keyCode) {
				case 13: // OK键
					if (video.paused) {
						video.play();
					} else {
						video.pause();
					}
					break;
				case 37: // 左键 - 快退
					video.currentTime = Math.max(0, video.currentTime - 10);
					break;
				case 39: // 右键 - 快进
					video.currentTime = Math.min(video.duration, video.currentTime + 10);
					break;
			}
		},
		backBtn() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style>
.body {
	width: 100%;
	height: 100vh;
	background: url('../../../static/img/image5.png') no-repeat center;
	background-size: 100% 100%;
	background-attachment: fixed;
	position: fixed;
}
/deep/.uni-video-container {
	background-color: transparent !important;
}
/deep/.uni-video-cover {
	background-color: transparent !important;
}
.vdo_box {
	width: 100%;
	height: 100%;
	margin-top: 12%;
	margin-left: 10%;
}
.top_bg {
	width: 100%;
	/* height: 300rpx; */
	position: absolute;
	/* font-size: 48rpx; */
	color: #ffffff;
	/* letter-spacing: 0.1em; */
	background: linear-gradient(10deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2) 100%);
}
.back {
	width: 15%;
	height: 5%;
	margin-left: 5%;
	margin-top: -2%;
	cursor: pointer;
	font-size: 12px;
	color: #ffffff;
	letter-spacing: 0.3em;
}
</style>