hinzufügen Play-Taste, h1, P auf Video

Question

Wie ich dies in HTML/CSS entwerfen kann,

• Video ist als voll div Hintergrund in verschwommen Weise.

• Play-Taste - wird das Video abspielen.

• h1-Tag p-Tag oben auf Video

Bitte nehmen Sie mich in eine richtige Richtung, Dank

Answer 1

Try This:

$(document).ready(function(){ 
 
    $('.play').click(function() { 
 
     if($(this).parent().prev().get(0).paused){ 
 
      $(this).parent().prev().get(0).play(); 
 
      $(this).parent().prev().removeClass('blurEffect'); 
 
      $('.content').hide(); 
 
     } 
 
    }); 
 

 
    $('.video').on('ended',function(){ 
 
     $(this).addClass('blurEffect'); 
 
     $('.content').show(); 
 
    }); 
 
})

.wrapper { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.blurEffect { 
 
    -webkit-filter: blur(7px); 
 
    -o-filter: blur(7px); 
 
    -moz-filter: blur(7px); 
 
    -ms-filter: blur(7px); 
 
    filter: blur(7px); 
 
} 
 

 
.content { 
 
    position: absolute; 
 
    display: inline-block; 
 
    transform: translate(-50%,-50%); 
 
    top: 50%; 
 
    left: 50%; 
 
    color: #FFF; 
 
    width: 100%; 
 
    text-align: center; 
 
    z-index: 999; 
 
} 
 

 
.play { 
 
    font-size: 50px; 
 
    cursor: pointer; 
 
    border: 1px solid #FFF; 
 
    display: inline-block; 
 
    text-align: center; 
 
    padding: 5px 25px; 
 
} 
 

 
.play:hover { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <video class="video blurEffect"> 
 
     <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm> 
 
     <source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg> 
 
     <source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> 
 
     <source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp> 
 
    </video> 
 
     <div class="content"> 
 
      <div class="play">►</div> 
 
      <h1>Watch the movie</h1> 
 
      <p>Other text. Other text. Other text. Other text. </p> 
 
     </div> 
 
</div>

Answer 2

1. Sie können die CSS-Eigenschaft: position, left und top verwenden, um den Speicherort von HTML-Elementen zu ändern.

2.HTMLMediaElement eine Methode hat play() genannt, können Sie play() in Javascript aufrufen <video> machen Video zu starten. Informationen zu HTMLMediaElement finden Sie unter this page.

3. können Sie z-index CSS-Eigenschaft verwenden, um sicherzustellen, dass <button>, <h> und <p> oben auf ist. Informationen zum Z-Index finden Sie unter this page.

Answer 3

Ich habe ein einfaches Codepen-Dokument erstellt, das Sie in die richtige Richtung weist. Es verwendet nur HTML- und CSS-Elemente mit minimalem Code.

Es verwendet auch einen CSS-Filter namens Unschärfe, um das Hintergrundbild zu verwischen und die Skalierung zu verwenden, um die Größe des Bildes zu erhöhen, um die weißen Ränder zu ignorieren, die der Unschärfe-Filter anwendet.

LINK TO CODEPEN

HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

<div class="wrapper"></div> 

<div class="center"> 
    <i class="fa fa-play" aria-hidden="true"></i> 
    <h1>Watch the others</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit enean semper mattis elementum/</p> 
</div> 

CSS

body { 
    padding: 0; 
    margin: 0; 
} 

.wrapper { 
    position: fixed; 
    background: url(https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg) no-repeat center center fixed; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
    filter: blur(10px); 
    transform: scale(1.1); 
} 

.center { 
    position: absolute; 
    text-align: center; 
    width: 100%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    width: 100%; 
    color: #fff 
} 

.center i { 
    font-size: 3em; 
}