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 {
|
||||
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";
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue