updaet
This commit is contained in:
Korbs
parent
a3c15adc94
commit
6c06233cf0
4 changed files with 59 additions and 15 deletions
31
README.md
31
README.md
|
|
@ -1,2 +1,33 @@
|
|||
# Plyx-Player
|
||||
|
||||
> Currently in beta stages.
|
||||
|
||||
## Installing
|
||||
The Plyx Player is available to download from SudoVanilla's registry, run:
|
||||
```bash
|
||||
npm set registry https://packages.sudovanilla.com/
|
||||
```
|
||||
(This registry is also a proxy for NPM)
|
||||
|
||||
Then, for your project, install Plyx:
|
||||
```bash
|
||||
npm install @sudovanilla/plyx-player
|
||||
```
|
||||
|
||||
## Usage
|
||||
Add the stylesheet and script:
|
||||
```html
|
||||
...
|
||||
<link rel="stylesheet" href="/node_modules/@sudovanilla/plyx-player/src/styles/app.css">
|
||||
<script src="/node_modules/@sudovanilla/plyx-player/src/index.js" type="module">
|
||||
...
|
||||
```
|
||||
|
||||
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">
|
||||
<video class="plyx-player" src="video.mp4"></video>
|
||||
</div>
|
||||
```
|
||||
|
||||
That's it, if you've linked the stylesheet and script correctly, it should work.
|
||||
11
package.json
Normal file
11
package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"name": "@sudovanilla/plyx-player",
|
||||
"version": "0.1.0",
|
||||
"description": "Custom player for HTML5",
|
||||
"author": "sudovanilla",
|
||||
"license": "AGPL-3.0-or-later",
|
||||
"bugs": {
|
||||
"url": "https://sudovanilla.com/code/Korbs/Plyx-Player/issues",
|
||||
"email": "support@sduovanilla.com"
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,14 @@ const videoContainer = document.querySelector('.video-container')
|
|||
|
||||
function AddControls() {
|
||||
var add_controls = `
|
||||
<div class="plyx-player-controls">
|
||||
<div oncontextmenu="return false;" class="plyx-player-controls">
|
||||
<div class="row-2">
|
||||
<div class="video-progress">
|
||||
<progress id="progress-bar" value="0" min="0"></progress>
|
||||
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
|
||||
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-1">
|
||||
<div class="row-1-start">
|
||||
<button id="play-pause"><i class="fa-solid fa-play"></i></button>
|
||||
|
|
@ -23,16 +30,10 @@ function AddControls() {
|
|||
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="video-progress">
|
||||
<progress id="progress-bar" value="0" min="0"></progress>
|
||||
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
|
||||
<div class="seek-tooltip" id="seek-tooltip">00:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
video.insertAdjacentHTML("afterend", add_controls);
|
||||
video.setAttribute("oncontextmenu", "return false")
|
||||
}
|
||||
|
||||
function Util() {
|
||||
|
|
@ -176,13 +177,11 @@ function Util() {
|
|||
}
|
||||
|
||||
videoControls.classList.add('hide')
|
||||
console.log('0')
|
||||
}
|
||||
|
||||
// Show_Controls displays the video controls
|
||||
function Show_Controls() {
|
||||
videoControls.classList.remove('hide')
|
||||
console.log('1')
|
||||
}
|
||||
video.addEventListener('mouseenter', Show_Controls)
|
||||
video.addEventListener('mouseleave', Hide_Controls)
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
.plyx-player-controls {
|
||||
display: inline-flex;
|
||||
|
|
@ -16,13 +17,14 @@
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: all 0.2s ease;
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
|
||||
background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0), rgba(12, 12, 12, 0.75));
|
||||
flex-direction: inherit;
|
||||
}
|
||||
.row-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.row-1-start {
|
||||
display: flex;
|
||||
|
|
@ -59,7 +61,7 @@ button:hover {
|
|||
.video-progress {
|
||||
position: relative;
|
||||
height: 6.4px;
|
||||
margin: 6px -10px -8px -10px;
|
||||
margin: 24px 0px;
|
||||
}
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -165,8 +167,8 @@ input[type=range].volume::-moz-range-thumb {
|
|||
}
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
height: 12px;
|
||||
width: 6px;
|
||||
border-radius: 0px;
|
||||
width: 12px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: #f00;
|
||||
cursor: pointer;
|
||||
|
|
@ -176,6 +178,7 @@ input[type="range"]::-moz-range-thumb {
|
|||
pointer-events: none;
|
||||
}
|
||||
#progress-bar {
|
||||
background: transparent;
|
||||
background: rgba(12, 12, 12, 0.1);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue