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

Simplify video component

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-25 10:38:44 +02:00
parent aab4cade5e
commit 77a9bcdddf
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
3 changed files with 6 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/page/video/video.html.ts
View file

@ -19,7 +19,7 @@ export const generate = ({
alt: altText, alt: altText,
isIgnoredByImageViewer: true, isIgnoredByImageViewer: true,
})} })}
<video playsinline preload="none"> <video playsinline controls preload="none">
<source src="${webm}" type="video/webm"/> <source src="${webm}" type="video/webm"/>
<source src="${mp4}" type="video/mp4"/> <source src="${mp4}" type="video/mp4"/>
</video> </video>

12
src/page/video/video.scss
View file

@ -1,16 +1,8 @@
@use '../../style/mixins' as *; @use '../../style/mixins' as *;
.video-container { .video-container {
video { &.loaded > .start-button,
z-index: 1; &:not(.loaded) > video {
visibility: hidden; visibility: hidden;
} }
.start-button {
z-index: 1;
}
&.fully-loaded video {
visibility: visible;
}
} }

22
src/page/video/video.ts
View file

@ -4,31 +4,15 @@ import { VideoParameters } from './video-parameters';
import { generate } from './video.html'; import { generate } from './video.html';
export class Video extends PageElement { export class Video extends PageElement {
private video: HTMLVideoElement;
public constructor(options: VideoParameters) { public constructor(options: VideoParameters) {
super(createElement(generate(options))); super(createElement(generate(options)));
this.video = this.query('video') as HTMLVideoElement;
this.htmlRoot.addEventListener('click', this.startVideo.bind(this));
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.pauseVideo.bind(this));
} }
private startVideo() { private startVideo() {
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.query('video') as HTMLVideoElement).play();
this.video.play();
this.video.controls = true;
}
}
private pauseVideo() {
if (this.video.paused) {
this.query('.start-button').style.visibility = 'visible';
this.video.controls = false;
}
} }
} }