Get source dimensions of video tag in Angular 2

Question

I'm building a video component and I need to get the dimensions of the source video(the source file or the container), to pass it to a sibbling component. I'm using this code:

//Video component
@Component({
    moduleId: module.id,
    selector: 'kt-media',
    templateUrl: 'kt-media.component.html'
})

export class KT_MediaComponent implements AfterViewInit{
  ...
  private ktIsMedia:  boolean;
  private ktMediaType: string; 
  @ViewChild('ktVideo') ktVideoElement;

  constructor(private el: ElementRef, private renderer: Renderer) {
    this.setMediaType();
  }

  ngAfterViewInit(){
    this.ktVideoElement = this.getSize();  
  }

  setMediaType(){
    //This implementation works fine, I hide it for clarity of the problem
    //Sets this.ktIsMedia to true and this.ktMediaType to 'video'
  }
  getSize():ktSize{
        let w = this.ktVideoElement.nativeElement.videoWidth;
        let h = this.ktVideoElement.nativeElement.videoHeight;
        return {width: w, height: h}
  }    
}

Here the the template of the component:

<div *ngIf="ktIsMedia && ktMediaType === 'video'" >
    <video
        #ktVideo>
        <source 
            [attr.src]="ktMediaSrc |safeUrl" 
            type="video/{{ktVideoType}}">
    </video>
</div>

The video is shown correctly but exploring the vs code debugger, it shows that the ktVideoElement videoWidth and videoHeight is 0. I tryed to implement the getSize() on diferent lifecycle hooks: aferviewinit, oninit, etc... bus always return 0 as the dimensions of the video. Is posible to get the dimensions of the source file or once the file is loaded in the view? If it is, how can I implement it?

Do you get the expected values when you use `$0.videoWidth` in the browser console? — Günter Zöchbauer, Nov 19 '16 at 11:11
Perhaps you need to wait for an event of the video element. I haven't used it, but perhaps there is some `loaded` or similar event that needs to happen before the element specifies its size. You could also try to add a button to your component that calls `getSize()`, just to see that you can get the expected values from within Angular2 at a later point of time. — Günter Zöchbauer, Nov 19 '16 at 11:15
http://stackoverflow.com/a/4129579/217408 seems to indicate you need to wait for the `loadmetadata` event — Günter Zöchbauer, Nov 19 '16 at 11:17

score 2 · Accepted Answer · edited May 23 '17 at 11:46

2

According to https://stackoverflow.com/a/4129579/217408 this should work:

<div *ngIf="ktIsMedia && ktMediaType === 'video'" >
    <video (loadmetadata)="ktVideoElement = getSize()"
        #ktVideo>
        <source 
            [attr.src]="ktMediaSrc |safeUrl" 
            type="video/{{ktVideoType}}">
    </video>
</div>

edited May 23 '17 at 11:46

Community

1
1

answered Nov 19 '16 at 11:18

Günter Zöchbauer

623,577
216
2,003
1,567

Thank Günter, that dont worked because some little details. I put the answer bellow. – Miguel Nov 19 '16 at 11:35
Ups, sorry. That was an oversight. The event is on the `video` element. The assigment to `ktVideoElement` is just copied from your source. I didn't check whether this makes sense ;-) – Günter Zöchbauer Nov 19 '16 at 11:44

score 1 · Answer 2 · answered Nov 19 '16 at 11:38

1

Based on Günter's respone, what worked finaly is that:

<div *ngIf="ktIsMedia && ktMediaType === 'video'" >
    <video
        #ktVideo
        (loadedmetadata)="ktSize = getSize()">
        <source 
            [attr.src]="ktMediaSrc |safeUrl" 
            type="video/{{ktVideoType}}">
    </video>
</div>

I changed 'loadmetadat' by 'loadedmetadata' and put in on the video tag, instead of the source tag.

answered Nov 19 '16 at 11:38

Miguel

709
7
21

I want to dynamically set video width and height based on screen size of whoever is accessing the page but what I dont understand is the binding (loadmetadata) and the ktSize variable where are these set – Joshua Deshazer Apr 13 '17 at 22:01

Get source dimensions of video tag in Angular 2

2 Answers2