Чтобы предотвратить загрузку видео до тех пор, пока они не понадобятся, вы можете использовать атрибут `preload` у тега `<video>`, установив его значение в "none". Вы также можете использовать `display: none` для контейнера и самих видео, чтобы они не загружались до тех пор, пока это не станет необходимо.
Однако важно отметить, что даже с установкой `display: none`, браузер может всё равно начать загрузку метаданных для видео. Чтобы избежать этого, вы можете динамически добавлять видео в DOM только тогда, когда они необходимы.
Вот пример того, как вы можете модифицировать ваш JavaScript-код:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Load Video</title>
</head>
<body>
<div id="video-container" style="display: none;">
<video id="video1" preload="none" controls>
<source src="video1.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
<video id="video2" preload="none" controls>
<source src="video2.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
<video id="video3" preload="none" controls>
<source src="video3.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
</div>
<button id="loadVideo1">Загрузить видео 1</button>
<button id="loadVideo2">Загрузить видео 2</button>
<button id="loadVideo3">Загрузить видео 3</button>
<script>
const videoContainer = document.getElementById('video-container');
function showVideo(videoId) {
// Сначала скрываем все видео
Array.from(videoContainer.getElementsByTagName('video')).forEach(video => {
video.style.display = 'none';
video.pause(); // Остановить видео
video.src = ''; // Освободить ресурсы
});
// Находим нужное видео
const video = document.getElementById(videoId);
if (video) {
video.style.display = 'block';
videoContainer.style.display = 'block'; // Показываем контейнер
video.load(); // Загружаем текущее видео
video.play(); // Автоматически запускаем воспроизведение
}
}
document.getElementById('loadVideo1').addEventListener('click', () => showVideo('video1'));
document.getElementById('loadVideo2').addEventListener('click', () => showVideo('video2'));
document.getElementById('loadVideo3').addEventListener('click', () => showVideo('video3'));
</script>
</body>
</html>
```
### Объяснение:
1. **Скрытие контейнера:** `display: none;` на контейнере `div` предотвращает отображение видео до тех пор, пока не будет нажата соответствующая кнопка.
2. **Динамическая загрузка видео:** При нажатии на кнопку соответствующее видео становится видимым, загружается и начинается воспроизведение. Остальные видео останавливаются и освобождают ресурсы.
3. **Продуктивность:** Потому что видео не загружаются заранее (метаданные также не загружаются), вы избегаете ненужного использования пропускной способности.
Этот подход позволяет оптимально управлять загрузкой видео и состоянием браузера, не загружая лишние ресурсы до тех пор, пока они не будут действительно нужны.