vue3-video-play视频组件的使用(二)01——实际使用 & el-select组件添加自定义图标-prefix和suffix
效果-视频列表
代码
index.vue
<template>
<div class="module-box">
<div class="big-view">
<!-- 左侧视频 -->
<vue3VideoPlay
width="100%"
height="510px"
title="冰河世纪"
:src="src2"
:poster="options.poster"
:autoPlay="true"
:loop="true"
:control="false"
:muted="true"
/>
<div class="new-time">{{ newTime }}</div>
<div class="view-query">
<div class="query-item">
<!-- 部门分类 -->
<el-select v-model="packValue" class="m-2" placeholder="请选择等级" size="large">
<!-- el-select组件添加自定义图标 -->
<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="src3"
: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="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="src1"
: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";
import src from "@/assets/mp4/demo.mp4";
import src1 from "@/assets/mp4/1.mp4";
import src2 from "@/assets/mp4/2.mp4";
import src3 from "@/assets/mp4/3.mp4";
const options = reactive({
src,
// 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://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8", //视频源
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;
// max-height: 510px;
.big-view {
height: 100%;
width: 100%;
flex: 10;
margin-right: 12px;
position: relative;
.new-time {
display: none;
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;
height: calc(100% / 3);
.new-time {
// width: 119px;
display: none;
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>