master
parent
e53d6e4eec
commit
0f9c498c16
@ -1,4 +1,5 @@ |
|||||||
*.pyc |
*.pyc |
||||||
__pycache__/ |
__pycache__/ |
||||||
.idea/ |
.idea/ |
||||||
venv/ |
venv/ |
||||||
|
upload/ |
||||||
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