Video Vimeo Player

This commit is contained in:
Siroco 2020-10-29 20:22:35 +01:00
parent 3559b2ac43
commit c65f2cb516
6 changed files with 86 additions and 15 deletions

19
package-lock.json generated
View File

@ -1807,6 +1807,15 @@
}
}
},
"@vimeo/player": {
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.14.1.tgz",
"integrity": "sha512-PXIATVxUfblTbRoSXzNcplJFjsho6e32ltfEm4po/RFZcAOYefOO4mjxDMGUTAzo937DZvjd5n1u7+EfGHuLPw==",
"requires": {
"native-promise-only": "0.8.1",
"weakmap-polyfill": "2.0.1"
}
},
"@webassemblyjs/ast": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@ -7873,6 +7882,11 @@
"to-regex": "^3.0.1"
}
},
"native-promise-only": {
"version": "0.8.1",
"resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
"integrity": "sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE="
},
"native-request": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/native-request/-/native-request-1.0.8.tgz",
@ -12944,6 +12958,11 @@
"defaults": "^1.0.3"
}
},
"weakmap-polyfill": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.1.tgz",
"integrity": "sha512-Jy177Lvb1LCrPQDWJsXyyqf4eOhcdvQHFGoCqSv921kVF5i42MVbr4e2WEwetuTLBn1NX0IhPzTmMu0N3cURqQ=="
},
"webdriver-js-extender": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz",

View File

@ -19,9 +19,9 @@
"@angular/platform-browser": "~10.2.1",
"@angular/platform-browser-dynamic": "~10.2.1",
"@angular/router": "~10.2.1",
"@vimeo/player": "^2.14.1",
"rxjs": "~6.6.3",
"tslib": "^2.0.0",
"vimeo": "^2.1.1",
"zone.js": "~0.10.2"
},
"devDependencies": {

View File

@ -29,19 +29,19 @@ export class AppComponent {
title = 'beire-frontend';
ngOnInit() {
var $ = document.getElementById.bind(document);
var orientKey = 'orientation';
if ('mozOrientation' in screen) {
orientKey = 'mozOrientation';
} else if ('msOrientation' in screen) {
orientKey = 'msOrientation';
}
var promise = null;
if (screen[orientKey].lock) { promise = screen[orientKey].lock('landscape-primary'); }
// var $ = document.getElementById.bind(document);
//
// var orientKey = 'orientation';
// if ('mozOrientation' in screen) {
// orientKey = 'mozOrientation';
// } else if ('msOrientation' in screen) {
// orientKey = 'msOrientation';
// }
//
// var promise = null;
// if (screen[orientKey].lock) { promise = screen[orientKey].lock('landscape-primary'); }
// lockedAllowed = window.screen.lockOrientation(orientation);
document.documentElement.requestFullscreen();
// document.documentElement.requestFullscreen();
}
}

View File

@ -26,3 +26,7 @@
<span class="audioElement audioTimer" *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
<span class="audioElement"[innerHTML]="audio_title"></span>
</div>
<div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
<div id="video-player-content"></div>
</div>

View File

@ -85,3 +85,16 @@ div.footer {
div.menu {
margin-left:95vw;z-index:200;cursor:pointer;
}
div.video-player {
position:absolute;
width:100vw;
height:100vh;
z-index:300;
align-items: center;
display:flex;
background:rgba(0,0,0,0.5);
top:0;
* { margin:auto;}
}

View File

@ -1,9 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ClientService } from '../client.service';
import { Observable } from 'rxjs';
import {environment} from '../../environments/environment';
import { ActivatedRoute, Router } from '@angular/router';
import { PlayerService } from '../player.service';
import Player from '@vimeo/player';
@Component({
selector: 'app-slide',
@ -20,6 +22,12 @@ export class SlideComponent implements OnInit {
currentTime=""
audio_title="Streaming from Beire"
/* video player */
showVideo = "none";
videoPlayer:any;
_videoID:string;
//@ViewChild('vimeoPlayer') vimeoPlayer: ElementRef;
constructor(
private clientService:ClientService,
private route: ActivatedRoute,
@ -63,6 +71,29 @@ export class SlideComponent implements OnInit {
}
getVideoId():string {
return this._videoID;
}
showVideoVimeo(id:string) {
var options = {loop: false, id: id};
if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();}
this.videoPlayer = new Player('video-player-content', options);
this.showVideo = "flex"
this.videoPlayer.on('play', () => { this._videoID = id});
this.videoPlayer.on('ended', () => { this.stopVideo(); });
}
stopVideo() {
this.videoPlayer.pause().then( () => {
this.mute(); //unmute
this.showVideo = "none";
});
}
getFeaturedImage(): string {
return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
}
@ -102,8 +133,12 @@ export class SlideComponent implements OnInit {
}
playUrl() {
/* stop audio */
if (this.slide.title === this.audio_title) { this.playerService.playList() }
if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
/* playVideo */
if (this.slide.featuredVideo) { this.mute(); this.showVideoVimeo(this.slide.featuredVideo); }
/* playAudio */
else if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
}
}