我正在寻找一种方法来获取 HTML5 视频的透明海报图像。
我有一个页面,页面宽度为全屏(例如 1920x600)并带有背景图片。我想要在这个背景图片中间只显示视频播放按钮。视频和背景图片具有不同的长宽比。点击播放按钮后,视频应以正确的长宽比显示在背景图片上。
我使用 Plyr 作为 HTML5 视频播放器。
以下是播放器的实际实现:
我的第一个想法是使用透明的海报图片
我有一个页面,页面宽度为全屏(例如 1920x600)并带有背景图片。我想要在这个背景图片中间只显示视频播放按钮。视频和背景图片具有不同的长宽比。点击播放按钮后,视频应以正确的长宽比显示在背景图片上。
我使用 Plyr 作为 HTML5 视频播放器。
以下是播放器的实际实现:
<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"
,但结果是黑色视频播放器。
使用透明的海报图片会导致黑色视频播放器。
我的第二个想法是使用与背景图片的确切剪影作为视频海报图像。这看起来很理想,但仅适用于确切的分辨率。
使用背景图片的确切剪影作为视频海报图像。
如果浏览器窗口的分辨率不正确,则会在视频海报图像和背景图像之间产生不美观的重叠。
不美观的重叠
还有其他解决方案的想法吗?