在视频

Question

如何在HTML / CSS中设计

• 视频以模糊的方式作为完整的div背景。

• 播放按钮 - 将播放视频。

• 视频顶部的h1标记p标记

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

Answer 1

试试这个：

＆＃13;

＆＃13;

$(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();
    });
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

1。您可以使用CSS属性：position，left和top来更改html元素的位置。

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

3。您可以使用z-index CSS属性来确保<button>，<h>和<p>位于首位。关于z-index，请查看this page。

Answer 3

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

它还使用名为blur的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;
}