markdown Angular - 样本圆角视频播放器

Posted 2021-05-06

# Angular - Sample Round Corner Video Player

Written with Angular 6

***jio-video-player.component.ts***:

```typescript
import { AfterViewInit, Component, Input, OnInit } from '@angular/core';
import { AnimationUtil } from '../../util/AnimationUtil';
import { AgentUtil } from '../../util/AgentUtil';

@Component({
    selector: 'app-jio-video-player',
    templateUrl: './jio-video-player.component.html',
    styleUrls: ['./jio-video-player.component.scss']
})
export class JioVideoPlayerComponent implements OnInit, AfterViewInit {
    @Input() videoURL: string;
    @Input() videoHeight: number; //only need one attribute (height or width) to keep the aspect ratio
    @Input() representativeFrame: string;
    @Input() playIconSize = 24; //default is 24px, change to suit your need.

    containerID = 'videoPlayerContainer';
    videoPlayerID = 'videoPlayer';
    overlayContainerID = 'overlayContainer';

    private player: HTMLVideoElement;
    private overlay: HTMLElement;

    constructor() {
    }

    ngOnInit() {
    }

    ngAfterViewInit(): void {
        this.overlay = document.getElementById(this.overlayContainerID);
        this.player = <HTMLVideoElement> document.getElementById(this.videoPlayerID);

        this.player.addEventListener('loadedmetadata', () => {
            this.resizeVideoContainer();
        });
        this.player.onended = () => {
            this.toggleOverlay();
        };
        this.player.onwebkitfullscreenchange = () => {
            this.toggleOverlay();
        };
    }

    private resizeVideoContainer() {
        let ratio = this.player.videoWidth / this.player.videoHeight;
        let targetWidth = this.videoHeight * ratio;

        let container = document.getElementById(this.containerID);
        container.style.width = targetWidth + 'px';
        container.style.height = this.videoHeight + 'px';
    }

    private toggleOverlay() {
        if (this.player.paused) {
            AnimationUtil.fadeIn(this.overlay);
        } else {
            AnimationUtil.fadeOut(this.overlay);
        }
    }

    togglePlayPause() {
        if (this.player.paused) {
            this.player.play();
            if (!AgentUtil.isIOSDevice()) {
                AnimationUtil.fadeOut(this.overlay);
            }

            this.player.style.background = 'black'; //remove the background
        } else {
            if (!AgentUtil.isIOSDevice()) {
                AnimationUtil.fadeIn(this.overlay);
            }
            this.player.pause();
        }
    }

    goFullScreen() {
        if (this.player.requestFullscreen) {
            this.player.requestFullscreen();
        }
        /*else if (this.player.mozRequestFullScreen) {
            this.player.mozRequestFullScreen(); // Firefox
        } */
        else if (this.player.webkitRequestFullscreen) {
            this.player.webkitRequestFullscreen(); // Chrome and Safari
        } else {
            this.player.webkitEnterFullScreen(); // Chrome and Safari iPhone
        }
    }
}
```

***jio-video-player.component.html***:

```html
<div id="videoPlayerContainer">
    <!--controlsList is for fullscreen only-->
    <video [id]="videoPlayerID"
           controlsList="nodownload noremoteplayback"
           poster="assets/images/transparent.png"
           [ngStyle]="{'height.px': videoHeight,
           'background': 'url(' + representativeFrame + ')',
           'background-size': 'cover'}"
           (click)="togglePlayPause()">
        <source [src]="videoURL" type="video/mp4">
        {{ 'JioVideoPlayer.error_video_not_support' | translate }}
    </video>
    <div [id]="overlayContainerID">
        <div id="overlay"
             [ngStyle]="{'height.px': videoHeight}"
             (click)="togglePlayPause()">
        </div>
        <img id="playIcon"
             (click)="togglePlayPause()"
             [ngStyle]="{'width.px': playIconSize}"
             src="assets/images/play-button-arrowhead.png"/>
    </div>
    <img id="fullscreen" src="assets/images/fullscreen-button.png" (click)="goFullScreen()"/>
</div>
```

*jio-video-player.component.scss*:

```scss
$border-radius: 8px;

video {
  width: 100%;
  border-radius: $border-radius;
  background: transparent no-repeat 0 0;
  -webkit-background-size: cover;
  background-size: cover;
}

#videoPlayerContainer {
  position: relative;
}

#overlay {
  position: absolute;
  width: 100%;
  background: black;
  opacity: 0.3;
  top: 0;
  border-radius: $border-radius;
}

#playIcon {
  position: absolute;
  width: 24px;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#fullscreen {
  position: absolute;
  width: 15px;
  height: auto;
  top: 80%;
  left: 90%;
  transform: translate(-50%, -50%);
}
```

***Util*** classes:

```typescript
// For comprehensive list of OS see
// https://stackoverflow.com/a/38559158/1602807
export class AgentUtil {
    static isIOSDevice(): boolean {
        return /iPhone|iPad|iPod/i.test(navigator.userAgent);
    }
}

// http://www.chrisbuttery.com/articles/fade-in-fade-out-with-javascript/
export class AnimationUtil {
    static fadeOut(el) {
        el.style.opacity = 1;

        (function fade() {
            if ((el.style.opacity -= .1) < 0) {
                el.style.display = 'none';
            } else {
                requestAnimationFrame(fade);
            }
        })();
    }

    static fadeIn(el) {
        el.style.opacity = 0;
        el.style.display = 'block';

        (function fade() {
            let val = parseFloat(el.style.opacity);
            if (!((val += .1) > 1)) {
                el.style.opacity = val;
                requestAnimationFrame(fade);
            }
        })();
    }
}
```