zprovoznění přehrávače
parent
db9c865b86
commit
0e5089afd6
@ -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 |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
@ -1,9 +1,28 @@
|
|||||||
class Controller {
|
class Controller {
|
||||||
constructor() {
|
constructor(model, view) {
|
||||||
|
this.model = model;
|
||||||
|
this.view = view;
|
||||||
|
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
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";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue