带配置的视频播放器效果
代码语言：html
所属分类：多媒体
代码描述：带配置的视频播放器效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
--mdl-switch-thumb: #ff1744;
--mdl-switch-track: #ef9a9a;
/* player min width */
/* --player-min-width: 412px; */
}
* {
-webkit-font-smoothing: antialiased;
font-family: 'Roboto', sans-serif;
}
button:focus {
outline: none;
}
button::-moz-focus-inner {
outline: none;
border: 0;
}
body {
box-sizing: border-box;
margin: 0;
background-color: #d2d100;
/* background-color: hsl(170, 90%, 57%); */
/* background-color: #18ffff; */
}
#player {
box-sizing: border-box;
display: block;
/* width: 880px; */
/* height: 480px; */
width: 100%;
height: 100vh;
/* max-width: 1280px; */
/* max-height: 720px; */
font-family: "Roboto", sans-serif;
margin: 0 auto;
position: relative;
/* background-color: hsl(240, 100%, 50%); */
/* background-color: #9c27b0; */
/* background-color: #673ab7; */
background-color: #000;
}
#video {
width: 100%;
max-width: 100%;
height: 100%;
}
#video > video {
display: block;
height: 100%;
width: auto;
max-width: 100%;
margin: auto;
}
#controls {
box-sizing: border-box;
display: block;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#fullscreen_top-bar {
box-sizing: border-box;
display: flex;
width: 100%;
height: 88px;
padding: 24px;
flex-direction: row;
background: linear-gradient(tobottom, rgb(0, 0, 0.75), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0));
align-items: center;
justify-content: space-between;
}
#video-title {
color: #fff;
white-space: nowrap;
margin-right: 36px;
}
#share-btn {
display: flex;
width: 40px;
height: 40px;
border-radius: 50%;
align-items: center;
justify-content: center;
}
#share-icon {
transform: rotateY(180deg);
}
/* change this so that it can only be applied to the buttons inside the player on the whole page when embedded into a webpage */
button {
border: 0;
cursor: pointer;
background-color: transparent;
transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
#big-play-btn-container,
#big-play-btn,
#big-pause-btn {
box-sizing: border-box;
width: 114px;
height: 114px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
#big-play-btn,
#big-pause-btn {
display: block;
padding: 20px;
border: 0;
background-color: #fff;
}
#big-play-btn.invisible-btn,
#big-pause-btn.invisible-btn {
display: none;
}
@keyframes ripples {
from {
box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.55);
}
to {
box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.1);
}
}
#big-play-btn-container.video-loading {
animation: ripples 1.24s forwards infinite cubic-bezier(0.4, 0, 0.3, 1);
}
#loading-icon {
display: flex;
width: 64px;
height: 64px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
background-color: hsla(150, 90%, 40%, 0.5);
align-items: center;
justify-content: center;
}
#player_subtitle-container {
box-sizing: border-box;
display: block;
width: 100%;
padding: 0 24px;
position: absolute;
left: 0;
right: 0;
bottom: 112px;
/* background-color: #fff; */
}
#player_subtitle-container.subtitle-fullscreen {
box-sizing: border-box;
display: block;
width: 100%;
padding: 0 24px;
position: absolute;
left: 0;
right: 0;
bottom: 114px;
/* background-color: #fff; */
}
#player_subtitle-container.invisible {
display: none;
}
#player_subtitle {
display: inline-block;
padding: 2px 5px;
margin: 0 30px;
font-size: 15px;
border-radius: 5px;
line-height: 1.35;
letter-spacing: normal;
color: #fff;
background-color: rgba(0, 0, 0, 0.9);
}
#player_subtitle-container.subtitle-fullscreen #player_subtitle {
padding: 4px 8px;
margin: 0 45px;
font-size: 22px;
border-radius: 5px;
/* line-height: 40px; */
}
#player_control-bar {
box-sizing: border-box;
display: flex;
width: 100%;
height: 112px;
padding: 4px 0 24px;
flex-wrap: nowrap;
flex-direction: column;
position: absolute;
right: 0;
left: 0;
bottom: 0;
align-items: stretch;
justify-content: flex-start;
/* background-color: hsla(240, 100%, 50%, 0.75); */
}
#main-controls {
box-sizing: border-box;
display: flex;
width: 100%;
height: 48px;
padding: 0 24px;
flex-direction: row;
justify-content: space-between;
align-items: center;
/* background-color: hsla(170, 100%, 35%, 0.75); */
/* background-color: hsla(270, 100%, 0%, 0.9); */
border-radius: 5px;
}
#video-duration {
margin: 0 16px 0 0;
padding-left: 6px;
white-space: nowrap;
}
#video-duration,
#current-time,
#duration {
color: #fff;
font-size: 20px;
}
#player_control-bar_cta-btns {
display: flex;
width: auto;
flex-direction: row;
flex: 1 1 172px;
margin: 0 0 0 auto;
justify-content: flex-end;
}
.cta-btn {
box-sizing: padding-box;
display: inline-block;
width: 48px;
height: 48px;
border-radius: 50%;
margin-left: 4px;
padding: 8px;
}
.cta-btn:hover {
background-color: rgba(255, 255, 255, 0.5);
}
#subtitle-toggle-btn {
position: relative;
}
#subtitle-toggle-btn.active::after {
content: '';
box-sizing: border-box;
display: inline-block;
width: 27px;
height: 3px;
position: absolute;
left: 11px;
right: 10px;
bottom: 6px;
transform-origin: 50%;
background-color: #f00;
}
#player-settings {
display: inline-block;
position: absolute;
bottom: 100%;
right: 24px;
border-radius: 7px;
color: #fff;
background-color: rgba(0, 0, 0, 0.9);
}
#settings_home-view {
display: block;
width: 205px;
padding: 10px;
}
#settings_home-view.fullscreen {
width: 282px;
padding: 12px;
}
#settings_home-view_options,
.settings_home-view_options_item {
list-style: none;
margin: 0;
padding: 0;
}
#settings_home-view_options {
display: flex;
flex-direction: column;
justify-content: center;
align-items: space-between;
}
.settings_home-view_options_item {
margin-bottom: 4px;
}
.settings_home-view_options_item:last-child {
margin-bottom: 0;
}
.settings_home-view_options_item button {
display: flex;
height: 40px;
width: 100%;
color: inherit;
flex-direction: row;
font-size: 14px;
border: 0;
border-radius: 5px;
padding: 0px 10px;
cursor: pointer;
background-color: transparent;
align-items: center;
justify-content: space-between;
}
.settings_home-view_options_item.fullscreen button {
height: 50px;
font-size: 20px;
padding: 0 16px;
}
.settings_home-view_options_item button:hover {
background-color: rgba(255, 255, 255, 0.14);
}
.setting-text {
font-weight: 500;
}
#setting-speed-btn,
#setting-quality-btn {
padding-right: 3px;
}
.settings_home-view_options_item.fullscreen #setting-speed-btn,
.settings_home-view_options_item.fullscreen #setting-quality-btn {
padding-right: 5px;
}
.current-setting-icon > svg {
width: 28px;
height: 28px;
}
.current-setting-icon.fullscreen > svg {
width: 40px;
height: 40px;
}
#quality-auto-active {
font-weight: 400;
margin-right: 3px;
}
#current-auto-selected-quality {
font-weight: 300;
}
#quality-auto-active + span {
font-size: 13px;
font-size: 0.875em;
line-height: 1.2;
}
#player_range-input {
box-sizing: border-box;
padding: 2px 18px 2px;
margin-top: 2px;
/* background-color: hsla(55, 100%, 50%, 0.75); */
}
/* MATERIAL DESIGN LITE BASIC STYLE */
a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.mdl-icon-toggle, .mdl-item, .mdl-radio, .mdl-slider, .mdl-switch, .mdl-tabs__tab {
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
/* MATERIAL DESIGN LITE BASIC STYLE */
/* MATERIAL SLIDER START */
/* MATERIAL SLIDER START */
/* MATERIAL SLIDER START */
_:-ms-input-placeholder,
:root .mdl-slider.mdl-slider.is-upgraded {
-ms-appearance: none;
height: 38px;
margin: 0;
}
.mdl-slider {
width: 100%;
margin: 0;
}
.mdl-slider.is-upgraded {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 30px;
/* changed */
background: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
padding: 0;
color: rgb(255,0,0);
/* changed */
-webkit-align-self: center;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
z-index: 1;
cursor: pointer;
}
.mdl-slider.is-upgraded::-moz-focus-outer {
border: 0;
}
.mdl-slider.is-upgraded::-ms-tooltip {
display: none;
}
.mdl-slider.is-upgraded::-webkit-slider-runnable-track {
background: transparent;
}
.mdl-slider.is-upgraded::-moz-range-track {
background: transparent;
border: none;
}
.mdl-slider.is-upgraded::-ms-track {
background: none;
color: transparent;
height: 4px;
/* slider track height/thickness */
width: 100%;
border: none;
}
.mdl-slider.is-upgraded::-ms-fill-lower {
padding: 0;
/* slider track (current time) background-color */
background: linear-gradient(toright, transparent, transparent 16px, rgb(255,0,0) 16px, rgb(255,0,0) 0);
}
.mdl-slider.is-upgraded::-ms-fill-upper {
padding: 0;
/* slider-track (duration) background-color */
background: linear-gradient(toleft, transparent, transparent 16px, rgba(255,255,255, 0.26) 16px, rgba(255,255,255, 0.26) 0);
}
.mdl-slider.is-upgraded::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
/* slider-thumb width for -webkit- browsers and chrome*/
height: 14px;
/* slider-thumb height for -webkit- browsers and chrome */
box-sizing: border-box;
border-radius: 50%;
background: rgb(255,0,0);
/* slider thumb background color */
border: none;
transition: border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-slider.is-upgraded::-moz-range-thumb {
-moz-appearance: none;
width: 14px;
/* slider-thumb width for firefox browsers */
height: 14px;
/* slider-thumb height for firefox browsers */
box-sizing: border-box;
border-radius: 50%;
background-image: none;
background: rgb(255,0,0);
/* slider-thumb background-color for firefox browsers */
border: none;
}
.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb {
/* slider-thumb shadow when focused using keyboard */
box-shadow: 0 0 0 12px rgba(255,0,0, 0.26);
}
.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb {
/* slider-thumb shadow when focused using keyboard */
box-shadow: 0 0 0 12px rgba(255,0,0, 0.26);
}
.mdl-slider.is-upgraded:active::-webkit-slider-thumb {
background-image: none;
/* slider-thumb background-color when active */
background: rgb(255,0,0);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.mdl-slider.is-upgraded:active::-moz-range-thumb {
background-image: none;
background: rgb(255,0,0);
/* slider-thumb background-color when active */
transform: scale(1.5);
}
.mdl-slider.is-upgraded::-ms-thumb {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgb(255,0,0);
/* slider-thumb background-color for IE and Edge browsers */
transform: scale(0.375);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-slider.is-upgraded:focus:not(:active)::-ms-thumb {
/* slider-thumb background when focused using keyboard for IE and Edge browsers */
background: radial-gradient(circle closest-side, rgb(255,0,0) 0%, rgb(255,0,0) 37.5%, rgba(255,0,0, 0.26) 37.5%, rgba(255,0,0, 0.26) 100%);
transform: scale(1);
}
.mdl-slider.is-upgraded:active::-ms-thumb {
/* slider-thumb background-color when active for IE and Edge browsers */
background: rgb(255,0,0);
transform: scale(0.5625);
}
.mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb {
border: 2px solid rgb(39, 39, 39);
/* slider-thumb background-color when slider value="0" */
background: rgb(121, 121, 121);
}
.mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb {
border: 2px solid rgb(39, 39, 39);
/* slider-thumb background-color when slider value="0" */
background: rgb(121, 121, 121);
}
.mdl-slider.is-upgraded.is-lowest-value +
.mdl-slider__background-flex > .mdl-slider__background-upper {
/* {left} should be half of the size of the slider thumb */
left: 7px;
}
.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-webkit-slider-thumb {
/* slider-thumb shadow/glow when focus using keyboard and value="0" */
box-shadow: 0 0 0 12px rgba(20, 20, 20, 0.12);
/* slider-thumb background-color when focus using keyboard and value="0" */
background: rgb(120, 120, 120);
}
.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-moz-range-thumb {
/* slider-thumb shadow/glow when focus using keyboard and value="0" */
box-shadow: 0 0 0 12px rgba(20, 20, 20, 0.12);
/* slider-thumb background-color when focus using keyboard and value="0" */
background: rgb(120, 120, 120);
}
.mdl-slider.is-upgraded.is-lowest-value:active::-webkit-slider-thumb {
/* slider-thumb border when slider-thumb is active (clicked and hold) */
border: 1.6px solid rgba(0,0,0, 0.26);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.mdl-slider.is-upgraded.is-lowest-value:active +
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 10px;
/* ??? */
}
.mdl-slider.is-upgraded.is-lowest-value:active::-moz-range-thumb {
/* slider-thumb border when slider-thumb is active (clicked and hold) */
border: 1.5px solid rgba(0,0,0, 0.26);
transform: scale(1.5);
}
.mdl-slider.is-upgraded.is-lowest-value::-ms-thumb {
/* slider-thumb background when slider's value="0" for IE and Edge browsers */
background: radial-gradient(circle closest-side, transparent 0%, transparent 66.67%, rgba(0,0,0, 0.26) 66.67%, rgba(0,0,0, 0.26) 100%);
}
.mdl-slider.is-upgraded.is-lowest-value:focus:not(:active)::-ms-thumb {
/* slider-thumb border when active (clicked and hold) and slider's value="0" for IE and Edge */
background: radial-gradient(circle closest-side, rgba(0,0,0, 0.12) 0%, rgba(0,0,0, 0.12) 25%, rgba(0,0,0, 0.26) 25%, rgba(0,0,0, 0.26) 37.5%, rgba(0,0,0, 0.12) 37.5%, rgba(0,0,0, 0.12) 100%);
transform: scale(1);
}
.mdl-slider.is-upgraded.is-lowest-value:active::-ms-thumb {
transform: scale(0.5625);
background: radial-gradient(circle closest-side, transparent 0%, transparent 77.78%, rgba(0,0,0, 0.26) 77.78%, rgba(0,0,0, 0.26) 100%);
}
.mdl-slider.is-upgraded.is-lowest-value::-ms-fill-lower {
/* slider-thumb background-color when slider value="0" for IE and Edge browsers */
background: rgb(121, 121, 121);
}
.mdl-slider.is-upgraded.is-lowest-value::-ms-fill-upper {
/* should be half of the size of slider-thumb */
margin-left: 7px;
}
.mdl-slider.is-upgraded.is-lowest-value:active::-ms-fill-upper {
/* ????????????????????????????????????????????? */
margin-left: 10px;
}
.mdl-slider.is-upgraded:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded:disabled::-webkit-slider-thumb {
-webkit-transform: scale(0.667);
transform: scale(0.667);
/* slider-thumb background-color when slider's value="0" */
background: rgba(0, 0, 0, 0.26);
}
.mdl-slider.is-upgraded:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded:disabled::-moz-range-thumb {
transform: scale(0.667);
/* slider-thumb background-color when slider's value="0" */
background: rgba(0, 0, 0, 0.26);
}
.mdl-slider.is-upgraded:disabled +
.mdl-slider__background-flex > .mdl-slider__background-lower {
/* slider-track background-color when slider's value="0" */
background: rgba(21, 21, 21, 0.5);
/* should be half of the size of the slider-thumb regardless of the negative sign (-) */
left: -7px;
}
.mdl-slider.is-upgraded:disabled +
.mdl-slider__background-flex > .mdl-slider__background-upper {
/* should be half of the size of the slider-thumb */
left: 7px;
}
.mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-webkit-slider-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-webkit-slider-thumb {
/* slider-thumb background-color when */
border: 3px solid rgba(0,0,0, 0.26);
background: transparent;
-webkit-transform: scale(0.667);
transform: scale(0.667);
}
.mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-moz-range-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-moz-range-thumb {
border: 3px solid rgba(0,0,0, 0.26);
background: transparent;
transform: scale(0.667);
}
.mdl-slider.is-upgraded.is-lowest-value:disabled:active +
.mdl-slider__background-flex > .mdl-slider__background-upper {
left: 7px;
}
.mdl-slider.is-upgraded:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded:disabled:active::-ms-thumb, .mdl-slider.is-upgraded:disabled::-ms-thumb {
transform: scale(0.25);
background: rgba(0,0,0, 0.26);
}
.mdl-slider.is-upgraded.is-lowest-value:disabled:focus::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-thumb, .mdl-slider.is-upgraded.is-lowest-value:disabled::-ms-thumb {
transform: scale(0.25);
background: radial-gradient(circle closest-side, transparent 0%, transparent 50%, rgba(0,0,0, 0.26) 50%, rgba(0,0,0, 0.26) 100%);
}
.mdl-slider.is-upgraded:disabled::-ms-fill-lower {
/* should be half of the size of slider-thumb */
margin-right: 7px;
background: linear-gradient(toright, transparent, transparent 25px, rgba(0,0,0, 0.26) 25px, rgba(0,0,0, 0.26) 0);
}
.mdl-slider.is-upgraded:disabled::-ms-fill-upper {
/* should be half of the size of slider-thumb - for IE and Edge browsers */
margin-left: 7px;
}
.mdl-slider.is-upgraded.is-lowest-value:disabled:active::-ms-fill-upper {
/* should be half of the size of slider-thumb - for IE and Edge browsers*/
margin-left: 7px;
}
.mdl-slider__ie-container {
/* calculated by this formula: ((slider-thumb new width) / (slider-thumb old width) * current-height) */
height: 30px;
overflow: visible;
border: none;
margin: none;
padding: none;
}
.mdl-slider__container {
/* calculated by this formula: ((slider-thumb new width) / (slider-thumb old width) * current-height) */
height: 30px;
position: relative;
background: none;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.mdl-slider__background-flex {
background: transparent;
position: absolute;
height: 4px;
width: calc(100% - 14px);
/* {14px} is equal to the width of the slider-thumb */
top: 50%;
left: 0;
margin: 0 7px;
/* {7px} is equal to half of the width of the slider-thumb */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
border: 0;
padding: 0;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.mdl-slider__background-lower {
/* slider-track background-color */
background: rgb(255, 0, 0);
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
position: relative;
border: 0;
padding: 0;
}
.mdl-slider__background-upper {
background: rgba(255,255,255, 0.25);
-webkit-flex: 0;
-ms-flex: 0;
flex: 0;
position: relative;
border: 0;
padding: 0;
transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
/* MATERIAL DESIGN SLIDER END */
/* MATERIAL DESIGN SLIDER END */
/* MATERIAL DESIGN SLIDER END */
/* MDL SWITCH START */
.mdl-switch {
position: relative;
z-index: 1;
vertical-align: middle;
display: inline-block;
box-sizing: border-box;
width: 100%;
height: 24px;
margin: 0;
padding: 0;
overflow: visible;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.mdl-switch.is-upgraded {
padding-left: 36px;
}
.mdl-switch__input {
line-height: 24px;
}
.mdl-switch.is-upgraded .mdl-switch__input {
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
opacity: 0;
-ms-appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border: none;
}
.mdl-switch__track {
background: rgb(200,200,200);
position: absolute;
left: 0;
top: 5px;
height: 14px;
width: 36px;
border-radius: 14px;
cursor: pointer;
}
.mdl-switch.is-checked .mdl-switch__track {
background: rgb(33,150,243);
}
.mdl-switch__track fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__track {
background: rgba(255,255,255, 0.12);
cursor: auto;
}
.mdl-switch__thumb {
background: rgb(120,120,120);
position: absolute;
left: 0;
top: 2px;
height: 20px;
width: 20px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
transition-duration: 0.18s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-property: left;
}
.mdl-switch.is-checked .mdl-switch__thumb {
background: rgb(10, 111, 194);
left: 16px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
}
.mdl-switch__thumb fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__thumb {
background: rgb(120,120,120);
cursor: auto;
}
.mdl-switch__focus-helper {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-4px, -4px);
transform: translate(-4px, -4px);
display: inline-block;
box-sizing: border-box;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: transparent;
}
.mdl-switch.is-focused .mdl-switch__focus-helper {
box-shadow: 0 0 0px 20px rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
}
.mdl-switch.is-focused.is-checked .mdl-switch__focus-helper {
box-shadow: 0 0 0px 20px rgb(33, 150, 243, 0.26);
background-color: rgb(33, 150, 243, 0.26);
}
.mdl-switch__label {
position: relative;
cursor: pointer;
font-size: 16px;
line-height: 24px;
margin: 0;
left: 24px;
}
.mdl-switch__label fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__label {
color: rgb(100,100,100);
cursor: auto;
}
.mdl-switch__ripple-container {
position: absolute;
z-index: 2;
top: -12px;
left: -14px;
box-sizing: border-box;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
transition-duration: 0.40s;
transition-timing-function: step-end;
transition-property: left;
}
.mdl-switch__ripple-container .mdl-ripple {
background: rgba(33,150,243,0.75);
}
.mdl-switch__ripple-container fieldset[disabled] .mdl-switch,
.mdl-switch.is-disabled .mdl-switch__ripple-container {
cursor: auto;
}
fieldset[disabled] .mdl-switch .mdl-switch__ripple-container .mdl-ripple,
.mdl-switch.is-disabled .mdl-switch__ripple-container .mdl-ripple {
background: transparent;
}
.mdl-switch.is-checked .mdl-switch__ripple-container {
left: 2px;
}
/* MDL SWITCH END */
/* MDL SWITCH FULLSCREEN START */
.mdl-switch.mdl-switch-fullscreen {
height: 36px;
}
.mdl-switch.is-upgraded.mdl-switch-fullscreen {
padding-left: 54px;
}
.mdl-switch-fullscreen .mdl-switch__input {
line-height: 36px;
}
.mdl-switch-fullscreen .mdl-switch__track {
left: 0;
top: 7px;
height: 21px;
width: 54px;
border-radius: 21px;
cursor: pointer;
}
.mdl-switch.is-checked.mdl-switch-fullscreen .mdl-switch__track {
background: rgb(33,150,243);
}
.mdl-switch__track fieldset[disabled] .mdl-switch.mdl-switch-fullscreen,
.mdl-switch.is-disabled.mdl-switch-fullscreen .mdl-switch__track {
background: rgba(255,255,255, 0.12);
cursor: auto;
}
.mdl-switch-fullscreen .mdl-switch__thumb {
top: 3px;
height: 30px;
width: 30px;
}
.mdl-switch.is-checked.mdl-switch-fullscreen .mdl-switch__thumb {
left: 24px;
}
.mdl-switch-fullscreen .mdl-switch__focus-helper {
-webkit-transform: translate(-9px, -9px);
transform: translate(-9px, -9px);
width: 18px;
height: 18px;
}
.mdl-switch-fullscreen .mdl-switch__label {
font-size: 24px;
line-height: 36px;
left: 36px;
}
.mdl-switch-fullscreen .mdl-switch__ripple-container {
top: -18px;
left: -21px;
width: 72px;
height: 72px;
}
/* mdl-switch mdl-js-switch mdl-js-ripple-effect mdl-switch-fullscreen */
.mdl-switch.is-checked.mdl-switch-fullscreen .mdl-switch__ripple-container {
left: 3px;
}
/* MDL SWITCH FULLSCREEN END */
/* BIG PLAY BUTTON STYLES - START */
#big-play-btn:focus,
#big-pause-btn:focus {
outline: none;
}
/* #big-play-btn:focus:not(:active) {
box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.25);
} */
/* BIG PLAY BUTTON STYLES - END */
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
.js-focus-visible .focus-visible {
background-color: rgba(255, 255, 255, 0.5);
/* box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); */
}
.js-focus-visible #big-play-btn-container.focus-visible {
box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.35);
}
.js-focus-visible .settings_home-view_options_item>button.focus-visible {
background-color: rgba(255, 255, 255, 0.15);
}
/* COPYRIGHT FAB BTN STYLES START */
.copyright-info-container {
display: block;
width: 36px;
height: 36px;
position: absolute;
bottom: 104px;
border-radius: 50px;
padding: 0px;
cursor: default;
margin: 8px 24px;
white-space: nowrap;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-focus-visible .copyright-info-container.focus-visible,
.copyright-info-container:hover {
width: 460px;
border-radius: 5px;
background-color: rgba(255, 255, 255, 0.75);
transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.18s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
#info-icon {
display: inline-flex;
width: 36px;
height: 36px;
flex-direction: row;
justify-content: center;
align-items: center;
}
.copyright {
display: inline-block;
width: 420px;
height: 100%;
min-width: 420px;
color: #000;
font-size: 13px;
cursor: auto;
font-weight: bold;
letter-spacing: 0.5px;
white-space: nowrap;
line-height: 17px;
margin-block-start: 0;
margin-block-end: 0;
position: relative;
transform: translate(0, -20%);
}
/* COPYRIGHT FAB BTN STYLES END */
input[type="range"].mdl-slider:focus {
border-radius: 3px;
/* background-color: transparent; */
/* background: transparent; */
}
</style>
</head>
<body translate="no">
<div id="player">
<div id="video">
<video id="my-video" muted tabindex="0">
<source src="http://repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" type="video/mp4">
</video>
</div>
<div id="controls">
<div id="fullscreen_top-bar">
<h3 id="video-title">Big Buck Bunny<span class="episode-number"></span></h3>
<div class="fullscreen_top-bar_cta-btns">
<button id="share-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" viewBox="0 0 24 24" id="share-icon">
<path d="M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z" fill="#fff" />
<path d="M0 0h24v24H0z" fill="none" />
</svg>
</button>
</div>
</div>
<button id="big-play-btn-container">
<div id="big-play-btn">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="74px" height="74px&qu.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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