Я ищу решение для получения прозрачного изображения плаката для видео html5.
У меня есть страница с фоновым изображением по всей ширине страницы (например, 1920x600).Я хотел бы показать только кнопку воспроизведения видео в середине этого фонового изображения.Видео и фоновое изображение имеют разные пропорции.После нажатия кнопки воспроизведения видео должно отображаться поверх фонового изображения в правильном соотношении сторон.
В качестве видеопроигрывателя html5 я использую Plyr .
Это фактическоереализация для плеера:
<style>
.container_plyr_teaser {
padding: 16px 0px 0px 0px;
max-width: 1000px;
margin: auto;
}
.plyr {
border-radius: 15px;
}
.plyr--stopped .plyr__controls {
opacity: 0;
pointer-events: none;
}
</style>
<div class="container_plyr_teaser">
<video class="js-player" controls playsinline preload="none" id="player11" data-plyr-config='{"volume": 0.3, "resetOnEnd": true, "enabled": true, "storage": { "enabled": false }, "quality": { "default": 720 } }'>
<source src="wolken_360p.mp4" type="video/mp4" size="360">
<source src="wolken_720p.mp4" type="video/mp4" size="720">
<source src="wolken_1080p.mp4" type="video/mp4" size="1080">
</video>
</div>
Моя первая идея - использовать прозрачное изображение плаката poster="Wolken_Poster_transparent_16x9.png"
приводит к черному видеоплееру.
Использование прозрачного изображения плаката приводит кчерный видеоплеер
Моя вторая идея заключалась в том, чтобы использовать точный вырез фоновой картинки в качестве изображения для постера. Это выглядит как нужно , но только для точного разрешения.
точный вырез фонового изображения в качестве видео постера
При неправильном разрешениив окне браузера вы получите непривлекательное перекрытие между изображением постера и фоновым изображением.
непривлекательное перекрытие
Идеи для другого решения?