如何使html5视频海报图像透明以在视频不播放时看到背景图像答案

【问题标题】：How to make a html5 video poster image transparent to see the background image while video is not playing如何使html5视频海报图像透明以在视频不播放时看到背景图像
【发布时间】：2018-11-23 13:31:56
【问题描述】：

我正在寻找一种为 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" 会产生黑色的视频播放器。

Using a transparent poster image results in a black video player

我的第二个想法是使用背景图片的精确剪裁作为视频海报图片。 这看起来符合要求，但仅限于精确的分辨率。

exact cutout of the background picture as video poster

如果浏览器窗口的分辨率不正确，您会在视频海报图像和背景图像之间获得没有吸引力的重叠。

unattractive overlap

另一个解决方案的想法？

【问题讨论】：

隐藏视频，只保留一个播放按钮，当按下按钮时，在图像顶部播放隐藏的视频
感谢您的想法。你有一些示例代码如何隐藏视频并只保留播放按钮？

标签： css html html5-video poster

【解决方案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>

【讨论】：