master
parent
e53d6e4eec
commit
0f9c498c16
File diff suppressed because one or more lines are too long
@ -0,0 +1,775 @@ |
||||
@font-face { |
||||
font-family: 'iconfont'; /* project id 1867770 */ |
||||
src: url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.eot'); |
||||
src: url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.eot?#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.woff2') format('woff2'), |
||||
url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.woff') format('woff'), |
||||
url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.ttf') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.svg#iconfont') format('svg'); |
||||
} |
||||
|
||||
.sv-target video { |
||||
background-color: #000000; |
||||
object-fit: fill; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.sv-font { |
||||
font-family: 'iconfont'; |
||||
} |
||||
|
||||
.sv-pic-pic { |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
margin-right: 6px; |
||||
} |
||||
|
||||
.sv-play { |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.sv-fontBtn { |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.sv-next { |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.sv-fullScreen { |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.sv-cancelFull { |
||||
color: #ffffff; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.sv-target { |
||||
position: relative; |
||||
} |
||||
.sv-control { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
height: 60px; |
||||
background-color: rgba(0, 0, 0, 0.5); |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
} |
||||
.sv-play-container { |
||||
height: 100%; |
||||
/* background-color: royalblue; */ |
||||
display: flex; |
||||
flex-direction: row; |
||||
padding-right: 10px; |
||||
} |
||||
.sv-control-r { |
||||
height: 100%; |
||||
/* background-color: royalblue; */ |
||||
display: flex; |
||||
flex-direction: row; |
||||
padding-left: 10px; |
||||
padding-right: 10px; |
||||
} |
||||
.sv-play-container button.sv-playBtn { |
||||
background: none; |
||||
border: none; |
||||
cursor: pointer; |
||||
padding: 0 10px; |
||||
outline: none; |
||||
color: inherit; |
||||
text-align: inherit; |
||||
font: inherit; |
||||
line-height: inherit; |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.sv-control-r .showMute { |
||||
background: none; |
||||
border: none; |
||||
cursor: pointer; |
||||
padding: 0 10px; |
||||
outline: none; |
||||
color: inherit; |
||||
text-align: inherit; |
||||
font: inherit; |
||||
line-height: inherit; |
||||
position: relative; |
||||
} |
||||
.showMute span:nth-child(1) { |
||||
display: block; |
||||
padding: 20px 0; |
||||
} |
||||
|
||||
.sv-time { |
||||
height: 100%; |
||||
color: #ffffff; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.sv-time-split { |
||||
padding: 0 4px; |
||||
} |
||||
|
||||
.sv-mutePanel { |
||||
position: absolute; |
||||
top: -120px; |
||||
left: 0; |
||||
width: 20px; |
||||
height: 80px; |
||||
background-color: rgba(0, 0, 0, 0.8); |
||||
display: flex; |
||||
flex-direction: column; |
||||
padding: 16px 6px; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.sv-mute-num { |
||||
width: 100%; |
||||
height: 20px; |
||||
background-color: transparent; |
||||
color: #ffffff; |
||||
font-size: 12px; |
||||
text-align: center; |
||||
margin-bottom: 4px; |
||||
} |
||||
|
||||
.sv-mute-slider { |
||||
flex: 1; |
||||
width: 3px; |
||||
background-color: #ffffff; |
||||
margin: 0 auto; |
||||
position: relative; |
||||
display: flex; |
||||
flex-direction: column-reverse; |
||||
} |
||||
|
||||
.sv-mute-sliderRange { |
||||
width: 100%; |
||||
background-color: #00a1d6; |
||||
} |
||||
|
||||
.sv-control-r button.sv-mute-button { |
||||
position: absolute; |
||||
top: 0; |
||||
left: -4.5px; |
||||
width: 12px; |
||||
height: 12px; |
||||
border-radius: 50%; |
||||
z-index: 10; |
||||
background-color: #00a1d6; |
||||
border: 0; |
||||
cursor: pointer; |
||||
outline: none; |
||||
} |
||||
|
||||
.sv-progressBar { |
||||
position: absolute; |
||||
/* top: 0; */ |
||||
bottom: 60px; |
||||
left: 2%; |
||||
width: 96%; |
||||
height: 2px; |
||||
background-color: hsla(0,0%,100%,.2); |
||||
border-radius: 4px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.sv-cacheProgress { |
||||
width: 0%; |
||||
height: 100%; |
||||
background-color: #7a7878; |
||||
border-radius: 4px; |
||||
} |
||||
|
||||
.sv-progressNum { |
||||
width: 0%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
border-radius: 4px; |
||||
background-color: #00a1d6; |
||||
} |
||||
|
||||
.sv-progressBtn { |
||||
position: absolute; |
||||
left: 0%; |
||||
top: -7px; |
||||
width: 16px; |
||||
height: 16px; |
||||
border-radius: 50%; |
||||
background-color: rgba(0, 161, 214, 0.5); |
||||
cursor: pointer; |
||||
} |
||||
.sv-progressBtn>div { |
||||
width: 10px; |
||||
height: 10px; |
||||
border-radius: 50%; |
||||
background-color: #00a1d6; |
||||
margin-top: 2.6px; |
||||
margin-left: 2.8px; |
||||
} |
||||
|
||||
.hide { |
||||
display: none!important; |
||||
} |
||||
|
||||
.sv-full-screen { |
||||
position: fixed!important; |
||||
width: 100%!important; |
||||
height: 100%!important; |
||||
left: 0!important; |
||||
top: 0!important; |
||||
margin: 0!important; |
||||
padding: 0!important; |
||||
z-index: 9999999!important; |
||||
} |
||||
|
||||
/* loading */ |
||||
.sv-container-loading { |
||||
width: 40vw; |
||||
height: 40vw; |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
margin: auto; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.sv-common { |
||||
height: 5vw; |
||||
max-height: 100%; |
||||
overflow: auto; |
||||
width: 2vw; |
||||
margin: auto; |
||||
max-width: 100%; |
||||
position: absolute; |
||||
border-radius: 0vw 10vw 0vw 10vw; |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0; |
||||
} |
||||
|
||||
.sv-one { |
||||
transform: rotate(45deg); |
||||
left: 0; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 7.5vw; |
||||
} |
||||
|
||||
.sv-two { |
||||
transform: rotate(90deg); |
||||
left: 5.5vw; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 5.5vw; |
||||
} |
||||
|
||||
.sv-three { |
||||
transform: rotate(135deg); |
||||
left: 7.5vw; |
||||
right: 0; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.sv-four { |
||||
transform: rotate(180deg); |
||||
left: 5.5vw; |
||||
right: 0; |
||||
top: 5.5vw; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.sv-five { |
||||
transform: rotate(225deg); |
||||
left: 0; |
||||
right: 0; |
||||
top: 7.5vw; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.sv-six { |
||||
transform: rotate(270deg); |
||||
left: 0; |
||||
right: 5.5vw; |
||||
top: 5.5vw; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.sv-seven { |
||||
transform: rotate(315deg); |
||||
left: 0; |
||||
right: 7.5vw; |
||||
top: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.sv-eight { |
||||
transform: rotate(360deg); |
||||
left: 0; |
||||
right: 5.5vw; |
||||
top: 0; |
||||
bottom: 5.5vw; |
||||
} |
||||
|
||||
.sv-one { |
||||
animation: one 1s ease infinite; |
||||
-moz-animation: one 1s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: one 1s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: one 1s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes one { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-two { |
||||
animation: two 1s .125s ease infinite; |
||||
-moz-animation: two 1s .125s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: two 1s .125s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: two 1s .125s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes two { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-three { |
||||
animation: three 1s .25s ease infinite; |
||||
-moz-animation: three 1s .25s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: three 1s .25s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: three 1s .25s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes three { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
background: ; |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-four { |
||||
animation: four 1s .375s ease infinite; |
||||
-moz-animation: four 1s .375s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: four 1s .375s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: four 1s .375s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes four { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
background: ; |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-five { |
||||
animation: five 1s .5s ease infinite; |
||||
-moz-animation: five 1s .5s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: five 1s .5s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: five 1s .5s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes five { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-six { |
||||
animation: six 1s .625s ease infinite; |
||||
-moz-animation: six 1s .625s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: six 1s .625s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: six 1s .625s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes six { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-seven { |
||||
animation: seven 1s .750s ease infinite; |
||||
-moz-animation: seven 1s .750s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: seven 1s .750s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: seven 1s .750s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes seven { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-eight { |
||||
animation: eight 1s .875s ease infinite; |
||||
-moz-animation: eight 1s .875s ease infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: eight 1s .875s ease infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: eight 1s .875s ease infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes eight { |
||||
0%, |
||||
100% {} |
||||
50% { |
||||
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6; |
||||
} |
||||
} |
||||
|
||||
.sv-container-loading { |
||||
animation: container 5s linear infinite; |
||||
-moz-animation: container 5s linear infinite; |
||||
/* Firefox */ |
||||
-webkit-animation: container 5s linear infinite; |
||||
/* Safari and Chrome */ |
||||
-o-animation: container 5s linear infinite; |
||||
/* Opera */ |
||||
} |
||||
|
||||
@keyframes container { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
to { |
||||
transform: rotate(-360deg); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
/* .sv-loading{ |
||||
position: absolute; |
||||
left: 48%; |
||||
top: 48%; |
||||
} */ |
||||
/* .sv-loading span{ |
||||
display: inline-block; |
||||
width: 4px; |
||||
height: 100%; |
||||
border-radius: 4px; |
||||
background: #00a1d6; |
||||
-webkit-animation: load 1s ease infinite; |
||||
animation: load 1s ease infinite; |
||||
} |
||||
@keyframes load{ |
||||
0%,100%{ |
||||
height: 20px; |
||||
background: #00a1d6; |
||||
} |
||||
50%{ |
||||
height: 40px; |
||||
margin: -15px 0; |
||||
background: lightblue; |
||||
} |
||||
} |
||||
@-webkit-keyframes load{ |
||||
0%,100%{ |
||||
height: 20px; |
||||
background: #00a1d6; |
||||
} |
||||
50%{ |
||||
height: 40px; |
||||
margin: -15px 0; |
||||
background: lightblue; |
||||
} |
||||
} |
||||
@-o-keyframes load{ |
||||
0%,100%{ |
||||
height: 20px; |
||||
background: #00a1d6; |
||||
} |
||||
50%{ |
||||
height: 40px; |
||||
margin: -15px 0; |
||||
background: lightblue; |
||||
} |
||||
} |
||||
@-moz-keyframes load{ |
||||
0%,100%{ |
||||
height: 20px; |
||||
background: #00a1d6; |
||||
} |
||||
50%{ |
||||
height: 40px; |
||||
margin: -15px 0; |
||||
background: lightblue; |
||||
} |
||||
} |
||||
.sv-loading span:nth-child(2){ |
||||
-webkit-animation-delay:0.2s; |
||||
animation-delay:0.2s; |
||||
} |
||||
.sv-loading span:nth-child(3){ |
||||
-webkit-animation-delay:0.4s; |
||||
animation-delay:0.4s; |
||||
} |
||||
.sv-loading span:nth-child(4){ |
||||
-webkit-animation-delay:0.6s; |
||||
animation-delay:0.6s; |
||||
} |
||||
.sv-loading span:nth-child(5){ |
||||
-webkit-animation-delay:0.8s; |
||||
animation-delay:0.8s; |
||||
} */ |
||||
|
||||
/* 弹幕 */ |
||||
.sv-brrage { |
||||
position: absolute; |
||||
padding: 4px; |
||||
background-color: transparent; |
||||
display: flex; |
||||
flex-direction: row; |
||||
white-space: nowrap; |
||||
width: auto; |
||||
word-wrap: break-word; |
||||
max-width: 500px; |
||||
min-width: 100px; |
||||
} |
||||
|
||||
.sv-brrage-center { |
||||
text-shadow: rgb(0, 0, 0) 1px 0px 1px, rgb(0, 0, 0) 0px 1px 1px, rgb(0, 0, 0) 0px -1px 1px, rgb(0, 0, 0) -1px 0px 1px; |
||||
} |
||||
|
||||
/* 画中画 */ |
||||
|
||||
.sv-picinpic { |
||||
position: absolute; |
||||
z-index: 22; |
||||
position: absolute; |
||||
top: 20px; |
||||
right: 20px; |
||||
white-space: nowrap; |
||||
height: 36px; |
||||
padding: 0 12px; |
||||
overflow: visible; |
||||
border-radius: 2px; |
||||
border-radius: 18px; |
||||
background: #2b2b2b; |
||||
background: rgba(43,43,43,.8); |
||||
color: #fff; |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: center; |
||||
font-size: 14px; |
||||
cursor: pointer; |
||||
} |
||||
.sv-picinpic:hover { |
||||
background: linear-gradient(90deg,#4ca9c7 0,#03bbf7)!important |
||||
} |
||||
|
||||
/* 暂停按钮 */ |
||||
.sv-svgPause { |
||||
position: absolute; |
||||
right: 34px; |
||||
bottom: 70px; |
||||
cursor: pointer; |
||||
}.sv-el-control-style { |
||||
padding-right: 10px; |
||||
padding-left: 10px; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: row; |
||||
} |
||||
|
||||
.sv-nextBtn { |
||||
background: none; |
||||
border: none; |
||||
cursor: pointer; |
||||
outline: none; |
||||
text-align: inherit; |
||||
} |
||||
|
||||
.sv-speedBtn { |
||||
background: none; |
||||
border: none; |
||||
cursor: pointer; |
||||
outline: none; |
||||
text-align: inherit; |
||||
position: relative; |
||||
} |
||||
.sv-speedBtn span:nth-child(1) { |
||||
display: block; |
||||
padding: 20px 0; |
||||
} |
||||
.sv-speedBtn .sv-speed-btn { |
||||
position: absolute; |
||||
bottom: 54px; |
||||
left: -10px; |
||||
padding: 10px; |
||||
border-radius: 4px; |
||||
background-color: rgba(0, 0, 0, 0.8); |
||||
/* box-sizing: border-box; |
||||
border: 1px solid #ffffff; */ |
||||
} |
||||
.sv-speedBtn .sv-speed-btn ul { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
.sv-speedBtn .sv-speed-btn ul li { |
||||
list-style: none; |
||||
font-size: 12px; |
||||
line-height: 20px; |
||||
cursor: pointer; |
||||
} |
||||
.sv-speedBtn .sv-speed-btn ul li:hover{ |
||||
color: #00a1d6; |
||||
} |
||||
.sv-active{ |
||||
color: #00a1d6!important; |
||||
} |
||||
|
||||
.sv-control-c { |
||||
height: 100%; |
||||
} |
||||
|
||||
/* 弹幕控件 */ |
||||
.sv-barrage { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
.sv-barrage-a { |
||||
height: 26px; |
||||
} |
||||
.sv-barrage-input { |
||||
height: 17px; |
||||
outline: none; |
||||
padding: 6px 30px; |
||||
border-top-left-radius: 4px; |
||||
border-bottom-left-radius: 4px; |
||||
border-top: 1px solid #333333; |
||||
border-left: 1px solid #333333; |
||||
border-bottom: 1px solid #333333; |
||||
border-right: 1px solid #00a1d6; |
||||
background: none; |
||||
font-size: 12px; |
||||
color: #fff; |
||||
} |
||||
.sv-barrage-button { |
||||
height: 31px; |
||||
background-color: #00a1d6; |
||||
color: #fff; |
||||
width: 60px; |
||||
min-width: 60px; |
||||
text-align: center; |
||||
cursor: pointer; |
||||
box-sizing: border-box; |
||||
border-top: 1px solid #333333; |
||||
border-right: 1px solid #333333; |
||||
border-bottom: 1px solid #333333; |
||||
border-left: 1px solid #00a1d6; |
||||
border-top-right-radius: 4px; |
||||
border-bottom-right-radius: 4px; |
||||
outline: none; |
||||
vertical-align: middle; |
||||
} |
||||
.sv-barrage-button:hover{ |
||||
background-color: #03bbf7; |
||||
border-left: 1px solid #03bbf7; |
||||
} |
||||
.sv-barrage-font { |
||||
position: absolute; |
||||
left: 6px; |
||||
top: 16px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.sv-apanel { |
||||
position: absolute; |
||||
bottom: 54px; |
||||
left: -10px; |
||||
padding: 10px; |
||||
border-radius: 4px; |
||||
background-color: rgba(0, 0, 0, 0.8); |
||||
width: 200px; |
||||
height: 100px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
color: #fff; |
||||
z-index: 99999; |
||||
} |
||||
.sv-apanel-item { |
||||
display: flex; |
||||
flex-direction: column; |
||||
overflow: hidden; |
||||
} |
||||
.sv-apanel-item span { |
||||
font-size: 12px; |
||||
} |
||||
.sv-apanel-item ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
margin-top: 8px; |
||||
} |
||||
.sv-apanel-item ul li { |
||||
list-style: none; |
||||
background-color: #fff; |
||||
display: block; |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: 4px; |
||||
float: left; |
||||
cursor: pointer; |
||||
} |
||||
.activeColor{ |
||||
box-sizing: border-box; |
||||
border: 2px solid #ffff; |
||||
} |
@ -0,0 +1,212 @@ |
||||
@charset "utf-8"; |
||||
* { |
||||
padding: 0; |
||||
margin: 0; |
||||
font-weight: 400; |
||||
} |
||||
|
||||
ul { |
||||
list-style: none; |
||||
} |
||||
a { |
||||
text-decoration: none; |
||||
color: #666; |
||||
cursor: pointer; |
||||
} |
||||
a:hover { |
||||
color: #136EC3; |
||||
} |
||||
.main { |
||||
width: 1187px; |
||||
margin: 30px auto; |
||||
} |
||||
.dy-content .dy-videos { |
||||
padding: 10px; |
||||
margin-left: -10px; |
||||
margin-right: -10px; |
||||
min-height: 500px; |
||||
overflow: hidden; |
||||
position: relative |
||||
} |
||||
.dy-content .dy-videos .dy-video-item { |
||||
float: left; |
||||
width: 180px; |
||||
margin-right: 20px; |
||||
margin-bottom: 18px; |
||||
position: relative |
||||
} |
||||
.dy-content .dy-videos .dy-video-item .dy-video-poster { |
||||
position: relative |
||||
} |
||||
.dy-content .dy-videos .dy-video-item .dy-video-link { |
||||
display: block; |
||||
height: 235px; |
||||
overflow: hidden |
||||
} |
||||
.dy-content .dy-videos .dy-video-item .dy-video-link .s-pay { |
||||
position: absolute; |
||||
width: 56px; |
||||
height: 43px; |
||||
background: url(../images/paysite.png) no-repeat 0 0; |
||||
left: 0; |
||||
top: -1px; |
||||
} |
||||
.dy-content .dy-videos .dy-video-item .dy-video-date { |
||||
position: absolute; |
||||
bottom: 6px; |
||||
right: 10px; |
||||
color: #fff; |
||||
line-height: 18px; |
||||
padding: 0 4px; |
||||
font-size: 12px; |
||||
background-color: #000; |
||||
background-color: rgba(0, 0, 0, .5); |
||||
border-radius: 3px; |
||||
filter: alpha(opacity=60) |
||||
} |
||||
.dy-content .dy-videos .dy-video-item-last { |
||||
margin-right: 0 |
||||
} |
||||
.dy-content .dy-videos .dy-video-primary { |
||||
position: relative; |
||||
background-color: #fff; |
||||
height: 40px; |
||||
padding: 5px; |
||||
line-height: 20px |
||||
} |
||||
.dy-content .dy-videos .dy-video-primary .dy-video-title { |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
-o-text-overflow: ellipsis; |
||||
text-overflow: ellipsis; |
||||
margin-right: 24px; |
||||
color: #292929; |
||||
font-size: 14px |
||||
} |
||||
.dy-content .dy-videos .dy-video-primary .dy-video-intro { |
||||
color: #A7A7A7; |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
-o-text-overflow: ellipsis; |
||||
text-overflow: ellipsis |
||||
} |
||||
.dy-content .dy-videos .dy-video-primary .dy-video-rating { |
||||
position: absolute; |
||||
right: 5px; |
||||
top: 5px; |
||||
color: #FF3728; |
||||
font-size: 15px |
||||
} |
||||
.dy-content .dy-videos ul li.dy-video-item .dy-video-meta { |
||||
display: none |
||||
} |
||||
.dy-content .dy-videos ul li.dy-video-item:hover .dy-video-poster { |
||||
z-index: 3 |
||||
} |
||||
.dy-content .dy-videos ul li.dy-video-item:hover .dy-video-meta { |
||||
display: block; |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-bg { |
||||
position: absolute; |
||||
top: -4px; |
||||
width: 500px; |
||||
height: 242px; |
||||
background-color: #fff; |
||||
border: 1px solid #000; |
||||
border-radius: 2px; |
||||
z-index: 2; |
||||
box-shadow: -1px 10px 35px 0px rgba(0,0,0,0.39); |
||||
-webkit-box-shadow: -1px 10px 35px 0px rgba(0,0,0,0.39); |
||||
-moz-box-shadow: -1px 10px 35px 0px rgba(0,0,0,0.39); |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-dy { |
||||
position: absolute; |
||||
top: 0; |
||||
width: 280px; |
||||
padding: 0 18px; |
||||
height: 235px; |
||||
background-color: #fff; |
||||
overflow: hidden; |
||||
z-index: 4 |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-title { |
||||
line-height: 40px; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
-o-text-overflow: ellipsis; |
||||
text-overflow: ellipsis; |
||||
color: #558dy9 |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-title a { |
||||
color: #558dy9; |
||||
font-size: 18px; |
||||
text-decoration: none |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-list { |
||||
*zoom: 1; |
||||
position: relative |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-list:after { |
||||
content: "\0020"; |
||||
display: block; |
||||
height: 0; |
||||
clear: both; |
||||
overflow: hidden; |
||||
visibility: hidden |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-list li { |
||||
float: left; |
||||
line-height: 25px; |
||||
height: 25px |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-list li a { |
||||
color: #427fd0 |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-list .dy-video-actors { |
||||
float: none; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
-o-text-overflow: ellipsis; |
||||
text-overflow: ellipsis; |
||||
color: #427FD0 |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-split { |
||||
margin-left: 5px; |
||||
color: #a7a9ac |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-tip { |
||||
color: #a7a9ac |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-meta-none, .dy-content .dy-videos .dy-video-meta .dy-video-meta-filter { |
||||
color: #444 |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-intro { |
||||
margin-top: 10px; |
||||
line-height: 20px; |
||||
height: 60px; |
||||
overflow: hidden; |
||||
color: #5f5f5f |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-intro-more { |
||||
color: #558dy9 |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta .dy-video-rating { |
||||
position: absolute; |
||||
right: 30px; |
||||
top: 10px; |
||||
color: #FF3728; |
||||
font-size: 16px |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta-left .dy-video-meta-bg { |
||||
right: -4px |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta-left .dy-video-meta-dy { |
||||
right: 180px |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta-right .dy-video-meta-bg { |
||||
left: -4px |
||||
} |
||||
.dy-content .dy-videos .dy-video-meta-right .dy-video-meta-dy { |
||||
left: 180px |
||||
} |
After Width: | Height: | Size: 4.6 KiB |
After Width: | Height: | Size: 5.5 KiB |
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,47 @@ |
||||
{% extends 'template.html' %} |
||||
{% block title %} |
||||
<title>教学视频</title> |
||||
{% load static %} |
||||
<link rel="stylesheet" type="text/css" href="{% static 'css/video/style.css' %}"/> |
||||
{% endblock %} |
||||
{% block content %} |
||||
<div class="main" style="padding-top: 80px"> |
||||
<div class="dy-content"> |
||||
{% for k,v in data.items %} |
||||
<h1>{{ k }}</h1> |
||||
<div class="dy-videos"> |
||||
<ul class="dy-video-list"> |
||||
{% for i in v %} |
||||
<li data- class="dy-video-item dy-video-meta-right"> |
||||
<div class="dy-video-meta"> |
||||
<div class="dy-video-meta-bg"></div> |
||||
<div class="dy-video-meta-dy"> |
||||
<h4 class="dy-video-title">{{ i.video_title }}</h4> |
||||
<span class="dy-video-rating">{{ i.video_size|filesizeformat }}</span> |
||||
<ul class="dy-video-meta-list"> |
||||
<li class="dy-video-starts"><span |
||||
class="dy-video-tip"> 作者 </span> {{ i.username }} </li> |
||||
<li class="dy-video-starts"><span class="dy-video-tip">上传时间</span> <span |
||||
class="dy-video-meta-filter">{{ i.video_time }}</span></li> |
||||
</ul> |
||||
<p class="dy-video-intro">本视频由千锋云计算持续维护,加速通道正在开发当中。</p> |
||||
</div> |
||||
<div class="dy-video-meta-bg"></div> |
||||
</div> |
||||
<div class="dy-video-poster"><a |
||||
href="{% url 'App:videoView' %}?videopath={{ i.video_path }}" |
||||
class="dy-video-link"> <img class="dy-video-img" src="{{ i.video_image }}" |
||||
alt="{{ i.video_title }}"> <span |
||||
class="dy-video-nocomplete"></span> <span |
||||
class="dy-video-date">{{ i.video_time }} </span> <span |
||||
class="dy-video-bg"></span> <span class="s-pay"></span> </a></div> |
||||
<div class="dy-video-primary"> |
||||
<h4 class="dy-video-title">{{ i.video_title }}</h4></div> |
||||
</li> |
||||
{% endfor %} |
||||
</ul> |
||||
</div> |
||||
{% endfor %} |
||||
</div> |
||||
</div> |
||||
{% endblock %} |
@ -0,0 +1,157 @@ |
||||
{% extends 'template.html' %} |
||||
{% block title %} |
||||
{% load static %} |
||||
<html lang="cn"> |
||||
<head> |
||||
<link href="{% static 'css/video/main-css.css' %}" rel="stylesheet"> |
||||
</head> |
||||
<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"> |
||||
<title>视频播放</title> |
||||
<style> |
||||
html, body { |
||||
width: 100%; |
||||
height: 80%; |
||||
background-color: #292929; |
||||
} |
||||
|
||||
* { |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
/* 设置视频外部容器样式 */ |
||||
#videoContainer { |
||||
width: 1200px; |
||||
height: 650px; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
margin-top: 80px; |
||||
} |
||||
</style> |
||||
{% endblock %} |
||||
{% block content %} |
||||
<!-- 设置视频插件容器 --> |
||||
<div style="background-color: #5c636a"> |
||||
<div id="videoContainer"></div> |
||||
<script type="text/javascript" src="{% static 'js/video/superVideo.js' %}"></script> |
||||
</div> |
||||
<script> |
||||
/* 以下将定义视频插件常用的几个控件 */ |
||||
// 实例化一个“下一个”按钮控件 |
||||
var nextControl = new Super.NextControl() |
||||
// 实例化一个倍速控件 |
||||
var Dbspeen = new Super.DbspeenControl() |
||||
// 实例化一个弹幕输入框控件 |
||||
var BarrageControl = new Super.BarrageControl() |
||||
// 实例化一个全屏按钮控件 |
||||
var fullScreenControl = new Super.FullScreenControl() |
||||
// 实例化视频播放资源 |
||||
var source = new Super.VideoSource({ |
||||
// type: 视频类型 mp4:可播放浏览器支持的常见格式的视频文件(mp4/ogg/webm) m3u8: 可播放Hls形式推流直播视频(***.m3u8) flv: 可播放flv视频 |
||||
// src: 视频路径,可以是本地路径亦可是网络路径 |
||||
type: 'mp4', |
||||
src: '{{ path }}' |
||||
}) |
||||
|
||||
/* 插件的常用配置参数 */ |
||||
var config = { |
||||
// 是否自动播放(该功能受限于浏览器安全策略,可能会失效,解决思路为初始化时设置为静音,加载完毕后取消静音) |
||||
autoplay: false, |
||||
currentTime: 0, // 设置视频初始播放时间,单位为秒 |
||||
loop: false, // 是否循环播放 |
||||
muted: false, // 是否默认静音 |
||||
playbackRate: 1, // 视频默认播放速度 |
||||
poster: '', // 视频首帧图片路径 |
||||
volume: 0.5, // 视频默认音量 0-1 |
||||
showPictureInPicture: true, // 是否启用画中画模式按钮(>=Chrome10有效) |
||||
source: source, // 为视频插件设置资源 |
||||
leftControls: [nextControl], // 在底部控件栏左侧插入 “下一个”按钮控件 |
||||
rightControls: [Dbspeen, fullScreenControl], // 在底部控件栏左侧插入 “倍速” 控件和 “全屏” 控件 |
||||
{#centerControls: [BarrageControl] // 在底部控件栏中间插入 “弹幕输入控件”#} |
||||
} |
||||
|
||||
//初始化插件superVideo('videoContainer')请对应好html中的插件容器id. |
||||
var video = new Super.Svideo('videoContainer', config) |
||||
|
||||
/* 以下是控件类常用的监听事件 */ |
||||
|
||||
// 监听“下一个”按钮控件点击事件 |
||||
nextControl.addEventListener('click', function (event) { |
||||
alert('click next menu !!!') |
||||
}) |
||||
// 监听进入全屏模式后触发(点击进入全屏按钮) |
||||
fullScreenControl.addEventListener('fullscreen', function (event) { |
||||
console.log('is fullscreen !!!') |
||||
}) |
||||
// 监听退出全屏模式后触发(点击退出全屏按钮) |
||||
fullScreenControl.addEventListener('cancelfullscreen', function (event) { |
||||
console.log('cancel fullscreen !!!') |
||||
}) |
||||
// 监听发送弹幕输入框输入并发送弹幕后触发 |
||||
BarrageControl.addEventListener('send', function (event) { |
||||
var value = event.target.option.value |
||||
console.log('send ' + value) |
||||
}) |
||||
|
||||
/* 以下是video类常用的监听事件 */ |
||||
// 视频准备就绪 |
||||
video.addEventListener('ready', function () { |
||||
console.log('is ready!') |
||||
}) |
||||
// 开始播放 |
||||
video.addEventListener('play', function () { |
||||
console.log('is play!') |
||||
}) |
||||
// 暂停播放 |
||||
video.addEventListener('pause', function () { |
||||
console.log('is pause!') |
||||
}) |
||||
// 监听进入全屏模式后触发 |
||||
video.addEventListener('fullscreen', function (event) { |
||||
console.log('is fullscreen !!!') |
||||
}) |
||||
// 监听退出全屏模式后触发 |
||||
video.addEventListener('cancelfullscreen', function (event) { |
||||
console.log('cancel fullscreen !!!') |
||||
}) |
||||
|
||||
{#/* 下面将演示弹幕类的用法 */#} |
||||
{##} |
||||
{#// 初始化一个弹幕实例#} |
||||
{#var barrage1 = new Super.Barrage('我是一条红色的超大号字体弹幕', {#} |
||||
{# color: 'red',#} |
||||
{# fontSize: 30#} |
||||
{# })#} |
||||
{#// 将该弹幕加入播放器插件#} |
||||
{#video.addBarrage(barrage1)#} |
||||
{##} |
||||
{#// 还可以在弹幕中插入一些dom节点#} |
||||
{#var vipDom = document.createElement('span')#} |
||||
{#vipDom.innerHTML = 'V'#} |
||||
{#vipDom.style.color = 'green'#} |
||||
{#vipDom.style.fontSize = '20px'#} |
||||
{#vipDom.style.fontWeight = '600'#} |
||||
{#vipDom.style.marginRight = '4px'#} |
||||
{#var barrage2 = new Super.Barrage('我是超级会员VIP', {#} |
||||
{# color: 'orange',#} |
||||
{# fontSize: 15,#} |
||||
{# leftDom: vipDom // 将DOM插入弹幕左侧#} |
||||
{# })#} |
||||
{#video.addBarrage(barrage2)#} |
||||
{##} |
||||
{#// 当然也可以这样简单的使用#} |
||||
{#video.addBarrage('冲鸭~~~~~~')#} |
||||
{#video.addBarrage('奥里给!!!!!!')#} |
||||
|
||||
/* |
||||
说在最后: |
||||
superVideo还有许多实用的方法/事件/属性,想深入使用的请参考API文档 —— https://hulalalalala.github.io/superVideo/api/index.html |
||||
开源不易,希望各位爱心人士点个STAR支持以下 —— https://github.com/hulalalalala/superVideo |
||||
*/ |
||||
</script> |
||||
{% endblock %} |
||||
{% block foot %} |
||||
{% endblock %} |
Loading…
Reference in new issue