Merge pull request #14 from thisissoon/fix/autoplay-safari-2

fix(VideoLoader): another fix for autoplay issue on ios safari with controls disabled

Author: edoparearyee

src/app/app.component.html

@@ -32,7 +32,7 @@ <h3>Bottom image imageLoaded event count: <span class="image-loaded-count">{{ im
   [loop]="true"
   [muted]="true"
   [autoplay]="true"
-  [controls]="true"
+  [controls]="false"
   [playsInline]="true"
   type="video/mp4"
   videoClass="video"

src/app/video-loader/video-loader/video-loader.component.html

@@ -2,7 +2,7 @@
   *ngIf="video"
   [src]="src"
   [class]="videoClass"
-  [attr.poster]="poster"
+  [poster]="poster"
   [autoplay]="autoplay"
   [loop]="loop"
   [muted]="muted"

src/app/video-loader/video-loader/video-loader.component.ts

@@ -5,6 +5,7 @@ import {
   NgZone,
   ViewChild,
   AfterViewInit,
+  OnInit,
   OnDestroy,
   ChangeDetectorRef,
   ElementRef
@@ -46,7 +47,7 @@ import { ImageLoadedEvent } from '../../image-loader/shared/image-loaded-event.m
   templateUrl: './video-loader.component.html',
   styleUrls: ['./video-loader.component.scss']
 })
-export class VideoLoaderComponent implements AfterViewInit, OnDestroy {
+export class VideoLoaderComponent implements OnInit, AfterViewInit, OnDestroy {
   /**
    * Videos to select from
    *
@@ -205,6 +206,17 @@ export class VideoLoaderComponent implements AfterViewInit, OnDestroy {
     private ngZone: NgZone,
     private cdRef: ChangeDetectorRef
   ) { }
+  /**
+   * Set poster before component renders to resolve an issue
+   * with autoplay on safari browsers
+   *
+   * @memberof VideoLoaderComponent
+   */
+  public ngOnInit(): void {
+    if (this.video.poster && this.video.poster.placeholder) {
+      this.poster = this.video.poster.placeholder;
+    }
+  }
   /**
    * Subscribe to `resize` window event observable
    * and run callback