Как сделать изображение постера html5 прозрачным, чтобы видеть фоновое изображение, когда видео не воспроизводится - PullRequest
0 голосов
/ 23 ноября 2018

Я ищу решение для получения прозрачного изображения плаката для видео 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" приводит к черному видеоплееру.

Использование прозрачного изображения плаката приводит кчерный видеоплеер

Моя вторая идея заключалась в том, чтобы использовать точный вырез фоновой картинки в качестве изображения для постера. Это выглядит как нужно , но только для точного разрешения.

точный вырез фонового изображения в качестве видео постера

При неправильном разрешениив окне браузера вы получите непривлекательное перекрытие между изображением постера и фоновым изображением.

непривлекательное перекрытие

Идеи для другого решения?

1 Ответ

0 голосов
/ 26 ноября 2018

Мое решение выглядит следующим образом:

<!-- 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>
...