svg+js实现一个自定义皮肤的html5视频播放器效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：svg+js实现一个自定义皮肤的html5视频播放器效果代码，支持锁屏、播放速度设置、全屏等功能。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <style>
        .playerContainer{position:relative;width:100%;height:400px;background-color:#000}
        :root{--accent:#0094ff;--main:#fff}.icon{cursor:pointer;height:30px;width:35px;margin-right:4px;margin-left:4px;border:0;background:0;filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(92deg) brightness(104%) contrast(101%)}#video-controls{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;grid-template-areas:"progressbar" "controls-main";position:absolute;bottom:4px;width:100%;padding-bottom:7px;box-sizing:border-box;opacity:0;-webkit-transition:opacity .3s;-moz-transition:opacity .3s;-o-transition:opacity .3s;-ms-transition:opacity .3s;transition:opacity .3s;background:#0007d}.playerContainer:hover #video-controls{opacity:.9}.progress{grid-area:progressbar;display:grid;grid-template-columns:14% 72% 14%;grid-template-rows:1fr;grid-template-areas:"ctime seek ttime";cursor:pointer;width:100%;margin:auto;border-radius:6px;left:4px;bottom:100%;transition:height .1s ease-in-out}.current-time{grid-area:ctime;color:#fff;margin:auto}.total-time{grid-area:ttime;color:#fff;margin:auto}#seek{cursor:pointer;grid-area:seek;width:100%;outline:0;height:5px;margin:auto}.controls-main{grid-area:controls-main;width:100%;margin:auto;height:100%;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr;grid-template-areas:"controls-left play controls-right";justify-content:space-between}.controls-left{grid-area:controls-left;align-items:center;display:flex;padding-left:14px}.controls-right{grid-area:controls-right;align-items:center;display:flex;justify-content:flex-end;padding-right:14px}#center_p{display:flex;grid-area:play;cursor:pointer;text-align:center;justify-content:center}.volume{display:flex;align-items:center}#volumeSeek{cursor:pointer;border-radius:6px;width:80px;height:5px;margin:auto}#unlock{position:absolute;left:14px;z-index:1;top:14px;display:none}#superplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block}#speed-list{cursor:pointer;display:none;background:#131212e3;color:#fff;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;min-width:160px;text-align:center;position:absolute;top:0;right:0}.speed-list p{color:var(--main);padding:5px;cursor:default}.speed-list p:hover{color:var(--accent);font-weight:bold}.fullscreen{cursor:pointer;display:flex;justify-content:center}@media only screen and (max-width:600px){.icon{cursor:pointer;height:25px;width:30px;margin-right:4px;margin-left:4px;border:0;background:0;filter:invert(100%) sepia(0%) saturate(1%) hue-rotate(92deg) brightness(104%) contrast(101%)}#video-controls{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;grid-template-areas:"progressbar" "controls-main";position:absolute;bottom:4px;width:100%;padding-bottom:0;box-sizing:border-box;opacity:0;-webkit-transition:opacity .3s;-moz-transition:opacity .3s;-o-transition:opacity .3s;-ms-transition:opacity .3s;transition:opacity .3s;background:#0007d}.playerContainer:hover #video-controls{opacity:.9}.progress{grid-area:progressbar;display:grid;grid-template-columns:14% 72% 14%;grid-template-rows:1fr;grid-template-areas:"ctime seek ttime";cursor:pointer;width:100%;margin:auto;border-radius:6px;left:4px;bottom:100%;transition:height .1s ease-in-out}.current-time{grid-area:ctime;color:#fff;margin:auto}.total-time{grid-area:ttime;color:#fff;margin:auto}#seek{cursor:pointer;grid-area:seek;width:100%;outline:0;height:5px;margin:auto}.controls-main{grid-area:controls-main;width:100%;margin:auto;height:100%;display:grid;grid-template-columns:40% 20% 40%;grid-template-rows:1fr;grid-template-areas:"controls-left play controls-right";justify-content:space-between}.controls-left{grid-area:controls-left;align-items:center;display:flex;padding-left:14px}.controls-right{grid-area:controls-right;align-items:center;display:flex;justify-content:flex-end;padding-right:14px}#play{grid-area:play;cursor:poi.........完整代码请登录后点击上方下载按钮下载查看