H5视频接口案例

H5视频接口案例
同一各浏览器的默认样式
效果如下:


H5视频接口案例_第1张图片
视频播放器.png



    
    $cysky$
    
    


视频播放器
00:00:00 \ 00:00:00
body{ padding: 0; margin: 0; font-family: "microsoft yahei","Helvetica",'simhei','sans-serif'; background-color: #f7f7f7; } a{ text-decoration: none; } .playerTitle{ width: 100%; margin: 0 auto; line-height: 100px; font-size: 40px; text-align: center; } .player{ width: 720px; height: 360px; margin: 0 auto; background: url("../images/loading.gif") center no-repeat; background-size: cover; position: relative; } video{ height: 100%; margin: 0 auto; display: none; } .controls { width: 720px; height: 40px; position: absolute; left: 0; bottom: -40px; background-color: black; } .controls .switch{ width: 20px; height: 20px; display: block; font-size: 20px; color: #fff; position: absolute; left: 10px; top: 10px; } .controls .expand{ width: 20px; height: 20px; font-size: 20px; position: absolute; right: 10px; top:10px; color: #fff; } .controls .progress{ width: 430px; height: 10px; position: absolute; left: 40px; bottom: 15px; background-color: #555; } .controls .progress .bar{ width: 100%; height: 100%; border-radius: 3px; cursor: pointer; position: absolute; left: 0; top: 0; opacity: 0; z-index: 999; } .controls .progress .elapse{ width: 0%; height: 100%; background-color: #fff; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 3; } .controls .progress .loaded{ width: 60%; height: 100%; background-color: #999; border-radius: 3px; position: absolute; left: 0; top: 0; z-index: 2; } .controls .time{ height: 20px; position: absolute; left: 490px; top: 10px; color: #fff; font-size: 14px; }

你可能感兴趣的:(H5视频接口案例)