vue3-video-play视频组件的使用（二）02——实际使用 & el-select组件添加自定义图标-prefix和suffix & 封装时间组件-年月日时分秒

最新推荐文章于 2024-07-26 15:57:56 发布

viceen

最新推荐文章于 2024-07-26 15:57:56 发布

阅读量1.1k

点赞数

分类专栏：工具 vue-创新文章标签：音视频 vue.js javascript

本文链接：https://blog.csdn.net/weixin_44867717/article/details/128212080

版权

工具同时被 2 个专栏收录

163 篇文章 7 订阅

订阅专栏

vue-创新

65 篇文章 3 订阅

订阅专栏

vue3-video-play视频组件的使用（二）02——实际使用 & el-select组件添加自定义图标-prefix和suffix & 封装时间组件-年月日时分秒

效果

在这里插入图片描述

代码

方法

src\utils\util.ts

export enum FormatsEnums {
	YMD = "Y-m-d",
	YMDHIS = "Y-m-d H:i:s",
	_YMD = "Y年m月d日",
	_YMDHIS = "Y年m月d日 H时i分",
	TIME = "H:i:s"
}


export const dateFormat = function (timestamp: number, formats: FormatsEnums): string {
	// formats格式包括
	// 1. Y-m-d
	// 2. Y-m-d H:i:s
	// 3. Y年m月d日
	// 4. Y年m月d日 H时i分
	formats = formats || "Y-m-d";

	const zero = function (value: number): string | number {
		if (value < 10) {
			return "0" + value;
		}
		return value;
	};

	const myDate = timestamp ? new Date(timestamp) : new Date();

	const year = myDate.getFullYear();
	const month = zero(myDate.getMonth() + 1);
	const day = zero(myDate.getDate());

	const hour = zero(myDate.getHours());
	const minite = zero(myDate.getMinutes());
	const second = zero(myDate.getSeconds());

	return formats.replace(/Y|m|d|H|i|s/gi, function (matches: string): any {
		return {
			Y: year,
			m: month,
			d: day,
			H: hour,
			i: minite,
			s: second
		}[matches];
	});
};

页面

index.vue

<template>
	<div class="module-box">
		<div class="big-view">
			<!-- 左侧视频区 -->
			<vue3VideoPlay
				width="100%"
				height="100%"
				title="冰河世纪"
				:src="options.src"
				:poster="options.poster"
				:autoPlay="true"
				:loop="true"
				:control="false"
				:muted="true"
				:type="options.type"
			/>
			<div class="new-time">{{ newTime }}</div>
			<div class="view-title">{{ viewTitle }}</div>
			<div class="view-query">
				<div class="query-item">
					<!-- 部门分类 -->
					<el-select v-model="packValue" class="m-2" placeholder="请选择等级" size="large">
						<template #prefix>
							<img src="@/assets/svg/pack/pack_icon_01.svg" alt="" />
						</template>
						<el-option v-for="item in packList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="query-item">
					<!-- 材料分类 -->
					<el-select v-model="kindValue" class="m-2" placeholder="请选择等级" size="large">
						<template #prefix>
							<img src="@/assets/svg/pack/pack_icon_02.svg" alt="" />
						</template>
						<el-option v-for="item in kindList" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
		</div>
		<div class="small-view">
			<div class="small-view-item">
				<!-- 右侧视频1 -->
				<vue3VideoPlay
					width="100%"
					height="100%"
					title="钢铁侠"
					:src="options.src"
					:poster="options.poster"
					:autoPlay="true"
					:loop="true"
					:control="false"
					:muted="true"
				/>
				<div class="new-time">{{ newTime }}</div>
			</div>
			<div class="small-view-item">
				<!-- 右侧视频2 -->
				<vue3VideoPlay
					width="100%"
					height="100%"
					title="钢铁侠"
					:src="options.src"
					:poster="options.poster"
					:autoPlay="true"
					:loop="true"
					:control="false"
					:muted="true"
				/>
				<div class="new-time">{{ newTime }}</div>
			</div>
			<div class="small-view-item">
				<!-- 右侧视频3 -->
				<vue3VideoPlay
					width="100%"
					height="100%"
					title="钢铁侠"
					:src="options.src"
					:poster="options.poster"
					:autoPlay="true"
					:loop="true"
					:control="false"
					:muted="true"
				/>
				<div class="new-time">{{ newTime }}</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { dateFormat, FormatsEnums } from "@/utils/util";

