html5 vedio 抓取,HTML5 Video 抓取视频海报

CSS

语言：

CSSSCSS

确定

*, *:after, *:before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box; }

html, body {

height: 100%; }

body {

margin: 0;

padding: 0;

position: relative;

background: #023454; }

.wrapper {

position: relative;

display: block;

width: 480px;

overflow: hidden;

margin: 0 auto;

margin-top: 100px; }

.group {

position: relative; }

canvas {

width: 480px;

height: 280px;

border: 5px solid #fff;

background: #382742; }

video {

display: block;

width: 150px;

height: 90px;

position: absolute;

top: 0;

right: 0;

border: 5px solid #fff; }

input:focus {

outline: none; }

.snapinput {

color: #fff;

font-family: Helvetica, Arial, sans-serif;

font-weight: 500;

font-size: 18px;

border-radius: 0;

line-height: 22px;

background: #002e4e;

padding: 13px;

margin-bottom: 10px;

width: 80%;

border: 3px solid rgba(0, 0, 0, 0);

transition: all 0.5s ease; }

.snapinput:focus {

background: #fff;

box-shadow: 0;

border: 3px solid #002e4e;

color: #002e4e;

outline: none;

padding: 13px;

transition: all 0.5s ease; }

.snapBtn {

float: right;

width: 20%;

font-family: Helvetica, Arial, sans-serif;

font-weight: 500;

font-size: 18px;

border-radius: 0;

line-height: 22px;

padding: 13px;

margin-bottom: 10px;

border: 3px solid #002e4e;

cursor: pointer;

background: #031c40;

color: #fff;

transition: all 0.3s; }

.snapBtn:hover {

background: #fff;

box-shadow: 0;

border: 3px solid #002e4e;

color: #002e4e;

transition: all 0.3s; }

.load {

background: url(https://dl.dropboxusercontent.com/u/23834858/fotos/loader.gif) no-repeat center center #002e4e;

padding: 0;

margin: 0; }