Присвоить анимацию блоку, но поставить на паузу css js

Question

polzunok.style.animation = 'progress ' + video.duration + 's linear infinite ';
polzunok.style.animationPlayState = 'paused';

Возможно ли сразу присвоить анимацию и в тоже время поставить на паузу, то есть одной строчкой, чтобы второй не было.

Answer 1

Исходя из предыдущих вопросов допускаю, что хотите сделать прогрессбар на CSS для элемента видео. Можно заставить CSS-анимацию стартировать и останавливаться одновременно с командами play() и pause() для видео. Но такой прогрессбар не будет реагировать на перемотку в самом плеере и после таковой будет продолжать дальше двигаться с того же самого места:

<style>
#polzunok{
    width: 300px;
    height: 15px;
    background: red;
}
@keyframes progress{
    from{width: 0px;}
    to{width: 300px;}
}
</style>
<div id=polzunok></div><br />
<video id=video src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4' width="300" controls></vide o>
<script>
video.onloadeddata = () => polzunok.style.animation = 'progress ' + video.duration + 's linear infinite paused';
video.onplay = () => polzunok.style.animationPlayState = 'running';
video.onpause = () => polzunok.style.animationPlayState = 'paused';
</script>

К тому же невозможно таким способом с помощью клика на ползунок установить текущее место воспроизведения или хотя бы изменить ширину ползунка.

Answer 2

Если в коде предыдущего ответа добавить JS-управление, то оказывается можно восполнить все эти недочёты и заставить прогрессбар на CSS-анимации быть полнофункционально привязанным к видео:

<style>
#contayner{
    width: 300px;
    border-style: solid;
}
#polzunok{
    width: 0px;
    height: 15px;
    background: red;
}
</style>
<style></style>
<video id=video src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4' width="300" controls></video><br /><br />
<div id=contayner><div id=polzunok></div></div>
<script>
let progresswidth = 300; // ширина прогрессбара
const setstyle = () => document.querySelectorAll('style')[1].innerText = '@keyframes progress{from{width: '+video.currentTime/video.duration*progresswidth+'px;}to{width: ' + progresswidth + 'px;}}';
const widthpolzunok = () => polzunok.style.width = video.currentTime / video.duration * progresswidth + 'px';
video.onplay = () => {
    polzunok.style.animation = 'progress ' + (video.duration - video.currentTime) + 's linear infinite';
    setstyle();
}
video.onpause = () => {
    polzunok.style.animation = '';
    widthpolzunok();
}   
video.onseeked = () => {
    setstyle();
    widthpolzunok();
}
contayner.onclick = polzunok.onclick = (e) => {
    polzunok.style.width = e.pageX - 10 + 'px';
    video.currentTime = (e.pageX - 10) / progresswidth * video.duration;
}
</script>

И при этом даже не пришлось использовать ни setInterval(), ни requestAnimationFrame().

БЛОГ НА HUSL

Присвоить анимацию блоку, но поставить на паузу css js

Ответы (2 шт):