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

Improve video UX

Browse source
This commit is contained in:
schmelczerandras 2020-11-27 12:17:47 +01:00
parent 08feeb6bfc
commit f3c8453782
13 changed files with 101 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,15 +2,40 @@ import { PageElement } from '../../page-element';
import { createElement } from '../../../helper/create-element';
import { generate } from './video.html';
import { url } from '../../../types/url';
import { ResponsiveImage } from '../../../types/responsive-image';
export interface VideoParameters {
mp4: url;
webm: url;
poster: ResponsiveImage;
invertButton?: boolean;
}
export class Video extends PageElement {
public constructor(options: {
poster?: url;
mp4: url;
webm: url;
shouldActLikeGif?: boolean;
container?: boolean;
}) {
private video: HTMLVideoElement;
public constructor(options: VideoParameters) {
super(createElement(generate(options)));
this.video = this.query('video') as HTMLVideoElement;
this.video.addEventListener('click', this.startVideo.bind(this));
this.query('.start-button').addEventListener('click', this.startVideo.bind(this));
this.video.addEventListener('pause', this.stopVideo.bind(this));
}
private startVideo(e: Event) {
if (this.video.paused) {
this.query('.start-button').style.visibility = 'hidden';
this.video.play();
this.video.controls = true;
e.preventDefault();
}
}
private stopVideo(e: Event) {
if (this.video.paused) {
this.query('.start-button').style.visibility = 'visible';
this.video.controls = false;
e.preventDefault();
}
}
}