video controls
This commit is contained in:
parent
b9a4c8c18c
commit
3109c791f1
6 changed files with 149 additions and 20 deletions
48
static/img/play.svg
Normal file
48
static/img/play.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="222.31953"
|
||||
height="222.31953"
|
||||
viewBox="0 0 222.31953 222.31953"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="play.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="0.24705882"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1.4142136"
|
||||
inkscape:cx="105.00535"
|
||||
inkscape:cy="77.781744"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-17.543759,-18.097959)">
|
||||
<path
|
||||
id="path5"
|
||||
style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
|
||||
d="M 128.70353,18.097959 A 22.586276,22.586276 0 0 0 106.11724,40.684235 V 106.67145 H 40.130023 A 22.586276,22.586276 0 0 0 17.543759,129.25773 22.586276,22.586276 0 0 0 40.130023,151.844 h 65.987217 v 65.98721 a 22.586276,22.586276 0 0 0 22.58629,22.58629 22.586276,22.586276 0 0 0 22.58626,-22.58629 V 151.844 h 65.98722 A 22.586276,22.586276 0 0 0 239.8633,129.25773 22.586276,22.586276 0 0 0 217.27701,106.67145 H 151.28979 V 40.684235 A 22.586276,22.586276 0 0 0 128.70353,18.097959 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
48
static/img/stop.svg
Normal file
48
static/img/stop.svg
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="170.4344"
|
||||
height="170.4344"
|
||||
viewBox="0 0 170.4344 170.4344"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
|
||||
sodipodi:docname="stop.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#000000"
|
||||
bordercolor="#ffffff"
|
||||
borderopacity="0.24705882"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:zoom="1.4142136"
|
||||
inkscape:cx="52.679454"
|
||||
inkscape:cy="25.455843"
|
||||
inkscape:window-width="1860"
|
||||
inkscape:window-height="1004"
|
||||
inkscape:window-x="30"
|
||||
inkscape:window-y="46"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false" />
|
||||
<defs
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-43.486324,-44.040524)">
|
||||
<path
|
||||
id="path5"
|
||||
style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
|
||||
d="m 207.30536,50.655902 a 22.586276,22.586276 0 0 0 -31.94183,-10e-6 L 128.70352,97.3159 82.043514,50.655891 a 22.586276,22.586276 0 0 0 -31.941812,1.1e-5 22.586276,22.586276 0 0 0 -5e-6,31.941805 l 46.660009,46.660013 -46.660004,46.66 a 22.586276,22.586276 0 0 0 0,31.94184 22.586276,22.586276 0 0 0 31.941817,-2e-5 l 46.660001,-46.66001 46.66001,46.66001 a 22.586276,22.586276 0 0 0 31.94183,2e-5 22.586276,22.586276 0 0 0 -1e-5,-31.94183 l -46.66001,-46.66001 46.66001,-46.660011 a 22.586276,22.586276 0 0 0 1e-5,-31.941807 z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -36,7 +36,8 @@ textarea,
|
|||
.button,
|
||||
.area,
|
||||
form,
|
||||
.video {
|
||||
.video,
|
||||
.controls {
|
||||
border: solid var(--dark-2) 3px;
|
||||
border-radius: 5px;
|
||||
|
||||
|
|
@ -45,6 +46,11 @@ form,
|
|||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
video {
|
||||
border: solid var(--dark-2) 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
form span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -77,7 +83,7 @@ form {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
#main-content {
|
||||
.main-content {
|
||||
width: 720px;
|
||||
}
|
||||
|
||||
|
|
@ -115,7 +121,8 @@ form {
|
|||
}
|
||||
|
||||
video {
|
||||
width: 690px;
|
||||
width: 900px;
|
||||
max-width: 90vw;
|
||||
}
|
||||
|
||||
.video img {
|
||||
|
|
@ -135,6 +142,12 @@ video {
|
|||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.videos a {
|
||||
color: var(--dark-1);
|
||||
}
|
||||
|
|
@ -143,7 +156,7 @@ textarea {
|
|||
display: block;
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
.progressbar {
|
||||
background-color: var(--light-1);
|
||||
border: solid var(--dark-2) 2px;
|
||||
border-radius: 13px;
|
||||
|
|
@ -151,12 +164,25 @@ textarea {
|
|||
margin: 0;
|
||||
position: relative;
|
||||
top: -40px;
|
||||
width: 680px;
|
||||
width: 893px;
|
||||
max-width: 89vw;
|
||||
}
|
||||
|
||||
#progressbar>div {
|
||||
.progressbar>div {
|
||||
background-color: var(--light-2);
|
||||
width: 40%;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: -30px;
|
||||
}
|
||||
|
||||
.controls img {
|
||||
width: 45px;
|
||||
}
|
||||
|
||||
img.dark {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ async function formClick(ev) {
|
|||
function moveBar(e, bar, vid) {
|
||||
let rect = bar.getBoundingClientRect();
|
||||
let prog = ((e.pageX - rect.x) / rect.width);
|
||||
|
||||
|
||||
vid.currentTime = prog * vid.duration;
|
||||
}
|
||||
|
||||
|
|
@ -31,10 +31,14 @@ function prog(vid, bar) {
|
|||
}
|
||||
|
||||
function controls(vid) {
|
||||
let bar = vid.querySelector('#progressbar');
|
||||
let bar = vid.querySelector('.progressbar');
|
||||
let video = vid.querySelector('video');
|
||||
let play = vid.querySelector('.play');
|
||||
|
||||
video.onclick = play.onclick = () => {
|
||||
|
||||
play.querySelector('img').src = !video.paused ? '/static/img/play.svg' : '/static/img/stop.svg';
|
||||
|
||||
video.onclick = () => {
|
||||
if (video.paused) {
|
||||
video.play();
|
||||
return;
|
||||
|
|
@ -49,7 +53,7 @@ function controls(vid) {
|
|||
|
||||
window.onload = function () {
|
||||
document.addEventListener('submit', formClick);
|
||||
for (let vid of document.querySelectorAll('#video')) {
|
||||
for (let vid of document.querySelectorAll('.video-wrapper')) {
|
||||
controls(vid);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
<%- include('header.ejs') -%>
|
||||
<div class='area'>
|
||||
<h1>Video</h1>
|
||||
<div id='video'>
|
||||
<div class='video-wrapper'>
|
||||
<video src='/videos/<%= videoData.id %>.webm'></video>
|
||||
<div id="progressbar">
|
||||
<div class="progressbar">
|
||||
<div></div>
|
||||
</div>
|
||||
<div class='controls'>
|
||||
<div class='play'><img src='/static/img/play.svg' class='dark'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div><b>
|
||||
<%= videoData.title %>
|
||||
|
|
@ -15,6 +18,5 @@
|
|||
<%= videoData.username %>
|
||||
</a></div>
|
||||
<pre><%= videoData.desc %></pre>
|
||||
<!-- todo: custom video player-->
|
||||
</div>
|
||||
<%- include('footer.ejs') -%>
|
||||
|
|
@ -2,13 +2,14 @@
|
|||
<div class='video'>
|
||||
<a href='/client/video?id=<%= videoData.id %>'>
|
||||
<img src='/videos/<%= videoData.id %>.png'>
|
||||
<div><b>
|
||||
<%= videoData.title %>
|
||||
</b>
|
||||
</div>
|
||||
<div>by <a href="/client/user?id=<%= videoData.username %>">
|
||||
<%= videoData.username %>
|
||||
</a></div>
|
||||
</a>
|
||||
<div><b>
|
||||
<%= videoData.title %>
|
||||
</b>
|
||||
</div>
|
||||
<div>by <a href="/client/user?id=<%= videoData.username %>">
|
||||
<%= videoData.username %>
|
||||
</a></div>
|
||||
</a>
|
||||
</div>
|
||||
<% } %>
|
||||
Loading…
Reference in a new issue