HTML5 Video Dimensions

Question

我正在尝试获取使用 JavaScript 覆盖到页面上的视频的尺寸，但是它返回的是海报图像的尺寸，而不是实际视频，因为它似乎是在加载视频之前计算的。

Answer 1

It should be noted that the currently accepted solution above by Sime Vidas doesn't actually work in modern browsers since the videoWidth and videoHeight properties aren't set until after the "loadedmetadata" event has fired.

If you happen to query for those properties far enough after the VIDEO element is rendered it may sometimes work, but in most cases this will return values of 0 for both properties.

To guarantee that you're getting the correct property values you need to do something along the lines of:

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

NOTE: I didn't bother accounting for pre-9 versions of Internet Explorer which use attachEvent instead of addEventListener since pre-9 versions of that browser don't support HTML5 video, anyway.

Answer 2

<video id="foo" src="foo.mp4"></video>

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

Spec: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element

Answer 3

Ready to use function

Here's a ready to use function which returns the dimensions of a video asynchrously, without changing anything in the document .

 // ---- Definitions ----- // /** Returns the dimensions of a video asynchrounsly. @param {String} url Url of the video to get dimensions from. @return {Promise} Promise which returns the dimensions of the video in 'width' and 'height' properties. */ function getVideoDimensionsOf(url){ return new Promise(function(resolve){ // create the video element let video = document.createElement('video'); // place a listener on it video.addEventListener( "loadedmetadata", function () { // retrieve dimensions let height = this.videoHeight; let width = this.videoWidth; // send back result resolve({ height : height, width : width }); }, false ); // start download meta-datas video.src = url; }); } // ---- Use ---- // getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4") .then(({width, height}) => { console.log("Video width: " + width) ; console.log("Video height: " + height) ; }); 

Here's the video used for the snippet if you wish to see it : Big Buck Bunny

Answer 4

Listen for the loadedmetadata event which is dispatched when the user agent has just determined the duration and dimensions of the media resource

Section 4.7.10.16 Event summary

https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata

videoTagRef.addEventListener('loadedmetadata', function(e){
    console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});

Answer 5

This is how it can be done in Vue:

<template>
    <div>
        <video src="video.mp4" @loadedmetadata="getVideoDimensions"></video>
    </div>
</template>

<script>
export default {
    methods: {
        getVideoDimensions (e) {
            console.log(e.target.videoHeight)
            console.log(e.target.videoWidth)
        }
    }
}
</script>

Answer 6

This should also be noted
that in some cases such as HLS streams the "onmetadataloaded" does not work either.
in those cases, this solution works perfect.

var video = document.getElementById("video")
video.onplaying = function () {
    var width = video.videoWidth
    var height = video.videoHeight
    console.log("video dimens loaded w="+width+" h="+height)
}

Answer 7

In Vuejs I use following code in mounted tag.

var app = new Vue({
    el: '#id_homepage',
    mounted: function () {
        var v = document.getElementById("id_video");
        var width = v.offsetWidth;
        v.height = Math.floor(width*(9/16)); // dynamically setting video height to maintain aspect ratio
    },
});