svg+js实现一个自定义皮肤的html5视频播放器效果代码
代码语言：html
所属分类：多媒体
代码描述：svg+js实现一个自定义皮肤的html5视频播放器效果代码，支持锁屏、播放速度设置、全屏等功能。
代码标签： 自定义 皮肤 的 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:pointer;text-align: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;font-size:10px}.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}}
</style>
</head>
<body>
<!-- Video Player Container -->
<div class="playerContainer"><video class="xdPlayer" width="100%" height="100%" preload="auto" poster=""><source src="//repo.bfw.wiki/bfwrepo/video/5d8741d7df44b.mp4" type="video/mp4" /><!-- You Can Also Add Other Video Formet Source --></video>
<!-- Video Controls -->
<div id="superplay" title="Play"><svg class="icon" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17.804 17.804" style="enable-background:new 0 0 17.804 17.804;" xml:space="preserve"><g><g id="c98_play"><path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/></g><g id="Capa_1_78_"></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></div>
<div id="unlock" title="UnLock"><svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6h2c0-1.66 1.34-3 3-3s3 1.34 3 3v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm0 12H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg></div>
<div id='speed-list'>
<p class='speed-item' data-speed='0.5'>0.5x</p>
<p class='speed-item' data-speed='0.75'>0.75x</p>
<p class='speed-item' data-speed='1' class='active'>1x</p>
<p class='speed-item' data-speed='1.5'>1.5x</p>
<p class='speed-item' data-speed='2'>2x</p>
</div>
<div id="video-controls">
<div class="progress"><span class="current-time">00/00</span><input class="seek" id="seek" value="0" min="0" type="range" step="1"><span class="total-time">00/00</span></div>
<div class='controls-main'>
<div class='controls-left'>
<div class='volume'>
<div class='icon'><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M3 9v6h4l5 5V4L7 9H3zm7-.17v6.34L7.83 13H5v-2h2.83L10 8.83zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77 0-4.28-2.99-7.86-7-8.77z"/></svg></div>
<div class='volume'><input id="volumeSeek" value="1" type="range" max="1" min="0" step="0.01"></div>
</div>
</div>
<div id="center_p">
<div class="icon" id="rew"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8zm-1.1 11h-.85v-3.26l-1.01.31v-.69l1.77-.63h.09V16zm4.28-1.76c0 .32-.03.6-.1.82s-.17.42-.29.57-.28.26-.45.33-.37.1-.59.1-.41-.03-.59-.1-.33-.18-.46-.33-.23-.34-.3-.57-.11-.5-.11-.82v-.74c0-.32.03-.6.1-.82s.17-.42.29-.57.28-.26.45-.33.37-.1.59-.1.41.03.59.1.33.18.46.33.23.34.3.57.11.5.11.82v.74zm-.85-.86c0-.19-.01-.35-.04-.48s-.07-.23-.12-.31-.11-.14-.19-.17-.16-.05-.25-.05-.18.02-.25.05-.14.09-.19.17-.09.18-.12.31-.04.29-.04.48v.97c0 .19.01.35.04.48s.07.24.12.32.11.14.19.17.16.05.25.05.18-.02.25-.05.14-.09.19-.17.09-.19.11-.32.04-.29.04-.48v-.97z"/></svg></div>
<div class="plybtn" id="play"><button class="player-btn toggle-play icon" title="Toggle Play"><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17.804 17.804" style="enable-background:new 0 0 17.804 17.804;" xml:space="preserve"><g><g id="c98_play"><path d="M2.067,0.043C2.21-0.028,2.372-0.008,2.493,0.085l13.312,8.503c0.094,0.078,0.154,0.191,0.154,0.313
c0,0.12-0.061,0.237-0.154,0.314L2.492,17.717c-0.07,0.057-0.162,0.087-0.25,0.087l-0.176-0.04
c-0.136-0.065-0.222-0.207-0.222-0.361V0.402C1.844,0.25,1.93,0.107,2.067,0.043z"/></g><g id="Capa_1_78_"></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg></button></div>
<div class="icon" id="for"><svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><g/><g><path d="M18,13c0,3.31-2.69,6-6,6s-6-2.69-6-6s2.69-6,6-6v4l5-5l-5-5v4c-4.42,0-8,3.58-8,8c0,4.42,3.58,8,8,8s8-3.58,8-8H18z"/><polygon points="10.9,16 10.9,11.73 10.81,11.73 9.04,12.36 9.04,13.05 10.05,12.74 10.05,16"/><path d="M14.32,11.78c-0.18-0.07-0.37-0.1-0.59-0.1s-0.41,0.03-0.59,0.1s-0.33,0.18-0.45,0.33s-0.23,0.34-0.29,0.57 s-0.1,0.5-0.1,0.82v0.74c0,0.32,0.04,0.6,0.11,0.82s0.17,0.42,0.3,0.57s0.28,0.26,0.46,0.33s0.37,0.1,0.59,0.1s0.41-0.03,0.59-0.1 s0.33-0.18,0.45-0.33s0.22-0.34,0.29-0.57s0.1-0.5,0.1-0.82V13.5c0-0.32-0.04-0.6-0.11-0.82s-0.17-0.42-0.3-0.57 S14.49,11.85,14.32,11.78z M14.33,14.35c0,0.19-0.01,0.35-0.04,0.48s-0.06,0.24-0.11,0.32s-0.11,0.14-0.19,0.17 s-0.16,0.05-0.25,0.05s-0.18-0.02-0.25-0.05s-0.14-0.09-0.19-0.17s-0.09-0.19-0.12-0.32s-0.04-0.29-0.04-0.48v-0.97 c0-0.19,0.01-0.35,0.04-0.48s0.06-0.23,0.12-0.31s0.11-0.14,0.19-0.17s0.16-0.05,0.25-0.05s0.18,0.02,0.25,0.05 s0.14,0.09,0.19,0.17s0.09,0.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0