zprovoznění přehrávače

pull/9/head
David Zálešák 4 years ago
parent db9c865b86
commit 0e5089afd6

@ -123,26 +123,28 @@ article p:last-child {
grid-template-rows: auto min-content;
justify-items: center;
align-items: center;
z-index: 5;
}
.hidden {
display: none !important;
}
#togglePlay {
#togglePlayIcon {
height: 15vh;
}
.video-progress {
width: 80%;
margin-bottom: 30px;
margin-bottom: max(30px,3vh);
position: relative;
}
progress {
position: absolute;
width: 100%;
height: 5px;
height: 0.5vh;
min-height: 5px;
border: none;
background-color: #616161;
}
@ -156,7 +158,8 @@ progress::-moz-progress-bar {
appearance: none;
background: transparent;
width: 100%;
height: 5px;
height: 0.5vh;
min-height: 5px;
margin: 0;
cursor: pointer;
z-index: 5;
@ -168,9 +171,9 @@ progress::-moz-progress-bar {
.seek::-moz-range-thumb {
background-color: #ffa800;
width: 23px;
height: 23px;
border-radius: 23px;
width: 2vh;
height: 2vh;
border-radius: 2vh;
border: none;
}
@ -178,15 +181,28 @@ progress::-moz-progress-bar {
position: absolute;
background-color: #ffa800;
width: 10%;
left: 45%;
height: 5px;
z-index: 1;
left: 35%;
height: 0.5vh;
min-height: 5px;
z-index: 6;
}
.videoComment:hover {
height: 0.9vh;
min-height: 9px;
margin-top: min(-2px ,-0.2vh);
}
.videoComment:hover img {
top: min(-33px, -1.3vh);
}
.videoComment img {
position: relative;
top: -30px;
top: min(-35px,-1.5vh);
left: 50%;
margin-left: -12px;
min-width: 28px;
width: 1vh;
margin-left: min(-14px,-0.5vh);
cursor: pointer;
}

@ -0,0 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
height="327pt"
viewBox="-45 0 327 327"
width="327pt"
version="1.1"
id="svg6"
sodipodi:docname="pause.svg"
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs10" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1063"
id="namedview8"
showgrid="false"
inkscape:zoom="1.4612459"
inkscape:cx="91.895083"
inkscape:cy="254.17955"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg6" />
<path
d="m158 0h71c4.417969 0 8 3.582031 8 8v311c0 4.417969-3.582031 8-8 8h-71c-4.417969 0-8-3.582031-8-8v-311c0-4.417969 3.582031-8 8-8zm0 0"
id="path2"
style="fill:#ffa800;fill-opacity:1" />
<path
d="m8 0h71c4.417969 0 8 3.582031 8 8v311c0 4.417969-3.582031 8-8 8h-71c-4.417969 0-8-3.582031-8-8v-311c0-4.417969 3.582031-8 8-8zm0 0"
id="path4"
style="fill:#ffa800;fill-opacity:1" />
</svg>

After

Width:  |  Height:  |  Size: 1.8 KiB

@ -22,7 +22,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@ -37,8 +37,8 @@
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1063"
inkscape:window-width="1280"
inkscape:window-height="1007"
id="namedview8"
showgrid="false"
fit-margin-top="7"
@ -46,9 +46,9 @@
fit-margin-right="7"
fit-margin-bottom="7"
inkscape:zoom="9.3854166"
inkscape:cx="-1.2031055"
inkscape:cy="32.174597"
inkscape:window-x="0"
inkscape:cx="25.46994"
inkscape:cy="32.230141"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg6"
@ -61,5 +61,5 @@
<path
d="M 29.582275,20.714801 11.370313,32.856109 A 0.85913585,0.85913585 0 0 1 10.035216,32.141308 V 7.8586919 a 0.85913585,0.85913585 0 0 1 1.335097,-0.714801 L 29.582275,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
id="path4"
style="fill:#c1c1c1;fill-opacity:1;stroke-width:1.71827" />
style="fill:#ffa800;fill-opacity:1;stroke-width:1.71827" />
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

@ -10,6 +10,7 @@
<script src="./js/controller.js"></script>
<script src="./js/model.js"></script>
<script src="./js/view.js"></script>
<script src="./js/video.js"></script>
</head>
@ -38,18 +39,21 @@
</aside>
<main>
<video controls id="video" preload="auto">
<source src="video.webm">
<source src="./videos/video.webm">
</souce>
</video>
<div class="video-controls hidden" id="video-controls">
<object data="./img/play.svg" type="image/svg+xml" id="togglePlay"></object>
<div id="togglePlay">
<img src="./img/play.svg" alt="" id="togglePlayIcon">
</div>
<div class="video-progress">
<progress id="progress-bar" value="50" min="0" max="100"></progress>
<input class="seek" id="seek" value="50" min="0" max="100" type="range" step="1">
<div class="videoComment"><img src="./img/note.svg" alt=""><div>
</div>
</div>
<progress id="progress-bar" value="0" min="0"></progress>
<input class="seek" id="seek" value="0" min="0" type="range" step="1">
<div class="videoComment"><img src="./img/note.svg" alt="">
<div>
</div>
</div>
</main>
<article>
<h1>Nadpis velký</h1>

@ -1,9 +1,28 @@
class Controller {
constructor() {
constructor(model, view) {
this.model = model;
this.view = view;
this.init();
}
init() {
// Get video code
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
this.videoToLoad = urlParams.get("v");
this.loadVideo(this.videoToLoad);
}
loadVideo(v) {
let video = document.getElementById("video");
console.log(video)
video.children[0].src = "./videos/" + v + ".webm";
video.load();
console.log("here");
}
}
}

@ -0,0 +1,112 @@
class VideoPlayer {
constructor() {
this.video = document.getElementById("video");
this.video.addEventListener(
"loadedmetadata",
function () {
this.init();
}.bind(this)
);
}
// Init
init() {
this.enableCustomControls();
this.addEventListeners();
this.videoDuration = Math.round(this.video.duration);
const seek = document.getElementById("seek");
seek.setAttribute("max", this.videoDuration);
seek.value = 0;
const progressBar = document.getElementById("progress-bar");
progressBar.setAttribute("max", this.videoDuration);
}
// Přidání listenerů
addEventListeners() {
const videoControls = document.getElementById("video-controls");
const togleButton = document.getElementById("togglePlayIcon");
videoControls.addEventListener(
"click",
function (e) {
if (e.target !== videoControls && e.target !== togleButton) {
return;
}
this.togglePlay();
}.bind(this)
);
this.video.addEventListener(
"timeupdate",
function () {
this.updateProgress();
}.bind(this)
);
this.video.addEventListener(
"ended",
function () {
this.showButton();
}.bind(this)
);
const seek = document.getElementById("seek");
seek.addEventListener("input", this.skipAhead);
}
enableCustomControls() {
const video = document.getElementById("video");
const videoControls = document.getElementById("video-controls");
const videoWorks = !!document.createElement("video").canPlayType;
if (videoWorks) {
video.controls = false;
videoControls.classList.remove("hidden");
}
}
// Posouvání ve videu
skipAhead() {
const progressBar = document.getElementById("progress-bar");
video = document.getElementById("video");
let skipTo = this.value;
video.currentTime = skipTo;
progressBar.value = skipTo;
}
// Aktualizování progress baru
updateProgress() {
const seek = document.getElementById("seek");
const progressBar = document.getElementById("progress-bar");
seek.value = Math.floor(this.video.currentTime);
progressBar.value = Math.floor(this.video.currentTime);
if (this.video.currentTime == this.videoDuration) {
this.showButton();
console.log("here");
}
}
// Play pause
togglePlay() {
if (this.video.paused || this.video.ended) {
this.video.play();
this.showButton();
} else {
this.video.pause();
this.showButton();
}
}
// Zobrazenení a změna tlačítka k přehrávání
showButton() {
let playButton = document.getElementById("togglePlayIcon");
if (this.video.ended) {
playButton.setAttribute("src", "./img/play.svg");
playButton.style.removeProperty("display");
} else if (this.video.paused) {
playButton.setAttribute("src", "./img/pause.svg");
playButton.style.removeProperty("display");
} else {
playButton.style.display = "none";
}
}
}

@ -4,8 +4,9 @@ class View {
}
init() {
this.colorTogglePlaySVG();
this.enableCustomControls();
//this.colorTogglePlaySVG();
this.videoPlayer = new VideoPlayer();
/* Obarvení aktivního komentáře - dát do special metody */
@ -21,19 +22,10 @@ class View {
);
}
enableCustomControls() {
const video = document.getElementById("video");
const videoControls = document.getElementById("video-controls");
const videoWorks = !!document.createElement("video").canPlayType;
if (videoWorks) {
video.controls = false;
videoControls.classList.remove("hidden");
}
}
colorTogglePlaySVG() {
var playSVG = document.getElementById("togglePlay");
/* colorTogglePlaySVG() {
var playSVG = document.getElementById("togglePlayIcon");
var svgDoc;
playSVG.addEventListener(
"load",
@ -43,5 +35,5 @@ class View {
},
false
);
}
} */
}