[英]Add play button, h1, P on video
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>
1. You can use CSS property: position
, left
and top
to change location of html elements. 1.您可以使用CSS属性:
position
, left
和top
来更改html元素的位置。
2. HTMLMediaElement
has a method named play()
,you can call play()
in javascript to make <video>
to start playing video. 2.
HTMLMediaElement
有一个名为play()
的方法,您可以在javascript中调用play()
以使<video>
开始播放视频。 About HTMLMediaElement,look at this page . 关于HTMLMediaElement,请看此页面 。
3. You can use z-index
CSS property to make sure that <button>
, <h>
and <p>
is on top of . 3.您可以使用
z-index
CSS属性来确保<button>
, <h>
和<p>
在的顶部。 About z-index,look at this page . 关于z-index,请看此页面 。
I have created a simple Codepen document that will point you in the right direction. 我创建了一个简单的Codepen文档,它将为您指明正确的方向。 It's using HTML and CSS elements only, with minimal code.
它仅使用HTML和CSS元素,且代码最少。
It's also using a CSS filter called blur to blur the background image and using scale to increase the size of the image to ignore the white borders the blur filter applies. 它还使用称为模糊的CSS过滤器来模糊背景图像,并使用缩放来增加图像的大小以忽略模糊过滤器所应用的白色边框。
HTML 的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 的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.