添加视频

Question

我如何在HTML/CSS设计这个播放按钮，H1，P，

• 视频是模糊的路全格的背景。

• 播放按钮 - 将播放视频。在视频的顶部

• h1标签p标签

请把我放在一个正确的方向，谢谢

Answer 1

试试这个：

$(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.您可以使用CSS属性：position,left和top更改html元素的位置。

2.HTMLMediaElement有一个名为play()方法，你可以在JavaScript调用play()使<video>开始播放视频。关于HTMLMediaElement，请看this page。

可以使用z-index CSS属性，以确保<button>，<h>和<p>是之上。关于z-index，请看this page。

Answer 3

我已经创建了一个简单的Codepen文档，它将指向正确的方向。它只使用HTML和CSS元素，只用最少的代码。

它还使用称为模糊的CSS滤镜来模糊背景图像，并使用比例增加图像的大小以忽略模糊滤镜应用的白色边框。

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; 
}