updaet
This commit is contained in:
parent
6c06233cf0
commit
49ddc58ce8
3 changed files with 42 additions and 30 deletions
11
README.md
11
README.md
|
|
@ -23,6 +23,17 @@ Add the stylesheet and script:
|
|||
...
|
||||
```
|
||||
|
||||
Also add the Font Awesome that the Pylx uses:
|
||||
```html
|
||||
<script src="https://kit.fontawesome.com/ecedfeb6bc.js" crossorigin="anonymous"></script>
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>About this Font Awesome Pro Kit</summary>
|
||||
This kit is a Pro kit provided by SudoVanilla, it has only a limited amount icons that can be used since subsetting is used.
|
||||
</details>
|
||||
|
||||
|
||||
Then, add the class name `plyx-player` to the `<video>` element and make sure it's wrapped around a div contained with the class name `video-container`:
|
||||
```html
|
||||
<div class="video-container">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@sudovanilla/plyx-player",
|
||||
"version": "0.1.0",
|
||||
"version": "0.1.1",
|
||||
"description": "Custom player for HTML5",
|
||||
"author": "sudovanilla",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
.plyx-player-controls {
|
||||
display: inline-flex;
|
||||
|
|
@ -20,21 +21,21 @@
|
|||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||
flex-direction: inherit;
|
||||
}
|
||||
.row-1 {
|
||||
.video-container .row-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.row-1-start {
|
||||
.video-container .row-1-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.row-1-end {
|
||||
.video-container .row-1-end {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
button {
|
||||
.video-container button {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
|
|
@ -43,27 +44,27 @@ button {
|
|||
border: none;
|
||||
margin: 0px 6px;
|
||||
}
|
||||
button:hover {
|
||||
.video-container button:hover {
|
||||
background: rgba(44, 44, 44, 0.6);
|
||||
border-radius: 6px;
|
||||
}
|
||||
#volume-button svg {
|
||||
.video-container #volume-button svg {
|
||||
aspect-ratio: 1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
fill: white;
|
||||
padding: 3px 0px 0px 0px;
|
||||
}
|
||||
.video-controls.hide {
|
||||
.video-container .video-controls.hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.video-progress {
|
||||
.video-container .video-progress {
|
||||
position: relative;
|
||||
height: 6.4px;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
progress {
|
||||
.video-container progress {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
|
@ -74,29 +75,29 @@ progress {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
progress::-webkit-progress-bar {
|
||||
.video-container progress::-webkit-progress-bar {
|
||||
background-color: #474545;
|
||||
border-radius: 2px;
|
||||
}
|
||||
progress::-webkit-progress-value {
|
||||
.video-container progress::-webkit-progress-value {
|
||||
background: red;
|
||||
border-radius: 2px;
|
||||
}
|
||||
progress::-moz-progress-bar {
|
||||
.video-container progress::-moz-progress-bar {
|
||||
border: none;
|
||||
background: #ff7e7e;
|
||||
}
|
||||
.seek {
|
||||
.video-container .seek {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
.seek:hover + .seek-tooltip {
|
||||
.video-container .seek:hover + .seek-tooltip {
|
||||
display: block;
|
||||
}
|
||||
.seek-tooltip {
|
||||
.video-container .seek-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
|
|
@ -108,30 +109,30 @@ progress::-moz-progress-bar {
|
|||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
input[type=range] {
|
||||
.video-container input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
height: 8.4px;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
input[type=range]:focus {
|
||||
.video-container input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
.video-container input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
input[type=range]:focus::-moz-range-track {
|
||||
.video-container input[type=range]:focus::-moz-range-track {
|
||||
outline: none;
|
||||
}
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
.video-container input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
border-radius: 1.3px;
|
||||
-webkit-appearance: none;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
.video-container input[type=range]::-webkit-slider-thumb {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 16px;
|
||||
|
|
@ -140,7 +141,7 @@ input[type=range]::-webkit-slider-thumb {
|
|||
-webkit-appearance: none;
|
||||
margin-left: -1px;
|
||||
}
|
||||
input[type=range]::-moz-range-track {
|
||||
.video-container input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
|
|
@ -148,24 +149,24 @@ input[type=range]::-moz-range-track {
|
|||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
input[type=range].volume {
|
||||
.video-container input[type=range].volume {
|
||||
height: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
input[type=range].volume::-webkit-slider-runnable-track {
|
||||
.video-container input[type=range].volume::-webkit-slider-runnable-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
input[type=range].volume::-webkit-slider-thumb {
|
||||
.video-container input[type=range].volume::-webkit-slider-thumb {
|
||||
margin-left: 0;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
background: #fff;
|
||||
}
|
||||
input[type=range].volume::-moz-range-thumb {
|
||||
.video-container input[type=range].volume::-moz-range-thumb {
|
||||
border: 1px solid #fff;
|
||||
background: #fff;
|
||||
}
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
.video-container input[type="range"]::-moz-range-thumb {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 10px;
|
||||
|
|
@ -173,11 +174,11 @@ input[type="range"]::-moz-range-thumb {
|
|||
background: #f00;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hide {
|
||||
.video-container .hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
#progress-bar {
|
||||
.video-container #progress-bar {
|
||||
background: rgba(12, 12, 12, 0.1);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
Reference in a new issue