在视频上添加播放按钮、h1、P答案

【问题标题】：Add play button, h1, P on video在视频上添加播放按钮、h1、P
【发布时间】：2017-10-11 06:30:27
【问题描述】：

如何在 HTML/CSS 中进行设计，

视频以模糊的方式显示为完整的 div 背景。
播放按钮 - 将播放视频。
h1标签p标签在视频之上

请给我一个正确的方向，谢谢

【问题讨论】：

请提供一个最小、完整和可验证的示例。请阅读此stackoverflow.com/help/mcve 不要提供任何图像或视频的外部链接

标签： javascript html css html5-video

【解决方案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>

【讨论】：

我同意你的回答
感谢@eshan，效果很好。但唯一缺少的是，视频不会显示为模糊的背景，也不会根据全屏调整宽度。

【解决方案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。

【讨论】：

【解决方案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;
}

【讨论】：