andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Fix video playback

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-23 22:45:51 +02:00
parent d4c8cb772f
commit 888cdf2c96
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
2 changed files with 5 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/page/basics/video/video.scss
View file

@ -5,11 +5,6 @@
@include square(var(--large-icon-size)); @include square(var(--large-icon-size));
@include absolute-center; @include absolute-center;
visibility: hidden; visibility: hidden;
& > svg {
@include square(var(--large-icon-size));
@include absolute-center;
}
} }
video { video {
@ -21,7 +16,7 @@
z-index: 1; z-index: 1;
} }
&.loaded .loading { &.loaded:not(.fully-loaded) .loading {
visibility: visible; visibility: visible;
} }

9
src/page/basics/video/video.ts
View file

@ -10,28 +10,27 @@ export class Video extends PageElement {
super(createElement(generate(options))); super(createElement(generate(options)));
this.video = this.query('video') as HTMLVideoElement; this.video = this.query('video') as HTMLVideoElement;
this.video.addEventListener('click', this.startVideo.bind(this)); this.video.addEventListener('click', this.startVideo.bind(this));
this.video.addEventListener('play', () => this.video.addEventListener('play', () =>
this.htmlRoot.classList.add('fully-loaded') this.htmlRoot.classList.add('fully-loaded')
); );
this.query('.start-button').addEventListener('click', this.startVideo.bind(this)); this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
this.video.addEventListener('pause', this.stopVideo.bind(this)); this.video.addEventListener('pause', this.pauseVideo.bind(this));
} }
private startVideo(e: Event) { private startVideo() {
if (this.video.paused) { if (this.video.paused) {
this.query('.start-button').style.visibility = 'hidden'; this.query('.start-button').style.visibility = 'hidden';
this.htmlRoot.classList.add('loaded'); this.htmlRoot.classList.add('loaded');
this.video.play(); this.video.play();
this.video.controls = true; this.video.controls = true;
e.preventDefault();
} }
} }
private stopVideo(e: Event) { private pauseVideo() {
if (this.video.paused) { if (this.video.paused) {
this.query('.start-button').style.visibility = 'visible'; this.query('.start-button').style.visibility = 'visible';
this.video.controls = false; this.video.controls = false;
e.preventDefault();
} }
} }
} }