CODEWITHSUNDEEP
javascripthtml
Matt McManis
Matt McManis

Reputation: 4675

Get Width and Height of HTML5 Video using JavaScript?

I've tried several answers found here.

This code works in Firefox and outputs the right size, but not in Chrome or IE.

Mainly I am trying to get just the width.

Example

I have the output the width under the video using 3 examples.

https://jsfiddle.net/a8a1o8k2/

JavaScript

https://stackoverflow.com/a/4129189/6806643

var vid1 = document.getElementById("video");
vid1.videoHeight; // returns the intrinsic height of the video
vid1.videoWidth; // returns the intrinsic width of the video

returns 0

https://stackoverflow.com/a/9333276/6806643

var vid2 = document.getElementById("video");
vid2.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

returns 0

https://stackoverflow.com/a/16461041/6806643

var vid3 = document.getElementById("video");
var videotag_width = vid3.offsetWidth;
var videotag_height = vid3.offsetHeight;

sometimes returns the correct value
sometimes returns 300 (default player size if no video source)

Upvotes: 3

Views: 4807

Answers (2)

nbo
nbo

Reputation: 419

Edit: improved solution after I have actually read the crossbrowser issue.

The solution below should work on both Chrome and Firefox. The issue is that Firefox treats readyState differently than Chrome.

var vid2 = document.getElementById("video");
vid2.addEventListener("loadedmetadata", getmetadata);

if (vid2.readyState >= 2) {
    getmetadata(vid2);
}

function getmetadata(){
    document.getElementById('output2').innerHTML = "Test 2: " + vid2.videoWidth;
}

Updated JSFiddle

Upvotes: 1

Tarnation has come
Tarnation has come

Reputation: 36

If you are trying to define the size of your video with java script im not sure what you are actually trying to do, althought it seems to me like you just want it to be customizable like this example.

If we presume the video was embedded the code below might do the trick

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

You can also refer to this page how it actually works and there is also an CSS and HTML example of dynamic video rescaling as well:

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Upvotes: 0

Related Questions