Замаскированный аудиоплеер отлично работает в Firefox, но не в Chrome ⇐ CSS

[Anonymous]

Я использую следующий HTML, CSS и Javascript, чтобы замаскировать видеоплеер под аудиоплеер.
Он отлично работает в Firefox, но в Chrome нажатие кнопки воспроизведения на самом деле не работает. играть во что угодно.
Что мешает этому работать в Chrome и как заставить его работать и в Chrome?
Обновить< /strong>:
Я хочу подробнее остановиться на наблюдении, которое, по моему мнению, может оказаться полезным (особое спасибо @AHaworth за аналогичное наблюдение в комментариях):Если я удалю iframe { display: none; и видеоплеер изначально загружается вместе с аудиоплеером, элементы управления аудиоплеером (по-прежнему) НИКАКОГО влияния на видеоплеер не оказывают. Однако, если я нажму «Воспроизвести» на видеоплеере, а затем полностью скрою его с помощью CSS, я теперь смогу полностью управлять видеоплеером через аудиоплеер... даже если видеоплеер полностью скрыт.
Это наблюдение аналогичное. @AHaworth в комментариях: «Ошибка в консоли, которая кажется наиболее актуальной, заключается в том, что невозможно воспроизвести видео, поскольку пользователь не взаимодействовал».
Поэтому правильный подход — принудительно установить «интерактивность» < strong>но как?
Ознакомьтесь с CodePen здесь.

< div class="snippet-code">

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

let player;
const playBtn = document.getElementById('play');
const rewindBtn = document.getElementById('rewind');
const forwardBtn = document.getElementById('forward');
const progressBar = document.getElementById('progress-bar');
const currentTimeEl = document.getElementById('current-time');
const endTimeEl = document.getElementById('end-time');
const speedControl = document.getElementById('speed-control');
const volumeBtn = document.getElementById('volume-btn');
const volumeSlider = document.getElementById('volume-slider');
let duration = 0;

window.addEventListener('load', function() {
player = new playerjs.Player(document.getElementById("bunny-stream-embed"));
player.on('ready', () => {
console.log('Player is ready');
player.getDuration(d => {
duration = d;
endTimeEl.innerText = formatTime(duration);
progressBar.max = duration;
});

// Set initial volume to 70%
player.setVolume(70);
volumeSlider.value = 70;
updateVolumeIcon(0.7);

// Set up event listeners after player is ready
setupEventListeners();
});
player.on('timeupdate', (data) => {
currentTimeEl.innerText = formatTime(data.seconds);
progressBar.value = data.seconds;
});
player.on('play', () => {
playBtn.innerHTML = '❚❚'; // Pause icon
});
player.on('pause', () => {
playBtn.innerHTML = '►'; // Play icon
});
});

function setupEventListeners() {
playBtn.addEventListener('click', () => {
player.getPaused(paused => {
if (paused) {
player.play();
} else {
player.pause();
}
});
});
rewindBtn.addEventListener('click', () => {
player.getCurrentTime(currentTime => {
player.setCurrentTime(Math.max(0, currentTime - 15));
});
});
forwardBtn.addEventListener('click', () => {
player.getCurrentTime(currentTime => {
player.setCurrentTime(Math.min(duration, currentTime + 15));
});
});
progressBar.addEventListener('input', (e) => {
const time = parseFloat(e.target.value);
player.setCurrentTime(time);
});
volumeSlider.addEventListener('input', (e) => {
const volume = e.target.value;
player.setVolume(volume);
updateVolumeIcon(volume);
});
speedControl.addEventListener('click', () => {
const speedOptions = [1, 1.25, 1.5, 2];
let currentSpeed = parseFloat(speedControl.innerText.replace('x', ''));
const newSpeed = speedOptions[(speedOptions.indexOf(currentSpeed) + 1) % speedOptions.length];
speedControl.innerText = `${newSpeed}x`;
player.setPlaybackRate(newSpeed);
});
volumeBtn.addEventListener('click', () => {
player.getVolume(volume => {
if (volume > 0) {
player.setVolume(0);
volumeSlider.value = 0;
} else {
player.setVolume(70);
volumeSlider.value = 70;
}
updateVolumeIcon(volume > 0 ? 0 : 0.7);
});
});
}

function updateVolumeIcon(volume) {
if (volume > 0.5) {
volumeBtn.innerHTML = '🔊';
} else if (volume >  0) {
volumeBtn.innerHTML = '🔉';
} else {
volumeBtn.innerHTML = '🔇';
}
}

function formatTime(seconds) {
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}

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

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

iframe {
display: none;
}

.audio-player {
background-color: #1e3d59;
color: white;
width: 100%;
max-width: 800px;
border-radius: 10px;
overflow: hidden;
}

.player-top {
display: flex;
align-items: center;
padding: 20px;
}

.cover {
width: 60px;
height: 60px;
border-radius: 5px;
margin-right: 15px;
}

.info {
flex-grow: 1;
}

.title {
margin: 0;
font-size: 18px;
}

.author {
margin: 5px 0 0;
font-size: 14px;
opacity: 0.8;
}

.bookmark {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}

.player-bottom {
background-color: #102c43;
padding: 15px 20px;
}

.progress {
display: flex;
align-items: center;
margin-bottom: 15px;
}

#progress-bar {
flex-grow: 1;
margin: 0 10px;
cursor: pointer;
}

.controls {
display: flex;
justify-content: space-between;
align-items: center;
}

.control-btn {
background: none;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
}

.play-pause {
font-size: 24px;
}

.playback-rate,
.volume-control {
display: flex;
align-items: center;
}

#volume-slider {
width: 80px;
margin-left: 10px;
}

input[type="range"] {
-webkit-appearance: none;
background: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
background: #ffffff50;
border-radius: 2px;
}

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
cursor: pointer;
margin-top: -4px;
}

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

    

https://iframe.mediadelivery.net/embed/197133/dc48a09e-d9bb-420a-83d7-72dc2304c034?autoplay=false&preload=true



[img]https://images.blinkist.io/images/books/5bf9dc9c6cee070007cab481/1_1/470.jpg[/img]

Atomic Habits
James Clear

★



00:00

00:00

←  15
►
15 →

1x

🔊

Подробнее здесь: https://stackoverflow.com/questions/790 ... -in-chrome