hookehuyr

fix(视频播放器): 修复视频封面缺失时的背景显示问题

在视频封面缺失时,播放器区域显示为透明背景,导致视觉不一致。为 VideoPlayer 组件添加黑色背景,并在 StudyDetailPage 中动态设置封面容器的背景色:有封面时透明,无封面时黑色。同时优化 useVideoPlayer 配置逻辑,避免传递空的 poster 属性。
......@@ -196,6 +196,7 @@ defineExpose({
height: 100%;
display: block;
aspect-ratio: 16/9;
background-color: #000;
}
.video-player.loading {
......
......@@ -276,42 +276,48 @@ export function useVideoPlayer(props, emit, videoRef, nativeVideoRef) {
return !canPlayHlsNatively();
});
const videoOptions = computed(() => ({
controls: true,
preload: "metadata",
responsive: true,
autoplay: props.autoplay,
playsinline: true,
playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
sources: videoSources.value,
html5: {
vhs: {
overrideNative: shouldOverrideNativeHls.value,
const videoOptions = computed(() => {
const base = {
controls: true,
preload: "metadata",
responsive: true,
autoplay: props.autoplay,
playsinline: true,
playbackRates: [0.5, 0.75, 1, 1.25, 1.5, 2],
sources: videoSources.value,
html5: {
vhs: {
overrideNative: shouldOverrideNativeHls.value,
},
nativeVideoTracks: false,
nativeAudioTracks: false,
nativeTextTracks: false,
hls: {
withCredentials: false
}
},
nativeVideoTracks: false,
nativeAudioTracks: false,
nativeTextTracks: false,
hls: {
withCredentials: false
}
},
techOrder: ['html5'],
userActions: {
hotkeys: true,
doubleClick: true,
},
controlBar: {
progressControl: {
seekBar: {
mouseTimeDisplay: {
keepTooltipsInside: true,
techOrder: ['html5'],
userActions: {
hotkeys: true,
doubleClick: true,
},
controlBar: {
progressControl: {
seekBar: {
mouseTimeDisplay: {
keepTooltipsInside: true,
},
},
},
},
},
...props.options,
errorDisplay: false,
}));
...props.options,
errorDisplay: false,
};
if (!base.poster) {
delete base.poster;
}
return base;
});
// 8. Video.js 挂载处理
const handleVideoJsMounted = (payload) => {
......
......@@ -10,8 +10,8 @@
<!-- 视频播放区域 -->
<div v-if="course.course_type === 'video'" class="w-full relative">
<!-- 视频封面和播放按钮 -->
<div v-if="!isPlaying" class="relative w-full" style="aspect-ratio: 16/9;">
<img :src="courseFile.cover" :alt="course.title" class="w-full h-full object-cover" />
<div v-if="!isPlaying" class="relative w-full" :style="{ aspectRatio: '16/9', backgroundColor: courseFile.cover ? 'transparent' : '#000' }">
<img v-if="courseFile.cover" :src="courseFile.cover" :alt="course.title" class="w-full h-full object-cover" />
<div class="absolute inset-0 flex items-center justify-center cursor-pointer"
@click="startPlay">
<div
......