Vue3视频播放组件自定义封装、控制是否自动播放、全屏小屏控制、loading加载、静音播放等样式完全自定义控制，代码复制即用
新建一个vue组件页面将代码复制粘贴进去
<template><divclass="video-player-components":class="fullScreen && 'video-player-components-full-screen'"><divclass="video-content":class="!firstFrameUrl && 'video-content-none'":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><!-- 视频标签 - 新增canplay事件监听 --><videoref="videoRef":src="videoSrc"@timeupdate="updateProgress"@ended="handleEnded"@click="togglePlay"@volumechange="updateVolume"@seeked="updateBackground"@loadedmetadata="handleMetadataLoaded"@error="handleVideoError"@waiting="handleVideoBuffering"@playing="handleVideoPlaying"@canplay="handleCanPlay" ></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><div class="p-t-b"><!-- 视频进度条 --><div class="video-progress"><div class="progress-bg" @click="seekToPosition"><divclass="progress-value":style="{ width: progress + '%' }"></div><divclass="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"><divclass="hover-mute-content-value":style="{ width: volumePercent + '%' }"@mousedown="startVolumeAdjust"></div></div></div><!-- 视频时间 --><p>{{ currentTime }} /<span>{{ durationTime }}</span></p></div><div><!-- 自动播放按钮 --><img :src="autoplaySwitch ? DataUrl.PlayIconOn : DataUrl.PlayIconOff" @click="autoplaySwitch = !autoplaySwitch" class="icon-6"><!-- 设置按钮 --><img :src="DataUrl.SettingIcon" class="icon-5"><!-- 全屏按钮 --><img:src="fullScreen ? DataUrl.UnFdIcon : DataUrl.FdIcon"alt=""class="icon-4"@click="fullScreen = !fullScreen"/></div></div></div></div></div>
</template><script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import DataUrl from "@/config/data-url.js";// 定义props
const props = defineProps({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 autoplaySwitch = ref(true); // 默认自动播放// 用于存储自动播放偏好设置的本地存储键名
const AUTO_PLAY_KEY = 'video_autoplay_preference';// 音量控制状态
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);// 处理自动播放失败的情况（浏览器限制）isLoading.value = false;isPlaying.value = false;});}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 = "加载中...";// 视频元数据加载完成后，如果5秒后仍未播放则强制隐藏loadingsetTimeout(() => {if (isLoading.value && !videoError.value) {isLoading.value = false;}}, 5000);
};// 新增：处理视频可播放状态
const handleCanPlay = () => {// 视频可以播放时隐藏loadingif (isLoading.value) {isLoading.value = false;}
};// 处理视频缓冲
const handleVideoBuffering = () => {if (!isLoading.value) {isLoading.value = true;loadingText.value = "缓冲中...";}
};// 处理视频开始播放
const handleVideoPlaying = () => {// 视频真正开始播放时，隐藏loadingisLoading.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 = "播放失败，请重试";}// 显示错误提示，隐藏第一帧背景和loadingvideoError.value = true;firstFrameUrl.value = "";isLoading.value = false;isPlaying.value = false;
};// 播放下一个视频
const playNextVideo = () => {console.log("播放下一个视频");// 这里可以实现播放下一个视频的逻辑// 如果有下一个视频源，可以更新videoSrc.value
};// 视频播放结束
const handleEnded = () => {isPlaying.value = false;console.log("视频播放结束");// 如果开启了自动播放，尝试播放下一个视频if (autoplaySwitch.value) {playNextVideo();}
};// 显示/隐藏控制栏
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);// 如果开启了自动播放，尝试自动播放if (autoplaySwitch.value) {// 处理浏览器自动播放政策限制（尝试静音播放）const playPromise = videoRef.value.muted ? videoRef.value.play(): (() => {// 先静音播放，成功后恢复音量videoRef.value.muted = true;const promise = videoRef.value.play();promise.then(() => {videoRef.value.muted = isMuted.value;});return promise;})();playPromise.catch((err) => {console.log("自动播放失败（可能需要用户交互）", err);isLoading.value = false; // 加载失败，隐藏loadingisPlaying.value = false;});}videoRef.value.addEventListener("click", toggleControls);nextTick(updateProgress);nextTick(updateBackground);// 延迟加载第一帧，确保视频元素已初始化setTimeout(loadFirstFrame, 100);
};// 生命周期钩子
onMounted(() => {// 读取本地存储的自动播放设置，没有则使用默认值trueconst savedAutoPlay = localStorage.getItem(AUTO_PLAY_KEY);if (savedAutoPlay !== null) {autoplaySwitch.value = savedAutoPlay === 'true';}if (videoRef.value) {playVideo();}// 监听窗口大小变化window.addEventListener("resize", updateBackground);// 防止loading一直显示的安全机制setTimeout(() => {if (isLoading.value && !videoError.value) {console.log("超时隐藏loading");isLoading.value = false;}}, 8000);
});// 监听自动播放开关变化，保存到本地存储
watch(autoplaySwitch, (newVal) => {localStorage.setItem(AUTO_PLAY_KEY, newVal.toString());
});// 监听全屏状态变化
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";// 加载新视频时显示loadingisLoading.value = true;loadingText.value = "准备播放...";// 重新加载并播放新视频if (videoRef.value) {videoRef.value.src = newUrl;videoRef.value.load();// 如果开启了自动播放，加载完成后自动播放if (autoplaySwitch.value) {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-player-components {.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);}}.p-t-b {position: absolute;width: 100%;bottom: 0;left: 0;z-index: 2;}}.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-content-none::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 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,.icon-5,.icon-6 {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;}.icon-6 {width: 30px;height: 18px;}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-player-components-full-screen {position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 9999999;.video-content, .video-content-none {width: 100%;height: 100vh !important;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>
Icon图标组件文件这里用的是base64位文件编码，目的：快速编译图片防抖动
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=`,"PlayIconOn": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAhCAYAAACFtMg3AAAEHklEQVRoQ+VZrVLjUBQ+t9MgQIABgSoCBAhAgADTCgyIpTMkgFr2CWCfAHiCXZ5gd2WTzmTXYBAUgUJQBAgQBAECxNaAICR357uT20lDU5KSTJjZMwPtQO6597vn7zsnjP4zYd3gNU1zwLbtAmNsoJv1SazJ5/P1crnciKsrMmDDMIqMsc+u6y4TUWZAAwCtXC5Xcxznz+rq6u8o4N8EXK1WN13X3flAIMNwWUS0q2naz07AQwHruj5FRD+ICJ+ZSl9fH/X391NPT0/zHI+Pj9RoNMi27eDZLEVRSuVyGRfwStoC/ghWVRSFxsbGqFAoUG9vb+iFPzw8kGVZ4scvrut+XVtb+x5c+AqwYRjbnHO4cGYCoOPj4wTQUQUWPzk5IVyAFMbYjqqqu34dLYArlcoyY8yMuknSzwHg/Pw8DQ4Odq364uKCzs/Pm+tzudzGysrKr+YlyC+maRZs2z7NKjkhTovFYkf3jXoLAdANRVGmZUw3LazrOiyLkpOJLCws0MBActXu7OyMLi8vBRbGWE1V1ZL4jl+6rm94GTkTsBMTEyJmkxRk74ODA0Jse6BLqqrWBGDDMA4558UkN4yqC668uLgY9fFYzyGB1Wq1FiszL3avY2mK+DBcFCXl7u4udMXMzIwoPWkJAMvM7TjOCDMMY4tz/i3pDWE5xOX19TUhnsJkaWkpkUQVph9xLPdHbWbVatX0+HFimGXGfX5+FnEUJvAAXEqaAjbmO8MfWPiUc54YfZRgOediozbUr4lveHhY1N20xTAMuYXFdF3nSW0I4oBais+jo6NmhgzTj8yMDJ227O/vy7M0YgOWdK+d5WAtkPwoYAEyA8AUG/Dc3BzBbZH9/KCnpqZEtsXfETdRZHR0lLAubfFZWABGSYpcF2SMoqDLGieJw/HxcccSFASGC0JZSltaYrgb0oHsili9vb2lp6cn4Zr1ep2urq5inT1N0iEPcn9/L0IMAooJC6Nn3Ix1UiLR0QA0BN0JCHs3Ah3v6Y7e2jNgiD2UpSLn/PCthe3+j7ICK8W1rF9X2omrJX4ZK8nm4W9WbSGyPthWnGY/qnEwBcFQwBNL07QRAbhSqewwxrajKkr6uTQICJKqvzzKkY8A7M2Zka2Ta0hj3srk5KSYYSUlgYphOY5TWl9ft/wDgEx7YgBNqnOCGweGel/k+LZlptVtxk7KKtDzniQGIgTL+gd5RLSnadqWPGMLYLj2y8sLhgHp058Ot4QyNTs7G6tthEVRggKUt65p2rR/q1djWg+0mdUExH84AAcbGxoaagseFBbk5+bm5lWjApKRz+fLwfdPoW8ess7cQQdA2ZJDPrA79NodWs8WN+5oYf8/vdctmGZG5tpJxnNcXbAq3i9hWBe29s2XaVjoTTU/ZTnG7QQ+ClC5/h9fYO6M8iDyywAAAABJRU5ErkJggg==`,"PlayIconOff": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAhCAYAAACFtMg3AAAEHklEQVRoQ+WZ/0rcQBDHZxMjiiKK4g8QtCIogtC+gfcE7f2RiH+1PoH2CapP0PYJav8SkoOjT6BvUIsgimLvD0EURRFE8ZJM+S63xxkvbu5HjNCBAyXJ7nx2ZnZmZwX9ZyKa4S0Wi5O+70828227vmHma8dxdhodLxFwsVjs933/ExG9Z+a3RNTf6EQpvX8thNhh5p+WZW3n8/mSbp5ngSugK8y8+oogY5kMw9gwTXP9OfBY4EKh8DEMw29R0DAM6e7ujh4eHigIAjJNkzo7O+XPsizdAr/Ec1h53XGcjXqT1QX2PO8LM6/VfnB1dUX43d7exird1dVFQ0ND1Nvbmzm8EGLNtu31qLJPgD3P+1pxYfkuAE9OTqRFkwqsPTg4KOGzFCHEN9u2P9fq8Ag4atmzszM6Pz9vWue+vj4aHx+Xbp+VRC1dBfY8b4GZt5RircKqceDmU1NTWUPnbNvehk5VYNd1/xKRzK3tglXQPT09EjpDKVmW9S6fz19LYNd1kWN/4O9yuUz7+/tt121sbCzTmGbm9cXFxTUFXLXu8fHxsztxsyuBOJ6ZmdG6NjZJeIROYBhIA6kQldmAqI3d+/t7Ojw81M3V9PPh4WEaGRmJ/R6Z4ODggAYGBuRmFyeAhWEA20ioCCFywnVdFBcrGBzpB7k2LUkSy5gfesRBK1hmlrBIgQ3Id1h4i5kX8BGsCyunKXNzc1q3joNuEZaEENuwcDV+d3d302SVY09MTBDys06i0K3CVuYrAZjxj4ofnSKtPkdswl2TiILGAsHzmnTjR1O9amBoenFxQaenpzIMpqenG43ZJ+sKYOxS/S9l4aQuDU2VG/u+Tzil6XbvJF7zKIb39vbkkS9Nwc6aNM8i9Sg3VoeYFqF3RKFQKIZh+AGQaRUdtQs4Pz+vXc+4DUqXsrQDE/1CWlpl5q94ud01dFQBbD5w6edEtxu3CL0s0MYpl8uy2oA7o9JJy611OzTmPTo60u7GChrnbdToSSUIgjeylq4tPtKyMsrA2dlZrW6YH3Gqq6Bubm6kYZKmOBQdtm3nFHD1LIxBUHGp4lyrYcIXcHDQQSQcqqnXUEfjTFzbAKiWmO0+RODAgINDhrLhOM4y5q8Cb25uTpqm+Vt1KVWctKrkK4AtBUGQW1pakj3raE/rUZsHli6VSk25t2EYNDo6Kpt5WYpyZaXDk65lbfcDL6ECu7y8lCVeUkFhgR05y5it6Loc7U/X7Uu7rovrlKLqcSlwVDtwdTTiUeopgTW7u7tlPxq5Fo27jAVXMHnVuKvVJfbmATFtGMaaEOJjPeWxmyvoBtosqa8D0o/v+8sqZqMTai/T0AIiItxEyCbBaxWA4oqlnlUTWTgKVtnFAf1eCDHJzGjpZnWLWBJCqJvDPx0dHRtowSYxxj8WsVKRz9Ld1wAAAABJRU5ErkJggg==`,"SettingIcon": `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAlCAYAAAAqXEs9AAADA0lEQVRYR81Y0VHbQBDdBYtv0oH14cV8BTrAFcSpILiCQAUhFQAVxB1gKog7wPlifMeM1EH8jS1tZhVJIymWtCfbM7lf3e2+29u379kI/9nCrniCIOhvNpv+tvO9Xi/0fT/sErsTIGPMNQD8aEk4IaKpK6iugH4CwFVLsjkRjQ4OKAiC0/V6/VuRaOV5nu/7/kqxN9/iXKG3t7dxHMdPmiSIOBoMBnPN3myPMyBjjPSO9JBmPRLRjWbjVkDCnPf392tEDD3Pm1XLba29YmYBtJVdWxKvmHlydnY2K35Ln33MzP2Tk5NpkZF5hQTMer2WZi0mWyDinJl/AcAXRSNvLQYzzxDxGRE/xnE8RsRiDrn8ZXb5HJDjU7i8gmbvAxHdysYEUFqdQHPyUHsyAiSAjDECRtsXh8KUzC1UTt1DgSjFjeP4VgB1rg4iCosWadRTALjYEfmqK6AQESfVoff6+to/Ojq6Q0RhZJcVogQ5Pj6u0r0p2MLzvFGTJFhrb5j53hGRuIPPSVM7gCrNjKaEy+VSKvVNCSqMomh0fn4e5nNICUptKWQabzabgJmlt5pWDiafQ9luY4w05Uvd6SiKfLmF8tawXC6nin66JKKMGH8HY7bSKtUOSCJyEmPNs1Uv6QTI87wPLv7GGPMAAF+bKtoIyFr7jZnv6gK4+htjjDx/42xCxLvBYPA9y5lXyFp7z8xt3kVtS12MHACUxdVF6WW8D4dDeYraVWNl2rgwJaIJKitTClYtc/FjBxNXPD4X6eA26DXfRT5mqXkDRDxl5k9dTVzeQ9baJ2YedwS172PTRMt6vd6LYqLuO3k1XjKxE5Z1FMO9AszIUvTUrTNjrwjKwUIi8ktalrJDbEiVUWLCRL92NV9zRLyoaY1cz0rSkWqPMGUlP1sAYJGZsB3M1zyKokkmynJxuZwwUn6XMfNjca45iaWUzhij+aMhqXIcx8/D4dCJwc6AHAmg9k//aJm2YR3+/QBX/1Rqai2g9Nk0jFwQ0aVL3F0AtfocAEjE0hXQH8QdoYFNZv39AAAAAElFTkSuQmCC`,
}export default dataUrl