<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
*{
margin:0px;padding:0px;
}
#v1{
width:300px;
height:225px;
}
#divVideo{
width:300px;height:225px;border:1px solid black;
}
video::-webkit-media-controls {
overflow: hidden !important;
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
#divVideo{
width: 300px;
margin: 7px;
padding: 5px;
min-height: 200px;
position:relative;
display: inline-block;
background: -webkit-gradient(linear, 0% 20%, 0% 1000%, from(#fff), to(#fff), color-stop(.1,#f3f3f3));
border: 1px solid #ccc;
-webkit-box-shadow: 0px 3px 30px rgba(0, 0, 0, 0.1) inset;
-webkit-border-bottom-right-radius: 6px 50px;
}
#divVideo:before{
content: '';
width: 50px;
height: 100px;
position:absolute;
bottom:0; right:0;
-webkit-box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.1);
z-index:-1;
-webkit-transform: translate(-35px,-40px)
skew(0deg,30deg)
rotate(-25deg);
}
#divVideo:after{
content: '';
width: 100px;
height: 100px;
top:0; left:0;
position:absolute;
display: inline-block;
z-index:-1;
-webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(2deg)
translate(20px,25px)
skew(20deg);
}
</style>
</head>
<body>
<div id="divVideo">
<video controls id="v1">
<source src="/video/wheel02.mp4"/><br/>输入你的视频地址
</video>
<!--<input type="button" value="暂停" id="btnPause"/>-->
<!--<input type="button" value="开始" id="btnPlay"/>-->
<!--<input type="button" value="重播" id="btnLoop"/>-->
<!--<input type="button" value="静音" id="btnMuted"/>-->
</div>
</body>
</html>
应该比较简单,不用什么太多的说明 html5播放实践完成地址