效果图
组件所需VUE3代码
TypeScript
<template>
<div class="video-dialog" :class="fullScreen && 'video-dialog-full-screen'">
<el-dialog
v-model="props.visible"
draggable
:show-close="false"
title=""
center
align-center
@close="changeVisible"
>
<!-- 视频容器 -->
<div
class="video-content"
:style="{
backgroundImage: firstFrameUrl ? `url(${firstFrameUrl})` : 'none',
}"
>
<!-- 背景磨砂层 -->
<div class="video-backdrop" v-if="firstFrameUrl"></div>
<!-- 视频加载中状态 -->
<div class="video-loading" v-if="isLoading">
<div class="loading-spinner"></div>
<p v-if="loadingText">{{ loadingText }}</p>
</div>
<!-- 视频标签 -->
<video
ref="videoRef"
:src="videoSrc"
@timeupdate="updateProgress"
@ended="handleEnded"
@click="togglePlay"
@volumechange="updateVolume"
@seeked="updateBackground"
@loadedmetadata="handleMetadataLoaded"
@error="handleVideoError"
@waiting="handleVideoBuffering"
@playing="handleVideoPlaying"
></video>
<!-- 播放错误提示 -->
<div class="video-error" v-if="videoError">
<img :src="DataUrl.ErrorIcon || 'https://picsum.photos/48/48'" alt="播放错误" class="error-icon" />
<p class="error-text">{{ errorMessage }}</p>
<p class="error-tips">建议使用MP4格式（H.264编码）重新上传</p>
</div>
<!-- 视频数据 -->
<ul class="video-data" v-if="previewInfo">
<li>
<img :src="DataUrl.ZanIcon" alt="" class="data-icon i-1" />
<p>760</p>
</li>
<li>
<img :src="DataUrl.PingIcon" alt="" class="data-icon i-2" />
<p>670</p>
</li>
<li>
<img :src="DataUrl.LookEyeIcon" alt="" class="data-icon i-3" />
<p>890</p>
</li>
</ul>
<!-- 视频基本信息 -->
<div class="video-base-info" v-if="previewInfo">
<div class="title flex">
<h1>网红名称</h1>
<span></span>
<p>2025.03.30</p>
</div>
<p class="note">
风掠过耳际时突然懂了：原来旅行不是赶路，是让山川湖海，把心里的褶皱慢慢烫平。
</p>
</div>
<img
@click="changeVisible"
:src="DataUrl.CloseRadiuIcon"
alt=""
class="close-icon"
/>
</div>
<!-- 视频进度条 -->
<div class="video-progress">
<div class="progress-bg" @click="seekToPosition">
<div class="progress-value" :style="{ width: progress + '%' }"></div>
<div class="progress-pointer" :style="{ left: progress + '%' }"></div>
</div>
</div>
<!-- 视频控制栏 -->
<div class="video-footer-tool">
<div class="flex">
<!-- 播放按钮 -->
<img
:src="isPlaying ? DataUrl.PauseIcon : DataUrl.PlayZIcon"
alt=""
class="icon-1"
@click="togglePlay"
/>
<!-- 下一个按钮 -->
<img
:src="DataUrl.PlayNextIcon"
alt=""
class="icon-2"
@click="playNextVideo"
/>
<!-- 音量控制 -->
<div class="volume-container">
<img
:src="isMuted ? DataUrl.MuteIcon : DataUrl.YlIcon"
alt=""
class="icon-3"
@click="toggleMute"
/>
<div class="hover-mute-content" @mouseenter="showVolumeSlider">
<div
class="hover-mute-content-value"
:style="{ width: volumePercent + '%' }"
@mousedown="startVolumeAdjust"
></div>
</div>
</div>
<!-- 视频时间 -->
<p>
{{ currentTime }} /<span>{{ durationTime }}</span>
</p>
</div>
<!-- 全屏按钮 -->
<div>
<img
:src="fullScreen ? DataUrl.UnFdIcon : DataUrl.FdIcon"
alt=""
class="icon-4"
@click="fullScreen = !fullScreen"
/>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue"
import DataUrl from "@/config/data-url.js"
// 定义props
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
previewInfo: {
type: Boolean,
default: true,
},
videoInfo: {
type: Object,
default: {},
},
})
// 视频源
const videoSrc = ref(
props.videoInfo?.url ||
"https://umi-rise.oss-ap-southeast-1.aliyuncs.com/20250707/WeChat_20250707174726.mp4"
)
// 组件状态
const videoRef = ref(null)
const isPlaying = ref(false)
const isMuted = ref(false)
const progress = ref(0)
const currentTime = ref("00:00")
const durationTime = ref("00:00")
const showControls = ref(true)
const timer = ref(null)
const fullScreen = ref(false)
// 音量控制状态
const volumePercent = ref(70)
const isAdjustingVolume = ref(false)
const isVolumeSliderVisible = ref(false)
// 背景控制状态
const showLeftBackground = ref(false)
const showRightBackground = ref(false)
const videoAspectRatio = ref(0)
const firstFrameUrl = ref("")
const isFirstFrameLoaded = ref(false)
// 播放错误状态
const videoError = ref(false)
const errorMessage = ref("")
// 新增：加载状态
const isLoading = ref(true)
const loadingText = ref("准备播放...")
const emit = defineEmits(["update-visible", "confim"])
// 关闭对话框
const changeVisible = () => {
if (videoRef.value) {
videoRef.value.pause();
isPlaying.value = false; // 重置播放状态
}
emit("update-visible", false)
}
// 播放/暂停视频
const togglePlay = () => {
if (videoRef.value) {
if (isPlaying.value) {
videoRef.value.pause()
} else {
videoRef.value.play().catch((err) => {
console.log("自动播放失败，需要用户交互后才能播放", err)
})
}
isPlaying.value = !isPlaying.value
}
}
// 更新进度条
const updateProgress = () => {
if (videoRef.value) {
const percent = (videoRef.value.currentTime / videoRef.value.duration) * 100
progress.value = Math.min(100, percent)
currentTime.value = formatTime(videoRef.value.currentTime)
if (videoRef.value.duration > 0 && durationTime.value === "00:00") {
durationTime.value = formatTime(videoRef.value.duration)
}
}
}
// 格式化时间
const formatTime = (seconds: number) => {
const minutes = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${minutes.toString().padStart(2, "0")}:${secs
.toString()
.padStart(2, "0")}`
}
// 进度条点击跳转
const seekToPosition = (e: MouseEvent) => {
if (videoRef.value) {
const progressBar = e.currentTarget as HTMLElement
const rect = progressBar.getBoundingClientRect()
const clickX = e.clientX - rect.left
const percent = (clickX / rect.width) * 100
videoRef.value.currentTime = (percent / 100) * videoRef.value.duration
}
}
// 音量控制
const toggleMute = () => {
if (videoRef.value) {
isMuted.value = !isMuted.value
videoRef.value.muted = isMuted.value
volumePercent.value = isMuted.value ? 0 : volumePercent.value
}
}
const showVolumeSlider = () => {
isVolumeSliderVisible.value = true
}
const startVolumeAdjust = (e: MouseEvent) => {
isAdjustingVolume.value = true
adjustVolume(e)
document.addEventListener("mousemove", adjustVolume)
document.addEventListener("mouseup", endVolumeAdjust)
e.preventDefault()
}
const adjustVolume = (e: MouseEvent) => {
if (!isAdjustingVolume.value || !videoRef.value) return
const volumeBar = document.querySelector(".hover-mute-content") as HTMLElement
if (!volumeBar) return
const rect = volumeBar.getBoundingClientRect()
const clickX = e.clientX - rect.left
let percent = (clickX / rect.width) * 100
percent = Math.max(0, Math.min(100, percent))
volumePercent.value = percent
videoRef.value.volume = percent / 100
if (isMuted.value) {
isMuted.value = false
videoRef.value.muted = false
}
}
const endVolumeAdjust = () => {
isAdjustingVolume.value = false
document.removeEventListener("mousemove", adjustVolume)
document.removeEventListener("mouseup", endVolumeAdjust)
}
// 更新音量显示
const updateVolume = () => {
if (videoRef.value) {
if (videoRef.value.muted !== isMuted.value) {
isMuted.value = videoRef.value.muted
}
if (!isMuted.value) {
volumePercent.value = Math.round(videoRef.value.volume * 100)
}
}
}
// 更新背景显示
const updateBackground = () => {
if (!videoRef.value || !videoRef.value.videoWidth) return
// 计算视频宽高比
videoAspectRatio.value =
videoRef.value.videoWidth / videoRef.value.videoHeight
// 获取容器尺寸
const container = videoRef.value.parentElement
if (!container) return
const containerWidth = container.offsetWidth
const containerHeight = container.offsetHeight
// 计算容器宽高比
const containerAspectRatio = containerWidth / containerHeight
// 根据宽高比差异调整视频显示逻辑
const isVideoWider = videoAspectRatio.value > containerAspectRatio
showLeftBackground.value = isVideoWider
showRightBackground.value = isVideoWider
}
// 加载第一帧
const loadFirstFrame = async () => {
if (!videoRef.value) return
try {
// 尝试获取视频编码信息（部分浏览器支持）
const videoTracks = videoRef.value.videoTracks
if (videoTracks && videoTracks.length > 0) {
const codec = videoTracks[0].codec || videoTracks[0].kind
if (codec && !codec.includes("avc1") && !codec.includes("h264")) {
console.warn("检测到非H.264编码，可能无法播放:", codec)
// 可在这里显示警告提示
}
}
// 尝试直接使用视频帧
await captureFrame()
} catch (error) {
console.error("直接捕获失败:", error)
// 尝试通过Fetch和Blob URL绕过跨域
try {
const response = await fetch(videoSrc.value)
const blob = await response.blob()
const blobUrl = URL.createObjectURL(blob)
const tempVideo = document.createElement("video")
tempVideo.crossOrigin = "anonymous"
tempVideo.src = blobUrl
await new Promise((resolve, reject) => {
tempVideo.onloadedmetadata = resolve
tempVideo.onerror = reject
})
tempVideo.currentTime = 0.1
await new Promise((resolve, reject) => {
tempVideo.onseeked = resolve
tempVideo.onerror = reject
})
const canvas = document.createElement("canvas")
canvas.width = tempVideo.videoWidth
canvas.height = tempVideo.videoHeight
const ctx = canvas.getContext("2d")
ctx.drawImage(tempVideo, 0, 0, canvas.width, canvas.height)
firstFrameUrl.value = canvas.toDataURL("image/jpeg", 0.8)
isFirstFrameLoaded.value = true
// 清理资源
URL.revokeObjectURL(blobUrl)
tempVideo.remove()
} catch (error) {
console.error("Blob方法失败:", error)
// 回退到默认占位图
firstFrameUrl.value =
"https://umi-rise.oss-ap-southeast-1.aliyuncs.com/20250707/cover-video-00008.png"
isFirstFrameLoaded.value = true
}
}
}
const captureFrame = () => {
return new Promise((resolve, reject) => {
if (!videoRef.value || !videoRef.value.videoWidth) {
reject(new Error("视频未加载"))
return
}
const video = videoRef.value
video.currentTime = 0.5
const handleSeeked = () => {
const canvas = document.createElement("canvas")
canvas.width = video.videoWidth
canvas.height = video.videoHeight
const ctx = canvas.getContext("2d")
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
try {
firstFrameUrl.value = canvas.toDataURL("image/jpeg", 0.8)
isFirstFrameLoaded.value = true
resolve()
} catch (error) {
reject(error)
} finally {
video.removeEventListener("seeked", handleSeeked)
}
}
video.addEventListener("seeked", handleSeeked)
})
}
// 处理视频元数据加载完成
const handleMetadataLoaded = () => {
loadingText.value = "加载中..."
// 视频元数据加载完成，但可能还需要缓冲
// 不立即隐藏loading，等待canplay或playing事件
}
// 处理视频缓冲
const handleVideoBuffering = () => {
if (!isLoading.value) {
isLoading.value = true
loadingText.value = "缓冲中..."
}
}
// 处理视频开始播放
const handleVideoPlaying = () => {
// 视频真正开始播放时，隐藏loading
isLoading.value = false
isPlaying.value = true
}
// 处理视频播放错误
const handleVideoError = () => {
if (!videoRef.value) return
const error = videoRef.value.error
if (!error) return
// 根据错误码判断原因
switch (error.code) {
case error.MEDIA_ERR_ABORTED:
errorMessage.value = "视频加载被中断"
break
case error.MEDIA_ERR_NETWORK:
errorMessage.value = "网络错误，无法加载视频"
break
case error.MEDIA_ERR_DECODE:
errorMessage.value = "视频编码不支持，无法播放"
break
case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
errorMessage.value = "视频格式不支持"
break
default:
errorMessage.value = "播放失败，请重试"
}
// 显示错误提示，隐藏第一帧背景和loading
videoError.value = true
firstFrameUrl.value = ""
isLoading.value = false
isPlaying.value = false
}
// 播放下一个视频
const playNextVideo = () => {
console.log("播放下一个视频")
}
// 视频播放结束
const handleEnded = () => {
isPlaying.value = false
console.log("视频播放结束")
}
// 显示/隐藏控制栏
const toggleControls = () => {
showControls.value = !showControls.value
if (timer.value) clearTimeout(timer.value)
timer.value = setTimeout(() => {
showControls.value = false
}, 3000)
}
const playVideo = () => {
videoError.value = false
isLoading.value = true // 开始加载
loadingText.value = "准备播放..."
videoRef.value.removeEventListener("click", toggleControls)
videoRef.value.addEventListener("click", toggleControls)
videoRef.value.play().catch((err) => {
console.log("自动播放失败", err)
isLoading.value = false // 加载失败，隐藏loading
})
videoRef.value.addEventListener("click", toggleControls)
nextTick(updateProgress)
nextTick(updateBackground)
// 延迟加载第一帧，确保视频元素已初始化
setTimeout(loadFirstFrame, 100)
}
// 生命周期钩子
onMounted(() => {
if (videoRef.value) {
playVideo()
}
// 监听窗口大小变化
window.addEventListener("resize", updateBackground)
})
// 监听全屏状态变化
watch(
() => fullScreen.value,
() => {
nextTick(updateBackground)
}
)
// 监听视频源变化
watch(
() => props.videoInfo?.url,
(newUrl, oldUrl) => {
if (newUrl && newUrl !== oldUrl) {
// 更新视频源
videoSrc.value = newUrl
// 重置视频状态
videoError.value = false
isPlaying.value = false
progress.value = 0
currentTime.value = "00:00"
// 加载新视频时显示loading
isLoading.value = true
loadingText.value = "准备播放..."
// 重新加载并播放新视频
if (videoRef.value) {
videoRef.value.src = newUrl
videoRef.value.load()
videoRef.value.play().catch((err) => {
console.log("切换视频播放失败:", err)
isPlaying.value = false
isLoading.value = false // 加载失败，隐藏loading
})
// 重新加载第一帧
loadFirstFrame()
}
}
},
{ immediate: true }
)
// 组件卸载时清理
onUnmounted(() => {
if (timer.value) clearTimeout(timer.value)
window.removeEventListener("resize", updateBackground)
})
</script>
<style lang="scss" scoped>
.video-dialog,
.video-dialog-full-screen {
:deep(.el-overlay) {
background: rgba(0, 0, 0, 0.66);
}
:deep(.el-dialog) {
width: 900px;
--el-dialog-border-radius: 20px;
--el-dialog-padding-primary: 0;
background: transparent;
border-radius: 12px;
padding: 0;
overflow: hidden;
.video-content {
width: 100%;
height: 503px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
// 背景磨砂层
.video-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
z-index: 1;
}
video {
max-width: 100%;
max-height: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
z-index: 2;
}
// 加载状态样式
.video-loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 5; // 高于视频但低于错误提示
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.6);
.loading-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #ff3f81;
animation: spin 1s linear infinite;
margin-bottom: 16px;
}
p {
color: white;
font-size: 16px;
font-family: 'PingFang SC', sans-serif;
}
}
@keyframes spin {
to { transform: rotate(360deg); }
}
// 播放错误提示
.video-error {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10; // 最高层级
text-align: center;
width: 80%;
.error-icon {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.error-text {
font-size: 18px;
color: #ff4d4f;
margin-bottom: 8px;
}
.error-tips {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
}
// 视频数据
.video-data {
position: absolute;
right: 24px;
bottom: 49px;
z-index: 3;
li {
margin-bottom: 17px;
&:last-child {
margin-bottom: 0;
}
}
.data-icon {
width: 24px;
height: 24px;
display: block;
margin: auto;
}
p {
font-family: DIN, DIN;
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
margin-top: 15px;
font-weight: 400;
font-size: 16px;
}
}
.close-icon {
position: absolute;
right: 24px;
top: 35px;
width: 50px;
height: 50px;
z-index: 2;
cursor: pointer;
}
.video-base-info {
position: absolute;
left: 24px;
bottom: 12px;
z-index: 3;
.title {
align-items: center;
h1 {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
span {
margin: 0 8px;
display: inline-block;
width: 2px;
height: 2px;
background: #ffffff;
box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.6);
}
p {
font-family: DIN, DIN;
font-weight: 400;
font-size: 12px;
color: #eae9e8;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
}
.note {
margin-top: 2px;
width: 234px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #ffffff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
line-height: 1.5;
}
}
}
.video-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.1);
z-index: 2;
pointer-events: none;
}
// 进度条样式
.video-progress {
position: absolute;
bottom: 56px;
left: 0;
right: 0;
height: 4px;
z-index: 3;
.progress-bg {
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
.progress-value {
height: 100%;
background: #ff3f81;
border-radius: 2px;
width: 0;
transition: width 0.1s;
position: relative;
}
.progress-value::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: #ff3f81;
border-radius: 50%;
}
.progress-pointer {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: #ff3f81;
border-radius: 50%;
margin-left: -6px;
box-shadow: 0 0 8px rgba(255, 63, 129, 0.5);
display: none;
}
}
}
// 底部控制栏样式
.video-footer-tool {
height: 56px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: #16110c;
padding: 0 24px;
.icon-1,
.icon-2,
.icon-3 {
width: 14.22px;
height: 16px;
margin-right: 24px;
cursor: pointer;
object-fit: contain;
}
.icon-3 {
width: 16px;
margin-right: 0;
}
.icon-4 {
width: 18px;
height: 18px;
cursor: pointer;
}
p {
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 14px;
color: #ffffff;
span {
color: rgba($color: #ffffff, $alpha: 0.65);
}
}
// 音量控制样式
.volume-container {
display: flex;
align-items: center;
margin-right: 24px;
.hover-mute-content {
width: 68px;
height: 6px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.37);
cursor: pointer;
position: relative;
display: none;
margin-left: 24px;
.hover-mute-content-value {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: #ffffff;
border-radius: 24px;
transition: width 0.1s;
&::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}
}
}
}
.volume-container:hover {
width: calc(72px + 68px - 24px);
max-width: calc(72px + 68px - 24px);
.hover-mute-content {
display: block;
}
}
}
}
}
// 全屏模式样式
.video-dialog-full-screen {
:deep(.el-dialog) {
width: 100%;
height: 100%;
--el-dialog-border-radius: 0;
background: transparent;
border-radius: 0;
.video-content {
width: 100%;
height: calc(100vh - 56px);
video {
max-width: 100%;
max-height: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: contain;
z-index: 2;
}
}
}
}
</style>DataUrl Icon文件
新建或者自定义一个相关文件，将以下ICON.base64代码引入，这边用的是js文件
javascript
const dataUrl = {
"ErrorIcon": ``, "ZanIcon":`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAAXNSR0IArs4c6QAAAjdJREFUSEu9lb2O00AUhe/ZH1Z2sOQNsWhSUKRyqpVfwC7SQ+EaqNPAE2DeAJ4A+jTwBPgBUqRKFQkKd5FgkRWH3Q2+5BrbOMbC+TEZKYo947nfnLln7oCO2HBEFm0NY+Z3RPSMiHwieg7gy64L3QrGzDYRfSoEvyaiq12B28IyVUUxbwG82EVdLYyZHxHR54qgPgCnaViVKmE0C0tVSa5EXbk1DhP3ibKqJiaZlAak7yOA94X+EyKK5f2fOWNmyVWVqrpUvQTwRj6yLOt8PB6vAPAGjJlfEZE4TK+LVjN+DeBSvul0OprjONFoNPqZw1KQdyAknw4gia1pWicMQ9neVRGWbZkDwGdmAYvSfdoEwJVMbLVaDxeLxVciuivCOEliuqIDYWKSx8eCvV6vOUmJpmkPLMv67vv+xjY2qewJgA8C03VdHwwGYdkgTcKSvAvMMIz7w+Ew8jwv/l85u1wXaXEgdbtdJQiCH2uz/Tlna+s3pSw/YwLr9XoXs9nsZqOCMPO39DDLPTU5wI3lmnmPiG7LsEPOVfEsyi2e10bbts/EiX/VRmaWevZ0z3IlOZILdaMKua57Kk6sLcT7lI7yHGaWOvHbD00E3DZGESb3zrn8NE27CMPwjIhOFUXBcrlM4imKIuWMoyiCqqpi4GQs7Y+jKFq12+0bVVXvgiC4ZeY4U1WlDK7rnsznc/i+D9M088VMp1MyTTOBZs/yL0365dm27dgwDO73++x5nmxdsn1ZO+o2/gKK/QUrGuu3NgAAAABJRU5ErkJggg==`,
"PingIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAALlJREFUSEvtld0NgzAMhM8blA3KZt2kZRM2Kxu0GxwxSioURcqVEvqCJV5OyF/8b2hs1tg/FgDJJ4DrzrDJzPoE4M7OF3fmFiM4AcUM/z1FbwD+rbtL1aQi9xHwWsWvanVAqcNULT2oVoMOwAWAD2EyVatHAGCKAIckUzUJ8PNw11J0Ao5ddm3vQV5Nko9wh+6ZPoYVP5iZt6psxZOZATY5/kxz6SkkfcHdwqIbv31x7u+Yoy8ndMOPM/JLdRkQa0DJAAAAAElFTkSuQmCC`,
"LookEyeIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAU1JREFUSEvFVQtRw1AQ3HWABFAAOKAKGBQACmgV0DpoFVAUgAPigKKASqiDI8vcg7R5nySdwM1kJp93t2/33V6IkYMj18f/A5jZKYBbAHcAdK/Y+LUguc2pkGRgZicAHgFMCzLOSS5Sa6IAvusXABcdz0gsJjE2LQAv/taQoyMGoiB7AEcUD5togRwCvGdkqQB8eKXrDMMNycuA+ANgZjrQeUIPdcveNzPTs3JisSQ504dvADO7AiDdY7Eleebr1KogufZn5Sg3Fjr0KgB8ZiivSE7NTMWfvNK9QOpWXgJ4yG3szwByElUkJwmJcsx/JfLkHN2WW7s2RZ82VY+/ut5yeOpw423qLDTMhri4m9GOBCmPirCNASND4/um07Br9nTBrWHpShOg9sou5ofiH83ZaCycN+aU5Hiuzbke/MNJuLP36yKD3hUPEkYH+AKsa5kZ8eiKFwAAAABJRU5ErkJggg==`,
"CloseRadiuIcon": `data:image/png;base64,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`,
"PauseIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAhCAYAAADOHBvaAAAAAXNSR0IArs4c6QAAAMtJREFUWEdjZBggwIhs761btwwYGRkFkMVYWFgeKCoqPiDHfffv3xf48+ePAbpeVVXVA3CLb926dZ6BgQFDEUjTv3//CjU0NCaQYvnNmzcDGBkZ1+PQcwFs8e3btx3+//+/H4/BB9TU1BxJsfjWrVsg8xxw6Rm1GFfIjAY1wXQ2mrjQg2g0O41mJ1gIjBYgowUIRgiMFpmjReZoJTFaSYxWEgQrB5iCwV1kQruT9////4/SRUXy3gI1NbVEor3LwMBw69YtUO8yH5ceADqDdhRm0VQiAAAAAElFTkSuQmCC`,
"PlayZIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAgCAYAAADud3N8AAAAAXNSR0IArs4c6QAAARpJREFUSEvd1t0NgjAQwHEuAZ5doQ+lMI4jOIG6AZ1A3QA3cATmgJC4gSzQnoGIUcNHC1ce7HOTX67/hytUVbXXWqeIWCPiUQhx8xwfKIoCf4wsCALJGLu7svvQ1gKA1Pf9qwt8EH1N2UwroyjKKKeeQjvrDgA7znlOgZuinUXS2xYl6T0LXdp7CTq7NwVq3ZsSNe5Njpr0doWO9naN9vZeC3335pzLVdFGRsTtf6MAUGutL0KIdK1Jc6XULkmS9mPgGs0BQP6uRCdo85RKKRnH8blv/5KiXbcwDM+MsXpo4VOiX93GfhgUaG83J+hUN1LUtBslatyNArXuNhtd0s0apeg2ipZl+UDEzcclkm5T6AERT57nkXYbQ59nnvPXuWPpvAAAAABJRU5ErkJggg==`,
"PlayNextIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAgCAYAAADud3N8AAAAAXNSR0IArs4c6QAAAZNJREFUSEvV18ttwkAQANAZy+tzSogPtuBGCUkHSQehAuQO7A6gglACHcQdhCtYlinBd38mGhRHRmziZT9I2RMCvI8dZsZjBACoquohDMOaX7tYZVmu+r5Piaj2PC/F4/G4AIBPADgBQBbH8dYmXFXVomka3n9YNaNvAPA+enMrhMjCMOQfYbyKongioo/xRjKUP6/7vs9ms9naVL0FHSw+7Wscx3tdXAcdLO2Qm6CMayWaKfoTciHEs2qi2UIHfC2E2EzhtlGlkLtAz6cmol0QBIns1M7QId6ImEZRlI3Lyzn6jV1k+b3Qi9pu2/ZRtQ3qNqCr6xBxR0QvKr3XGirb6LeG/39RROTBIL9nePOu65a+798lkU6IuIyiKOf/yHnJEFEWBMF6PG+5RM+hnM/nVyOOdZQThYiSv4Y52+hGCJFOja620BwRsyFRpgraCOVQdl1384RogiqFUnZqHXSPiIlqKI1Q3VBqo3wrats2kdXcVNIoo6OYX7QvHUB2jeQBCpC/6PpR8XA4pJ7nrdjiCvgCWcuQkZ35fVAAAAAASUVORK5CYII=`,
"MuteIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAAAXNSR0IArs4c6QAAA7dJREFUWEfFV11S2zAQ1or4nZ6geIbI8FQ4QckJCicoOQHNCZKcAHIC4ATACUhPQHhiLME4NyB9dqxtVmN5ZEXOD2WmfshDoux+2v2+b9fA/vMD/5pfSnkURdEsjuPpR2J9GECWZbvz+byPiL8oMQB02u32eFsQFQClVF9rfQ4A4yiKenEcz5qCZVm2l+f5HWPsyDkzEkIYMNs8BsDr6+up1poCmgcR75MkOQsFUkqdIOI1Y2zP+/1GCNHdJrmpHH1IKc8ZYxS0egBg0G63h+53b29vF0VRXDUk+TgA6mee549eSZnWundwcGASKqUubb8/HQAFfHl52dvZ2SEQtdISuRhjF4h4uqa8wQqkaXrKOb+mtkZRNPTVUlMBSQoAHhFx10k2AwDiw533vY8nCEBKSZc6KQ9PoyjquCCWZBjiA2NsCgBdRKRgTU8QgFLqFyJeOn8iEMdWZUEfSNN0AAB9L9MYAB68YO6RRhL68VyVWRVQ6U3ZEbFPXoCIX6j3HogrRPwTAEfHVqrAB2GNC8iAEHHg15Vzfq61JmNxzcYoY0HW7wFSVgCojQDwrdVqjdx+K6WIR5bMYyFEB6SU2NDUGSJ2AYD6V1MGIp6VVXDBGQBZlh3lef7kkK7qNymt1Wo9WTJTFVYBoBiGfAEFGGV4jmgBkKe820sh4jBJkqrCUkryFdva0ToAFGfCOR+6Vm1vt+BDr9Q48adqgcf8WRRFsWW9Z/uTTQAYgi1u/BxQwIQxNiptvEZCpdS74xtdIcSNY3hZeYnZpgBo3A7WKOOrO4w8A6oAUGKXdxsDoD+SAjjnPxxnMxchcIyx3+4+0ASgnDsVR7YCUCbrhMYxyXZ/f/+WzpT7gi0zfXUshKB20VCjcW4ddWMOuEptVMaiCh1KJKWk5Fa6UyFEbAO4BNVaP2xdAasAznkvpAxftkVRxIeHh9W+6IHrEgAX7YpZs/RT02yYAMAtKSbgAbXFh8BB6U50eBcAaA+kHrnjeBUoMhWaJ/7MWJoLxIv5fF65oPWNpWnYtJg0oVilDLvSlaR0l51pURQdak1wHDtVWbcFGVzlbFiaGeVAeyYrd+cJnU+S5N6oalV9G/aC0F9Cs4HOLQ00nxdrX0wCG00TZrJasmU7Ce25SrZFUQztkmt/XAugtE4au7UyBlAY4jWsdJNyF1x62dkIgDNElrZmB0jF/IbWBTemjQE4IPxXMouhliBNU5qgP91KueTbqgV+ub2lIggg9LLzaQAoY6DMtZEbaJvZAf3L/AVCj3VLrOF/ZQAAAABJRU5ErkJggg==`,
"YlIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAgCAYAAACcuBHKAAAAAXNSR0IArs4c6QAAAnNJREFUWEfllsFx6jAQhiVsc3YJ+MB6uL10gDsgFSSpIOkgpIK8VJB0kHTw6CDcGEswpoNwxpjNrEdiZI3tyGHM5emWIFmf9P/a/Tk7c2RZNsrz/JUxNkXE6ziOP7p+knddYM5P03Q2GAxeETFU/18AQNL1m7+GkFI+IuLc3hAAOn+z84Isy8I8z58ZY7d1J+4dQun/jzE2arryXiGklFPG2Luhfy1HEwTJxxgLfd9/iaJoay52kmOz2dwXRfHXxXB1EEIIko5eEI1tEASJCdIK8ZP+rp5Yr9ez4/H4bsyvgDRCKP1p4R+XG9BzmuRI03TOOSdJ9FgCwBX9UQshhKCNCaDRgL8xppTyARHpZZUDEZ/iOJ6XEGbV63LqNjlIyv1+Px0Oh0tTfyEEeeterd0FQRCVENYPZ3FoOaSU9JJmthGVzz71LdNtlBBpmr5xzm/O2l0t1hBCiMyQs1LOLVkWvUHYL4JznozH44WSn6rulz50bxBKZqquVORovAHAnd5YCEGSlC+vbwizSFUkEUKcAP8LCCrVutu+AMDDReWw+gWzjElpjF5POXqTwzQeIn7EcXxt3ILplWWfENp426IokslkcmrfVg25KyFWq9XI87zWsOJayMwGRrXC87xFFEU7vd6MhZzz3eFwuKptYOdAtSUrO5dUGljdKQnE9/1nVf9dL4K1JSsrGG8BIDoZs22HmhzQClQHURdqTJ84xTs7B7RRuMQ726hOEKoPOAWdH5JVGATB3DSqkxzmqV0M22vk1zAqlFD0092xos5FIIyqZ8a0E8hFIWjXtgTt/Kab0naXD6hG9cg5DxExAYBll/U09xtsmJNzr7Qi0AAAAABJRU5ErkJggg==`,
"UnFdIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAAAadJREFUWEftWN1RwkAQ3h3IOyWQhwR4ix1AB1qCHWgFQgWOFVgCYwXQgXljcvdwdGCeScjKOsbJREz2wMzocPd6e9lvv9x9+4MgXMaYYZZlSwCIEHEeBMGi6ajW+gEA7ogo9Txv5vv+VuIKJUZso5RaAcC0Yn8VhmF87LwxJsqy7LXcK4riZTweX0t8nQwIEWdBEKyPOdFaT4mIAyjXOgzDmQNUMuAYYibcHaq/iPqzvxyGWIF3u90jIg6adAIRIyL6srFkKAWAoyJa9el53i0qpQwADCWiVbWxBCT9fIxa67dq5NKTHQECTJJkjoicCK1WF4CIaPGRy5RSnMEb71Adbb/fj33f57vxbRljBnmeRzYRclXAyVqcXG0+fo6tA9TGnmPofzL0p549dwdENG+jsr7fhTByN8O5jGzBnFCgSV2kDIjbFStV7RDQFjebzbDX6z23hXBO+YGIKRE1lh9sk+f5vViHLrdibPtV5b5jqI0px5Bj6AcGxDqktV4exK06dBIPrA6Drt+fD30q+oqbgaIonkajUWNCrnQz8X6/v5lMJqKR3jvTkq+FkbX/lwAAAABJRU5ErkJggg==`,
"FdIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAAAAXNSR0IArs4c6QAAAg5JREFUWEftWMtxwjAQlQD7TAn4gIAbdBA6SCpIqCChEpIKQiqADkIH4caMBGOX4LuRNlmPbBzQGAnyIRnraO2unp6lXe2j5EIHNeEKw7CVJMmVaQ4AYt/3l0EQRC57CsOwmSTJtW3MT8A0oGdCiBFUIWjked4gCILYBpyO+0oIaZXZA8Dc9/0xbjoHZutcCDxijE1tgK3X62ul1MzGlhCCmx7mwIQQMwAwUm0KSCkdttvthc1iQogrAEDGbMciBabZCotelNJYKXXwq/T3l263+2i7CtoJIR4A4BYAmvt+tVqtuf89BWagOpZSDnq9ntMBdwFatF2tVq1Go/FWBJcC45zfEULw0GcjYowFpy50ih/nHP9YfjkqYMdYrBg7xtD+vC1jS8bYwDX4Ofac8zdCSD+LkeUxrGM4kd4KpdTYNU+dA6qQ5yY6zq4kYS7xPK+PRdo2o58LZt9fVwjEMTe+Lr56wVPiVcBcWasYqxhzZcDVvjpj/4+xrO+jlEa/WZKUUk3sW4vNSN73XUwRNzQjl/HsqZqRkqtp+4Kt2reMxD/PWKxlph+RCFA72W63hxIBvvfr9bq1qPLRtEwZY08uZWaz2dxLKe+cRBWtX2CCPSbY5Vi+U4ZCAS9/XWjWjqp+GTIAuOl0OnMb1gx5sswtklLuhDu01HLQxELAS51tZSpdh/O+tQTVQko5wrjvF5yGMz+76SwAAAAASUVORK5CYII=`,
}
export default dataUrl