Video Element Duration and Proportion Attribute

I have a pretty challenging problem, it seems. I'm working on an AngularJS project with uploaded files, my role is being to upload videos that currently does not exist the possibility. We've used some libraries like angular-file-uploader just to generate blob and cropper.js to edit the images to upload.

Here's what we have so far:

 this.uploader.onAfterAddingFile = (item: any) => {
            this.uploader.clearQueue();
            this.uploader.cancelAll();
            this.croppedImage = "";
            var reader = new FileReader();
            var i = new Image();
            this.imageError = "";
            reader.onload = (event): any => {
                this.errors = [];
                if (item._file.type.match(/(jpeg|jpg|png|mp4|mov|gif)$/) === null) {
                    this.imageError = "type";
                    this.$scope.$apply();
                    return;
                }
                if (item._file.size > 1.59e+7) {
                    this.imageError = "size";
                    this.$scope.$apply();
                    return;
                }
                //Aqui é gerado o blob do arquivo
                item.image = event.target['result'];
                item.blob = this.dataURItoBlob(event.target['result']);
                item.blobURL = URL.createObjectURL(item.blob);
                if (item._file.type.match(/(png|jpg|jpeg)$/) === null) {
                    this.$uibModal.open({
                        component: "ImageCropper",
                        windowClass: "image-cropper-modal-window",
                        resolve: {
                            params: () => ({
                                image: item,
                                isVideo: true,
                                isStory: this.scheduledPostType === "StoryPhoto",
                                //aspectRatio: this.selectedAspectRatio,
                                croppedSuccess: (image, blob) => this.croppedSuccess(image, blob)
                            })
                        }
                    });
                }
                if (item._file.type.match(/(mp4|mov|gif)$/) === null){
                    i.onload = () => {
                        item.width = i.width;
                        item.height = i.height;

                        // Open modal with image
                        this.$uibModal.open({
                            component: "ImageCropper",
                            windowClass: "image-cropper-modal-window",
                            resolve: {
                                params: () => ({
                                    image: item,
                                    isStory: this.scheduledPostType === "StoryPhoto",
                                    //aspectRatio: this.selectedAspectRatio,
                                    croppedSuccess: (image, blob) => this.croppedSuccess(image, blob)
                                })
                            }
                        });

                        this.$scope.$apply();
                    };
                    i.src = item.image;
                }
                this.$scope.$apply(() => {
                    this.images = [item];
                }); // push item to images
            };
            reader.readAsDataURL(item._file);

Well ... so that's fine, we generate the blob and open the modal by sending it the generated binary. Now that's the question! Please link to the code below:

If it is an image, the html is created for <img> if not <video>

            <div class="image-cropper text-left" ng-if="vm.step===0 && !vm.isVideo">
                <div class="image-cropper-img">
                    <img ng-src="{{vm.image}}" />
                </div>
            </div>
            <div class="image-cropper text-left" ng-if="vm.step===0 && vm.isVideo">
                <div class="image-cropper-img">
                    <video id="vid" class="video-cropper" controls>
                        <source ng-src="{{vm.image}}">
                        Seu browser não suporta a visualização do vídeo :(
                    </video>
                </div>
            </div>

But where does this vm.image that is in the src of these tags come from? Call:

$onInit() {

        var $img = this.$element.find(".image-cropper img");
        this.params = this.resolve.params;

        this.image = this.params.image.blobURL;
        this.isStory = this.params.isStory;
        this.isVideo = this.params.isVideo;
        $img.attr("src", this.image);

        var $video= this.$element.find(".image-cropper video");
        console.log($video.attr("duration")) // undefined :(
        if(this.isVideo){
            return; // ignore isso, só para testes
        }

        this.cropper = this.mountCropper($img[0]);
        this.loading = false;
    }

Right ... but what do I really want with this? So, having the blob on this variable image being an image or video, I'm applying on <video> and it's working, the video plays normally and everything. But I can not get the duration attribute, nor know its aspect ratio (16: 9) and resolution (720p), I already tried to create a video element through javascript but I could not find any single class that represented HTMLVideoElement that had such attributes.

I hope I've been clear on the question, and can you help me with this:)