If I want to determine the width and height of an image, I can do the following:
let image = new Image();
image.src = ...the source ;
image.decode();
console.log( image.width, image.height );
There is no need to create a DOM element to render the image and then obtain the the dimensions.
Is it possible to do something similar with a video? If so, how?
This seems to do what I want:
let video = document.createElement( 'video');
video.setAttribute( "preload", "metadata" );
video.src = // ...the data source
video.addEventListener( 'loadeddata', function() {
console.log( this.videoWidth, this.videoHeight );
});
I create the video element, but do not insert it into the DOM. I believe setting the preload attribute does not require the entire video file to be loaded, but I am not certain about that.
The data is loaded and the loadeddata event is triggered, logging the width and height of the video.
I would be interested in knowing what other people thought about this solution.