官网链接： v2.h5player.bytedance.com/gettingStar…
使用框架： ant组件 vue3
// npm i xgplayer
// npm i xgplayer-mp4（这个在nuxt框架下用 两个都下载）
import Player from 'xgplayer'
const state = reactive({
list: [
{
id: 1,
videoUrl: '视频链接'
}
],
})
/** * @description: 配置函数
* @param {*} id 视频盒子 id
* @param {*} poster 视频 封面图
* @param {*} url 视频 链接
* @return {*}
*/ function initPlay(option = { url: '' }) {
let relult = null
try {
const defaultConfig = {
...option,
width: '100%',
height: '224px',
videoInit: true,
volume: 0.6, // 初始音量
autoplay: false, // 自动播放
playbackRate: [0.5, 0.75, 1, 1.5, 2], // 当前播放速度
defaultPlaybackRate: 1, // 播放速度设置为1
playsinline: true, // 开启ios和微信的内联模式
cors: true, // 跨域
loop: true, // 循环播放
maxBufferLength: 10 // 设置最大缓冲区时长，默认5秒
}
relult = new Player(defaultConfig)
} catch (error) {
console.error(error)
}
return relult }
onMounted(() => {
nextTick(() => {
const playUrl = state.list.map((item, index) => {
return {
id: `${item.id}video${index}`,
url: item.videoUrl
}
})
playUrl.forEach((item) => {
initPlay(item)
})
})
})
<template>
<div>
<a-row justify="start" align="top" :gutter="[24, 0]">
<a-col :xs="8" :md="8" :lg="6" :xl="6" class="main_item" v-for="(item, index) in state.list" :key="item.id + 'video' + index">
<a-tooltip placement="bottomRight" trigger="click" overlayClassName="tooltip_class" color="#ffffff">
<template #title>
<div class="operation_video">
<div style="color: #000000d9" @click="add">修改</div>
<div style="color: #f5222d" @click="deleteVideo">删除</div>
</div>
</template>
<div class="video_icon">...</div>
</a-tooltip>
<div class="main_item_video" :id="item.id + 'video' + index"></div>
<div class="main_item_text">
<p>宣传视频</p>
<div class="text">
<span>广东省</span>
<span>2022.07.27</span>
</div>
</div>
</a-col>
</a-row>
</div>
</template>
<style lang="scss" scoped> .main_item:hover {
.video_icon {
display: block;
animation-name: example;
animation-duration: 1s;
}
}
@keyframes example {
from {
color: #f9f9f900;
background: #f9f9f900;
}
to {
color: #ffffff;
background: #f9f9f94f;
}
}
.main_item {
display: flex;
padding: 12px;
justify-content: center;
align-items: flex-start;
border-radius: 8px;
flex-direction: column;
position: relative;
.main_item_video {
// width: auto;
height: 100%;
// height: 224px;
min-height: 224px;
overflow: hidden;
max-height: 224px;
border-radius: 4px;
display: flex;
align-items: center;
}
.video_icon {
cursor: pointer;
background: #f9f9f94f;
color: #ffffff;
font-size: 30px;
text-align: center;
line-height: 5px;
display: none;
position: absolute;
top: 22px;
right: 22px;
height: 24px;
width: 24px;
border-radius: 4px;
z-index: 115;
}
.main_item_text {
margin: 12px auto;
width: 96%;
height: 54px;
display: flex;
flex-direction: column;
p {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 20px;
} .text {
display: flex;
justify-content: space-between;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 20px;
}
} }
</style>
<style lang="less">
// 进度条的颜色
.xgplayer-skin-default .xgplayer-progress-played {
background-image: linear-gradient(-90deg, #00b781, #00b781);
}
// 音量条的颜色
.xgplayer-skin-default .xgplayer-drag {
background: #00b781;
}
// 盖上的一层遮盖层
.xgplayer-poster {
opacity: 0.5;
background: #000000;
}
.tooltip_class {
z-index: 119 !important;
.ant-tooltip-content {
.ant-tooltip-inner {
width: 84px;
height: 104px;
padding: 0;
.operation_video {
padding: 16px 12px;
z-index: 9;
width: 84px;
height: 104px;
// background: #ffffff;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
border-radius: 4px;
div {
width: 60px;
height: 36px;
border-radius: 4px;
text-align: center;
line-height: 36px;
cursor: pointer;
}
div:hover {
background: #f6f6f6;
}
}
}
}
} </style>
