Достижения за определённый таймер времени в видео, как в Jit.su

Question

Достижения за определённый таймер времени в видео, как в Jit.su

Ken Kaneki Знаток (353), на голосовании 3 месяца назад

Доброго времени суток, поможете мне с одной проблемой в сайте? Я верстаю сайт, где можно посмотреть все аниме озвученной одной студией. И по просьбе владельца студии, нужно сделать достижения (ачивки), за определённый таймер времени в видео, как на сайте Jit.su. Например: таймер в видео дошёл до 6:07 и на экране видео появляется сразу достижение (Поздравляю вы познакомились с главным героем).
Верстаю я через HTML, CSS, JS и PHP, если знаете, как это осуществить, напишите пожалуйста, для меня это будет плюсом в знании по вёрстке сайтов

Answer 1

Для реализации системы достижений, которая будет отображаться в зависимости от времени в видео, можно использовать HTML, CSS и JavaScript. Вот пример, как это можно сделать:

### Шаг 1: HTML

Создайте структуру для видео и достижения:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Достижения в видео</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="video-container">
<video id="animeVideo" controls>
<source src="your-video-file.mp4" type="video/mp4">
Ваш браузер не поддерживает видео.
</video>
<div id="achievement" class="achievement"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```

### Шаг 2: CSS

Добавьте стили для достижения:

```css
.video-container {
position: relative;
}

.achievement {
position: absolute;
bottom: 20px;
left: 20px;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
border-radius: 5px;
display: none; / Скрыто по умолчанию /
transition: opacity 0.5s;
}
```

### Шаг 3: JavaScript

Используйте JavaScript для отслеживания времени видео и отображения достижений:

```javascript
const video = document.getElementById('animeVideo');
const achievement = document.getElementById('achievement');

// Достижения с тайм-кодами
const achievements = [
{ time: 367, message: "Поздравляю, вы познакомились с главным героем!" },
{ time: 720, message: "Вы увидели первый бой!" },
// Добавьте другие достижения по желанию
];

video.addEventListener('timeupdate', () => {
const currentTime = Math.floor(video.currentTime);

achievements.forEach(ach => {
if (ach.time === currentTime) {
showAchievement(ach.message);
}
});
});

function showAchievement(message) {
achievement.textContent = message;
achievement.style .display = 'block';
achievement.style .opacity = '1';

setTimeout(() => {
achievement.style .opacity = '0';
setTimeout(() => {
achievement.style .display = 'none';
}, 500); // Время, чтобы скрыть элемент
}, 3000); // Время, чтобы показать элемент
}
```

Answer 2

ну видимо этот Инспектор Жопидý знает толк в нейросети)

и что мы тут делаем?