Блог

Главная - Вопросы по программированию - Как мне добавить текст в видео, подобное PayPal?

Как мне добавить текст в видео, подобное PayPal?

#javascript #html #css #video #paypal

#javascript #HTML #css #Видео #paypal

Вопрос:

В PayPal есть слоган «Вы делаете это, мы заплатим» поверх видео с маленькой кнопкой воспроизведения рядом в углу. Когда вы нажимаете на эту кнопку воспроизведения, видео начинает воспроизводиться, вызывая темное наложение, которое когда-то накладывалось на видео, когда оно не воспроизводилось, плавно исчезает, а слоган все еще там. Как это делается? Не могли бы вы привести примеры, пожалуйста, я думаю, что эффект довольно аккуратный.

Спасибо!

Ответ №1:

ДЕМОНСТРАЦИЯ

Вот пример отображения полноэкранного видео из <video> тега с использованием только css для полноэкранного режима и далее по мере необходимости текст поверх изображения с помощью position: absolute

css

 .videoInsert {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}
h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px;
    z-index: 999999999999;
    position: absolute;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    height: 100px;
    width: 80%;
    text-align: center;
}

HTML

 <div class="wrapper">
    <video class="videoInsert">
        <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
    </video>
</div>
<h2><span>A nice office video:<br />Yes it is!</span></h2>
Метки: