github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 视频播放器代码调整

Browse Source
This commit is contained in:
pipipi-pikachu 2023-10-10 19:54:27 +08:00
parent 035b19710c
commit 0ff7efb7ba
2 changed files with 333 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

334
src/views/components/element/VideoElement/VideoPlayer/index.vue
View File

@ -354,5 +354,337 @@ useMSE(props.src, videoRef)
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import url(./style.scss); .video-player {
position: relative;
overflow: hidden;
user-select: none;
line-height: 1;
transform-origin: 0 0;
&.hide-controller {
cursor: none;
.controller-mask {
opacity: 0;
transform: translateY(100%);
}
.controller {
opacity: 0;
transform: translateY(100%);
}
}
}
.video-wrap {
position: relative;
background: #000;
font-size: 0;
width: 100%;
height: 100%;
.video {
width: 100%;
height: 100%;
}
}
.controller-mask {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
height: 98px;
width: 100%;
position: absolute;
bottom: 0;
transition: all 0.3s ease;
}
.controller {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 41px;
padding: 0 20px;
user-select: none;
transition: all 0.3s ease;
.bar-wrap {
padding: 5px 0;
cursor: pointer;
position: absolute;
bottom: 33px;
width: calc(100% - 40px);
height: 3px;
&:hover .bar .played .thumb {
transform: scale(1);
}
.bar-time {
position: absolute;
left: 0;
top: -20px;
border-radius: 4px;
padding: 5px 7px;
background-color: rgba(0, 0, 0, 0.62);
color: #fff;
font-size: 12px;
text-align: center;
opacity: 1;
transition: opacity 0.1s ease-in-out;
word-wrap: normal;
word-break: normal;
z-index: 2;
pointer-events: none;
&.hidden {
opacity: 0;
}
}
.bar {
position: relative;
height: 3px;
width: 100%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
.loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.4);
height: 3px;
transition: all 0.5s ease;
will-change: width;
}
.played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 3px;
will-change: width;
background-color: #fff;
.thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 11px;
width: 11px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-in-out;
transform: scale(0);
background-color: #fff;
}
}
}
}
.icons {
height: 38px;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
&.icons-right {
right: 15px;
}
.time {
line-height: 38px;
color: #eee;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
vertical-align: middle;
font-size: 13px;
cursor: default;
}
.icon {
width: 40px;
height: 100%;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
font-size: 20px;
&.play-icon {
font-size: 26px;
}
.icon-content {
transition: all 0.2s ease-in-out;
opacity: 0.8;
color: #fff;
}
&.loop-icon {
font-size: 12px;
.icon-content {
opacity: 0.5;
}
}
&.speed-icon {
font-size: 12px;
position: relative;
}
.speed-menu {
width: 70px;
position: absolute;
bottom: 30px;
left: -23px;
background-color: #22211b;
padding: 5px 0;
color: #ddd;
.speed-menu-item {
padding: 8px 0;
text-align: center;
&:hover {
background-color: #393833;
color: #fff;
}
&.active {
font-weight: 700;
color: #fff;
}
}
}
&.active .icon-content {
opacity: 1;
}
&:hover .icon-content {
opacity: 1;
}
}
.volume {
height: 100%;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
.volume-bar-wrap .volume-bar {
width: 45px;
}
.volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
transform: scale(1);
}
}
&.volume-active {
.volume-bar-wrap .volume-bar {
width: 45px;
}
.volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
transform: scale(1);
}
}
}
.volume-bar-wrap {
display: inline-block;
margin: 0 15px 0 -5px;
vertical-align: middle;
height: 100%;
}
.volume-bar {
position: relative;
top: 17px;
width: 0;
height: 3px;
background: #aaa;
transition: all 0.3s ease-in-out;
.volume-bar-inner {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
transition: all 0.1s ease;
will-change: width;
background-color: #fff;
.thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 11px;
width: 11px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-in-out;
transform: scale(0);
background-color: #fff;
}
}
}
.loop {
display: inline-block;
height: 100%;
}
}
}
.bezel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 22px;
color: #fff;
pointer-events: none;
.bezel-icon {
position: absolute;
top: 50%;
left: 50%;
margin: -26px 0 0 -26px;
height: 52px;
width: 52px;
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
opacity: 0;
pointer-events: none;
font-size: 40px;
&.bezel-transition {
animation: bezel-hide 0.5s linear;
}
@keyframes bezel-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(2);
}
}
}
}
.load-error {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 15px;
color: #fff;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
</style> </style>

333
src/views/components/element/VideoElement/VideoPlayer/style.scss
View File

@ -1,333 +0,0 @@
.video-player {
position: relative;
overflow: hidden;
user-select: none;
line-height: 1;
transform-origin: 0 0;
&.hide-controller {
cursor: none;
.controller-mask {
opacity: 0;
transform: translateY(100%);
}
.controller {
opacity: 0;
transform: translateY(100%);
}
}
}
.video-wrap {
position: relative;
background: #000;
font-size: 0;
width: 100%;
height: 100%;
.video {
width: 100%;
height: 100%;
}
}
.controller-mask {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
height: 98px;
width: 100%;
position: absolute;
bottom: 0;
transition: all 0.3s ease;
}
.controller {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 41px;
padding: 0 20px;
user-select: none;
transition: all 0.3s ease;
.bar-wrap {
padding: 5px 0;
cursor: pointer;
position: absolute;
bottom: 33px;
width: calc(100% - 40px);
height: 3px;
&:hover .bar .played .thumb {
transform: scale(1);
}
.bar-time {
position: absolute;
left: 0;
top: -20px;
border-radius: 4px;
padding: 5px 7px;
background-color: rgba(0, 0, 0, 0.62);
color: #fff;
font-size: 12px;
text-align: center;
opacity: 1;
transition: opacity 0.1s ease-in-out;
word-wrap: normal;
word-break: normal;
z-index: 2;
pointer-events: none;
&.hidden {
opacity: 0;
}
}
.bar {
position: relative;
height: 3px;
width: 100%;
background: rgba(255, 255, 255, 0.2);
cursor: pointer;
.loaded {
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.4);
height: 3px;
transition: all 0.5s ease;
will-change: width;
}
.played {
position: absolute;
left: 0;
top: 0;
bottom: 0;
height: 3px;
will-change: width;
background-color: #fff;
.thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 11px;
width: 11px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-in-out;
transform: scale(0);
background-color: #fff;
}
}
}
}
.icons {
height: 38px;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
&.icons-right {
right: 15px;
}
.time {
line-height: 38px;
color: #eee;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
vertical-align: middle;
font-size: 13px;
cursor: default;
}
.icon {
width: 40px;
height: 100%;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
font-size: 20px;
&.play-icon {
font-size: 26px;
}
.icon-content {
transition: all 0.2s ease-in-out;
opacity: 0.8;
color: #fff;
}
&.loop-icon {
font-size: 12px;
.icon-content {
opacity: 0.5;
}
}
&.speed-icon {
font-size: 12px;
position: relative;
}
.speed-menu {
width: 70px;
position: absolute;
bottom: 30px;
left: -23px;
background-color: #22211b;
padding: 5px 0;
color: #ddd;
.speed-menu-item {
padding: 8px 0;
text-align: center;
&:hover {
background-color: #393833;
color: #fff;
}
&.active {
font-weight: 700;
color: #fff;
}
}
}
&.active .icon-content {
opacity: 1;
}
&:hover .icon-content {
opacity: 1;
}
}
.volume {
height: 100%;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
&:hover {
.volume-bar-wrap .volume-bar {
width: 45px;
}
.volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
transform: scale(1);
}
}
&.volume-active {
.volume-bar-wrap .volume-bar {
width: 45px;
}
.volume-bar-wrap .volume-bar .volume-bar-inner .thumb {
transform: scale(1);
}
}
}
.volume-bar-wrap {
display: inline-block;
margin: 0 15px 0 -5px;
vertical-align: middle;
height: 100%;
}
.volume-bar {
position: relative;
top: 17px;
width: 0;
height: 3px;
background: #aaa;
transition: all 0.3s ease-in-out;
.volume-bar-inner {
position: absolute;
bottom: 0;
left: 0;
height: 100%;
transition: all 0.1s ease;
will-change: width;
background-color: #fff;
.thumb {
position: absolute;
top: 0;
right: 5px;
margin-top: -4px;
margin-right: -10px;
height: 11px;
width: 11px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease-in-out;
transform: scale(0);
background-color: #fff;
}
}
}
.loop {
display: inline-block;
height: 100%;
}
}
}
.bezel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 22px;
color: #fff;
pointer-events: none;
.bezel-icon {
position: absolute;
top: 50%;
left: 50%;
margin: -26px 0 0 -26px;
height: 52px;
width: 52px;
padding: 12px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
opacity: 0;
pointer-events: none;
font-size: 40px;
&.bezel-transition {
animation: bezel-hide 0.5s linear;
}
@keyframes bezel-hide {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(2);
}
}
}
}
.load-error {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 15px;
color: #fff;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}