Невозможно настроить цвет фона видео::cue на macOS ⇐ CSS

[Anonymous]

Мой веб-сайт использует проигрыватель hls.js для воспроизведения потока с несколькими текстовыми дорожками (HLS). Я хочу удалить черный фон текстовых дорожек по умолчанию, сделать его прозрачным. Он работает на окнах. Но не в macOS (Safari, Chrome, Edge). Я пробовал установить цвет фона на прозрачный или rgba(0,0,0,0), но это не помогает.
Я сделал демо-версию на codesandbox:
https://codesandbox.io/p/sandbox/rmggsv ... 2C1-85%2C1
https://rmggsv.csb.app/
Мой веб-сайт выглядит просто, как показано ниже:

Код: Выделить всё

Custom background Vide Cue



video::cue {
background-color: rgba(0, 0, 0, 0);
background-color: transparent;
}



HLS.js Simple Example


⏪ Prev 10s
⏩ Next 10s



const video = document.getElementById("video");
const hlsUrl =
"https://vodcdn.fptplay.net/POVOD/encoded/2025/06/14/thefirstnightwiththeduke-2025-kr-001-v4-ea995d6e9c86786a/H264/master.m3u8"; // sample HLS stream

if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(hlsUrl);
hls.attachMedia(video);

hls.on(Hls.Events.MANIFEST_PARSED, () => {
console.log("HLS manifest loaded");
video.play();
});

hls.on(Hls.Events.SUBTITLE_TRACKS_UPDATED, (_, data) => {
const tracks = data.subtitleTracks;
console.log("Subtitle tracks:", tracks);

if (tracks.length > 0) {
// Find default or first available subtitle track
const defaultIndex = tracks.findIndex((t) => t.default);
const firstIndex = defaultIndex !== -1 ? defaultIndex : 0;

hls.subtitleTrack = firstIndex;
console.log(
`Default subtitle track set: ${
tracks[firstIndex].name || tracks[firstIndex].lang
}`
);
} else {
console.log("No subtitle tracks found");
}
});
} else if (video.canPlayType("application/vnd.apple.mpegurl")) {
// For Safari (it supports HLS natively)
video.src = hlsUrl;
video.addEventListener("loadedmetadata", () => video.play());
} else {
alert("Your browser does not support HLS playback.");
}

// Skip buttons
document.getElementById("next10").addEventListener("click", () => {
video.currentTime = Math.min(video.currentTime + 10, video.duration);
});

document.getElementById("prev10").addEventListener("click", () => {
video.currentTime = Math.max(video.currentTime - 10, 0);
});

Я надеюсь получить какие-либо советы по решению этой проблемы.

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-on-macos