Custom controls for HTML5 video element not working in chrome with angular2 when source is local

Question

I'm attempting to build a utility in angular2 to browse videos on my local desktop. I can successfully load the videos into the html5 video control and play them with the standard built-in controls but I will require custom controls to play,pause,seek, etc... When I call play() or pause() or really do anything related to the video element's events the video element "resets" itself.

Please see the Plunker project that I have created here: https://plnkr.co/edit/Zs4FAdeJz0PXPxn7PSBb?p=preview

Note that this problem only occurs when using a local file. (using the URL.CreateObjectURL(...) method. I've tried various methods using template reference variables and have also tried calling play() from the component class after using the @ViewChild directive. The results are the same - the video simply flashes on the screen and sets the currentTime back to zero.

<div>
  <h1>Local Video Sandbox</h1>
  <input type="file" (change)="onFilesSelected($event)" multiple/>
  <div *ngFor="let file of files" (click)="onSelectFile(file)">
  Select to view: {{file.name}}
  </div>
</div>

<div *ngIf="selectedSrc">
  <video #movie [src]="_domSanitizer.bypassSecurityTrustUrl(selectedSrc)" width="500" controls></video>
  <div>
    <button (click)="movie.play()">Play</button>
    <button (click)="movie.pause()">Pause</button>
  </div>
</div>

export class App {

  constructor(private _domSanitizer: DomSanitizer) {
  } 

  files: FileList;
  selectedSrc: string;

  onFilesSelected(event: any) {
    this.files = event.target.files;
  }

  onSelectFile(file: File) {
    this.selectedSrc = URL.createObjectURL(file);
  }
}

I thought this may be a browser limitation with local files but a quick adaptation of dsbonev's javascript example loading a local file works fine: http://jsfiddle.net/4msbuhng/

<h1>HTML5 local video file player example</h1>
<div id="message"></div>
<input type="file" accept="video/*"/>
<video id="movie" width="400"></video>
<button type="button"
onclick="document.getElementById('movie').pause()">Pause</button>
<button type="button"
onclick="document.getElementById('movie').play()">Play</button>

Any idea what I'm doing wrong?

chadappa · Accepted Answer · 2016-12-07 21:28:07Z

1

I was able to get this to work by calling the _domSanitizer in the event handle instead of in the template expression. I'm not exactly sure why that made a difference. Probably something to do with how the video elements properties are modified.

  onSelectFile(file: File) {
    this.selectedSrc = this._domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
    this.selectedFile = file;
  }

answered Dec 7, 2016 at 21:28

chadappa

214 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Custom controls for HTML5 video element not working in chrome with angular2 when source is local

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related