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`:
|
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
|
```html
|
||||||
<div class="video-container">
|
<div class="video-container">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "@sudovanilla/plyx-player",
|
"name": "@sudovanilla/plyx-player",
|
||||||
"version": "0.1.0",
|
"version": "0.1.1",
|
||||||
"description": "Custom player for HTML5",
|
"description": "Custom player for HTML5",
|
||||||
"author": "sudovanilla",
|
"author": "sudovanilla",
|
||||||
"license": "AGPL-3.0-or-later",
|
"license": "AGPL-3.0-or-later",
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
.plyx-player-controls {
|
.plyx-player-controls {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -20,21 +21,21 @@
|
||||||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||||
flex-direction: inherit;
|
flex-direction: inherit;
|
||||||
}
|
}
|
||||||
.row-1 {
|
.video-container .row-1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
}
|
}
|
||||||
.row-1-start {
|
.video-container .row-1-start {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.row-1-end {
|
.video-container .row-1-end {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
button {
|
.video-container button {
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
|
@ -43,27 +44,27 @@ button {
|
||||||
border: none;
|
border: none;
|
||||||
margin: 0px 6px;
|
margin: 0px 6px;
|
||||||
}
|
}
|
||||||
button:hover {
|
.video-container button:hover {
|
||||||
background: rgba(44, 44, 44, 0.6);
|
background: rgba(44, 44, 44, 0.6);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
#volume-button svg {
|
.video-container #volume-button svg {
|
||||||
aspect-ratio: 1;
|
aspect-ratio: 1;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
fill: white;
|
fill: white;
|
||||||
padding: 3px 0px 0px 0px;
|
padding: 3px 0px 0px 0px;
|
||||||
}
|
}
|
||||||
.video-controls.hide {
|
.video-container .video-controls.hide {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.video-progress {
|
.video-container .video-progress {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 6.4px;
|
height: 6.4px;
|
||||||
margin: 24px 0px;
|
margin: 24px 0px;
|
||||||
}
|
}
|
||||||
progress {
|
.video-container progress {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
@ -74,29 +75,29 @@ progress {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
progress::-webkit-progress-bar {
|
.video-container progress::-webkit-progress-bar {
|
||||||
background-color: #474545;
|
background-color: #474545;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
progress::-webkit-progress-value {
|
.video-container progress::-webkit-progress-value {
|
||||||
background: red;
|
background: red;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
progress::-moz-progress-bar {
|
.video-container progress::-moz-progress-bar {
|
||||||
border: none;
|
border: none;
|
||||||
background: #ff7e7e;
|
background: #ff7e7e;
|
||||||
}
|
}
|
||||||
.seek {
|
.video-container .seek {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.seek:hover + .seek-tooltip {
|
.video-container .seek:hover + .seek-tooltip {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
.seek-tooltip {
|
.video-container .seek-tooltip {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -50px;
|
top: -50px;
|
||||||
|
@ -108,30 +109,30 @@ progress::-moz-progress-bar {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: rgba(0, 0, 0, 0.6);
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
input[type=range] {
|
.video-container input[type=range] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
height: 8.4px;
|
height: 8.4px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
input[type=range]:focus {
|
.video-container input[type=range]:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
.video-container input[type=range]:focus::-webkit-slider-runnable-track {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
input[type=range]:focus::-moz-range-track {
|
.video-container input[type=range]:focus::-moz-range-track {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
input[type=range]::-webkit-slider-runnable-track {
|
.video-container input[type=range]::-webkit-slider-runnable-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 1.3px;
|
border-radius: 1.3px;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
transition: all 0.4s ease;
|
transition: all 0.4s ease;
|
||||||
}
|
}
|
||||||
input[type=range]::-webkit-slider-thumb {
|
.video-container input[type=range]::-webkit-slider-thumb {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
|
@ -140,7 +141,7 @@ input[type=range]::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
input[type=range]::-moz-range-track {
|
.video-container input[type=range]::-moz-range-track {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 8.4px;
|
height: 8.4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -148,24 +149,24 @@ input[type=range]::-moz-range-track {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
input[type=range].volume {
|
.video-container input[type=range].volume {
|
||||||
height: 5px;
|
height: 5px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
input[type=range].volume::-webkit-slider-runnable-track {
|
.video-container input[type=range].volume::-webkit-slider-runnable-track {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
input[type=range].volume::-webkit-slider-thumb {
|
.video-container input[type=range].volume::-webkit-slider-thumb {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
input[type=range].volume::-moz-range-thumb {
|
.video-container input[type=range].volume::-moz-range-thumb {
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
input[type="range"]::-moz-range-thumb {
|
.video-container input[type="range"]::-moz-range-thumb {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
@ -173,11 +174,11 @@ input[type="range"]::-moz-range-thumb {
|
||||||
background: #f00;
|
background: #f00;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.hide {
|
.video-container .hide {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
#progress-bar {
|
.video-container #progress-bar {
|
||||||
background: rgba(12, 12, 12, 0.1);
|
background: rgba(12, 12, 12, 0.1);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
Reference in a new issue