应该注意的是，Sime Vidas 目前接受的解决方案实际上不适用于现代浏览器，因为 videoWidth 和 videoHeight 属性在“loadedmetadata”事件触发后才设置。

如果您碰巧在 VIDEO 元素呈现后查询这些属性足够远，它有时可能会起作用，但在大多数情况下，这将返回两个属性的值 0。

为了保证您获得正确的属性值，您需要执行以下操作：

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

注意：我没有考虑使用 attachEvent 而不是 addEventListener 的 9 之前版本的 Internet Explorer，因为该浏览器的 9 之前版本不支持 HTML5 视频。

<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

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

即用型功能

这是一个随时可用的函数，它异步返回视频的尺寸，而不更改文档中的任何内容。

// ---- 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(resolve => {
        // create the video element
        const video = document.createElement('video');

        // place a listener on it
        video.addEventListener( "loadedmetadata", function () {
            // retrieve dimensions
            const height = this.videoHeight;
            const width = this.videoWidth;
            // send back result
            resolve({height, width});
        }, false );

        // start download meta-datas
        video.src = url;
    });
}


// ---- Use ---- //
getVideoDimensionsOf("https://www.w3schools.com/html/mov_bbb.mp4")
   .then(console.log);

如果您想看，这里是用于片段的视频：Big Buck Bunny

监听loadedmetadata当用户代理刚刚确定媒体资源的持续时间和维度时调度的事件

第 4.7.10.16 节事件摘要

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

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

这就是它在 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>