Проигрывание видео HTML5 при наведении, ошибка DOM, как исправить?

Question

[MrLisovich]

Суть вопроса следующая.

Есть блок со вставленным в него видео, перед видео стоит картинка-постер. По задумке дизайнера, при наведении на этот блок, картинка-постер плавно исчезает, а видео плавно появляется и начинает проигрываться. Когда курсор вне блока, видео плавно затухает, а картинка плавно появляется назад.

Проблемы:

1. После загрузки страницы, видео при наведении не воспроизводится, до того момента пока мы не кликнем вне блока, хотя бы раз. Браузер выдает ошибку - (Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD). Я не силен в JavaScript, решение для этого нашел на просторах нета, и к сожалению как бы я не пытался понять, что написано в документации по ссылке, до меня не доходит что не так. Как это исправить?

2. По задумке должен присутствовать эффект fadeIn - fadeOut. Плавного появления видео, у меня реализовать получилось, как сделать обратный эффект, с затуханием видео и плавным появлением назад картинки-постера?

На данный момент все функционирует не должным образом. Буду признателен за любые разъяснения на эту тему.

Ссылка на CodePen

Comments

[citizen55]

because the user didn't interact with the document first
потому что пользователь не совершал действий в документе.
В связи с тем, что многие сайты злоупотребляют видео и аудио которые запускают проигрывание самостоятельно, современные браузеры вводят ограничение, и пользователь должен начать взаимодействие со страницей, только тогда будет дано разрешение на проигрывание.
По сути основное
Chrome's autoplay policies are simple:

Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
Выключение звука всегда разрешено
Автопроигрывание разрешено если:
Пользователь взаимодействовал с доменом (клик, тап и тд)
На ПК порог вовлеченности будет пересечен если пользователь уже включал видео со звуком.
На мобильном веб приложение должно быть добавлено как PWA на экран.
Окно верхнего уровня может передавать разрешение в его iframe.

Ниже рекомендации что делать разработчикам в новых условиях.

2. video{
transition: opacity 1s ease;
}