const options = reactive({
	src: "https://vjs.zencdn.net/v/oceans.mp4", //视频源
    // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
	src1: "https://vd2.bdstatic.com/mda-mes7m97jdjkb45hm/sc/cae_h264_nowatermark/1622093563639460182/mda-mes7m97jdjkb45hm.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1668151987-0-0-bf903416b883c396b768abdf0d691cd9&bcevod_channel=searchbox_feed&pd=1&cd=0&pt=3&logid=0186965836&vid=12199996425232093876&abtest=104959_1-105568_2&klogid=0186965836",
	poster: "", //封面
	title: "冰河世纪",
	src2: "https://vjs.zencdn.net/v/oceans.mp4", //视频源
	src4: "https://v.qq.com/x/page/o3145yipo73.html",
	type: "m3u8" //视频类型
});
const packValue = ref("Option3");
const kindValue = ref("Option4");
const viewTitle = ref(options.title);
const packList = [
	{
		value: "Option1",
		label: "园区洗煤厂区"
	},
	{
		value: "Option2",
		label: "办公室1号楼"
	},
	{
		value: "Option3",
		label: "部门分类"
	},
	{
		value: "Option4",
		label: "楼前广场"
	}
];
const kindList = [
	{
		value: "Option1",
		label: "调度室"
	},
	{
		value: "Option2",
		label: "主井区"
	},
	{
		value: "Option3",
		label: "运煤车辆出入口"
	},
	{
		value: "Option4",
		label: "材料分类"
	}
];
const newTime = ref();
// const onPlay = (ev: any) => {
// 	console.log("播放");
// };
// const onPause = (ev: any) => {
// 	console.log(ev, "暂停");
// };

// const onTimeupdate = (ev: any) => {
// 	console.log(ev, "时间更新");
// };
// const onCanplay = (ev: any) => {
// 	console.log(ev, "可以播放");
// };
const getTime = () => {
	setInterval(() => {
		newTime.value = dateFormat(new Date().getTime(), FormatsEnums.YMDHIS);
	}, 1000);
};
onMounted(() => {
	getTime();
});
</script>

<style lang="scss" scoped>
.module-box {
	height: 100%;
	background: #000000ff;
	box-sizing: border-box;
	padding: 12px;
	display: flex;
	.big-view {
		height: 100%;
		flex: 10;
		margin-right: 12px;
		position: relative;
		.new-time {
			padding: 0 8px;
			height: 36px;
			border-radius: 4px;
			background: #000000ff;
			position: absolute;
			right: 12px;
			bottom: 12px;
			z-index: 999;
			color: #ffffffff;
			font-size: 20px;
			line-height: 36px;
			text-align: center;
		}
		.view-title {
			padding: 0 8px;
			height: 36px;
			border-radius: 4px;
			background: #000000ff;
			position: absolute;
			right: 12px;
			top: 12px;
			z-index: 999;
			color: #ffffffff;
			font-size: 20px;
			line-height: 36px;
			text-align: center;
		}
		.view-query {
			position: absolute;
			left: 12px;
			top: 12px;
			z-index: 999;
			display: flex;
			.query-item {
				background: #000000ff;
				width: 170px;
				margin-right: 12px;
				border-radius: 4px;
				font-size: 16px;
				overflow-x: hidden;
				img {
					width: 20px;
				}
			}
		}
	}
	.small-view {
		flex: 3;
		display: flex;
		flex-flow: column;
		.small-view-item {
			flex: 1;
			margin-bottom: 12px;
			position: relative;
			.new-time {
				// width: 119px;
				padding: 0 4px;
				height: 18px;
				border-radius: 2px;
				background: #000000ff;
				position: absolute;
				right: 6px;
				top: 9px;
				z-index: 999;
				color: #ffffffff;
				font-size: 10px;
				line-height: 18px;
				text-align: center;
			}
		}
		.small-view-item:last-of-type {
			margin-bottom: 0;
		}
	}
}
.module-data {
	height: calc(100% - 60px);
}
</style>