Automatic height

[3rror404]

Setting fixed dimensions for the video player causes all sorts of layout issues when dealing with a multitude of screen sizes.

I would like the player to have a fluid width based on the parent element and a height that automatically adjusts so that the video fills the player - avoiding pillar/letter boxing.

Is there any way that the video player can automatically choose the appropriate height based on the aspect ratio of the loaded media?

[JonasJW]

I would like to do the same thing. Did you found any solution?

[raman-nbg]

I got something like with the nativescript Exoplayer. It also should work with this player. You have to set the height at runtime depending on the available width and aspecting the video resolution ratio.

@Component({
    moduleId: module.id,
    selector: "MyComponent",
    templateUrl: "./my.component.html",
})
export class MyComponent implements OnChanges {
    public videoHeight: number;
    public video: Video; // Video contains at least two properties width and height (and videoUrl…)

    public ngOnChanges(changes: SimpleChanges): void {
        const ratio: number = this.video.height / this.video.width;

        this.videoHeight = platformModule.screen.mainScreen.widthDIPs * ratio; //here you also could use the width of any container element; i use the total width of the screen
    }
}

<StackLayout orientation="vertical" [row]="row">
    <Label class="h3" [text]="video?.name"></Label>
    <Exoplayer autoplay="true" controls="false" [height]="videoHeight" loop="true" [src]="video?.uri">
    </Exoplayer>
</StackLayout>