Атрибут data-* тега <video>
Описание
Атрибуты data-* позволяют хранить дополнительную информацию в элементе <video>. Эти пользовательские атрибуты не влияют на отображение видео, но могут использоваться JavaScript для управления воспроизведением и настройки поведения плеера.
<video
data-player-id="main-video"
data-autoplay="true"
data-volume="0.5"
src="video.mp4"
controls>
</video>
Распространенные data-атрибуты для видео:
| Атрибут | Пример значения | Назначение |
|---|---|---|
data-player-id |
"main-player" | Уникальный идентификатор плеера |
data-autoplay |
"true"/"false" | Флаг автоматического воспроизведения |
data-volume |
"0.5" (0-1) | Начальный уровень громкости |
data-poster-size |
"cover"/"contain" | Способ отображения постера |
Пример доступа к data-атрибутам через JavaScript:
<video id="myVideo" data-loop="true" src="video.mp4"></video>
<script>
const video = document.getElementById('myVideo');
// Чтение data-атрибута
const shouldLoop = video.dataset.loop === 'true';
// Установка параметров
if(shouldLoop) {
video.loop = true;
}
</script>
Рекомендации по именованию:
- Используйте kebab-case (дефисы между словами)
- Будьте последовательны в именовании
- Избегайте слишком общих имен (data-video, data-settings)
- Для сложных данных используйте JSON в одном атрибуте
Пример с JSON в data-атрибуте:
<video
data-player-options='{"autoplay":true,"muted":true,"playbackRates":[1,1.5,2]}'
src="video.mp4">
</video>
<script>
const video = document.querySelector('video');
const options = JSON.parse(video.dataset.playerOptions);
// Применяем настройки
video.autoplay = options.autoplay;
video.muted = options.muted;
</script>
Ограничения:
- Значения всегда строковые (нужно преобразовывать)
- Нет встроенной валидации данных
- Могут конфликтовать с другими атрибутами
Практический пример кастомного плеера:
<div class="video-player">
<video
data-src="video.mp4"
data-poster="poster.jpg"
data-controls="custom">
</video>
<div class="custom-controls" hidden>
<button class="play-btn">▶️</button>
</div>
</div>
<script>
// Инициализация кастомного плеера
document.querySelectorAll('.video-player').forEach(player => {
const video = player.querySelector('video');
const src = video.dataset.src;
if(src) {
video.src = src;
video.poster = video.dataset.poster;
if(video.dataset.controls === 'custom') {
player.querySelector('.custom-controls').hidden = false;
}
}
});
</script>