如何使html5视频海报图像透明，以便在视频未播放时看到背景图像

Question

我正在寻找一个解决方案，为html5视频获得透明海报图像。

我有一个页面的背景图片覆盖了页面的整个宽度(例如1920x600(。我只想在此背景图片中间显示视频播放按钮。视频和背景图片具有不同的纵横比。按下播放按钮后，视频应以正确的纵横比显示在背景图片上。

作为html5视频播放器，我使用Plyer。

这是玩家的实际实现：

<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"会产生一个黑色视频播放器。

使用透明海报图像会导致黑色视频播放器

我的第二个想法是使用背景图片的精确剪切作为视频海报图像这看起来是所需的，但仅用于精确的分辨率。

背景图片的精确剪切作为视频海报

如果浏览器窗口的分辨率不正确，视频海报图像和背景图像之间会出现不吸引人的重叠。

不吸引人的重叠

另一个解决方案的想法？

Answer 1

我的解决方案如下所示：

<!-- generate an extra button to start the video -->    
<button id="button_teaser" onclick="playPause()">Play</button>
<video class="js-player" poster="poster.jpg" controls playsinline preload="none" id="video_teaser" data-plyr-config='{"volume": 0.3, "resetOnEnd": true, "enabled": true, "storage": { "enabled": false }, "quality": { "default": 720 } }'>
<source src="video_360p.mp4" type="video/mp4" size="360">   
<source src="video_720p.mp4" type="video/mp4" size="720">
<source src="video_1080p.mp4" type="video/mp4" size="1080">
</video>
<!-- hide video -->
<script>
$('#video_teaser').hide();
</script>
<!-- after clicking the generated play button, hide play button and show video -->
<script>
$(document).ready(function(){
$('#button_teaser').click(function(){
$('#video_teaser').show();
$('#button_teaser').hide();
$('#video_teaser').get(0).play();
});
});
</script>
<!-- after playing video automatically hide video and show play button again -->
<script>
$(document).ready(function(){
$('#video_teaser').on('ended',function(){
$('#video_teaser').hide();
$('#button_teaser').show();
});
});
</script>