updaet
This commit is contained in:
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
|
# 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() {
|
function AddControls() {
|
||||||
var add_controls = `
|
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">
|
||||||
<div class="row-1-start">
|
<div class="row-1-start">
|
||||||
<button id="play-pause"><i class="fa-solid fa-play"></i></button>
|
<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>
|
<button id="fullscreen"><i class="fa-solid fa-expand"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
`
|
`
|
||||||
video.insertAdjacentHTML("afterend", add_controls);
|
video.insertAdjacentHTML("afterend", add_controls);
|
||||||
|
video.setAttribute("oncontextmenu", "return false")
|
||||||
}
|
}
|
||||||
|
|
||||||
function Util() {
|
function Util() {
|
||||||
|
@ -176,13 +177,11 @@ function Util() {
|
||||||
}
|
}
|
||||||
|
|
||||||
videoControls.classList.add('hide')
|
videoControls.classList.add('hide')
|
||||||
console.log('0')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show_Controls displays the video controls
|
// Show_Controls displays the video controls
|
||||||
function Show_Controls() {
|
function Show_Controls() {
|
||||||
videoControls.classList.remove('hide')
|
videoControls.classList.remove('hide')
|
||||||
console.log('1')
|
|
||||||
}
|
}
|
||||||
video.addEventListener('mouseenter', Show_Controls)
|
video.addEventListener('mouseenter', Show_Controls)
|
||||||
video.addEventListener('mouseleave', Hide_Controls)
|
video.addEventListener('mouseleave', Hide_Controls)
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
}
|
}
|
||||||
.plyx-player-controls {
|
.plyx-player-controls {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
@ -16,13 +17,14 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
transition: all 0.2s ease;
|
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;
|
flex-direction: inherit;
|
||||||
}
|
}
|
||||||
.row-1 {
|
.row-1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding-bottom: 12px;
|
||||||
}
|
}
|
||||||
.row-1-start {
|
.row-1-start {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -59,7 +61,7 @@ button:hover {
|
||||||
.video-progress {
|
.video-progress {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 6.4px;
|
height: 6.4px;
|
||||||
margin: 6px -10px -8px -10px;
|
margin: 24px 0px;
|
||||||
}
|
}
|
||||||
progress {
|
progress {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
@ -165,8 +167,8 @@ input[type=range].volume::-moz-range-thumb {
|
||||||
}
|
}
|
||||||
input[type="range"]::-moz-range-thumb {
|
input[type="range"]::-moz-range-thumb {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
width: 6px;
|
width: 12px;
|
||||||
border-radius: 0px;
|
border-radius: 10px;
|
||||||
border: none;
|
border: none;
|
||||||
background: #f00;
|
background: #f00;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -176,6 +178,7 @@ input[type="range"]::-moz-range-thumb {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
#progress-bar {
|
#progress-bar {
|
||||||
background: transparent;
|
background: rgba(12, 12, 12, 0.1);
|
||||||
border: none;
|
border: none;
|
||||||
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue