【问题标题】：HTML5 Video DimensionsHTML5 视频尺寸
【发布时间】：2011-05-06 23:00:28
【问题描述】：

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

【问题讨论】：

你放弃了吗？这里有很好的线索作为答案！

【解决方案1】：

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

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

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

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

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

【讨论】：

我得到的宽度和高度值都是 100，而视频没有 100 像素。不知道为什么...
不幸的是，这不适用于适用于 Android 49 的 Chrome；只有当视频开始播放时，信息才可用。对此有何进一步见解？ PS1：我只尝试了使用文件选择器输入元素选择的本地文件的 URL。 PS2：它确实适用于 iOS Safari。
我在 chromium 错误跟踪器上创建了这个问题：bugs.chromium.org/p/chromium/issues/detail?id=598218
这在 100% 的情况下都不会奏效。在极少数情况下，loadedmetadata 触发时 videoWidth 和 videoHeight 将为零。我刚刚在 Chromium 69 上看到它。收听 loadeddata 是一个更安全的选择。

【解决方案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

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

【讨论】：

ogg 格式是否可能，因为我认为视频不会包含此类元数据？
@Elliot 我在 Chrome 中测试了这个演示：people.opera.com/howcome/2007/video/controls.html 并且它可以工作......
链接好像又断了
抱歉链接实际上没有损坏
使用URL.createObjectURL( file )播放本地文件时总是为零

【解决方案3】：

即用型功能

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

// ---- 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);

如果你想看，这里是用于 sn-p 的视频：Big Buck Bunny

【讨论】：

很好地使用了异步传递视频标签数据的承诺，正是我想要的，谢谢
很棒的代码，并且有不错的浏览器支持：从 Chrome 32、Opera 19、Firefox 29、Safari 8 和 Microsoft Edge 开始，promise 是默认启用的。

【解决方案4】：

侦听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);
});

【讨论】：

正确链接：w3.org/TR/html5/…
@Visionscaper 已修复，谢谢。在不改变初衷的情况下，随意对其他人的答案进行小修改。
Donwvoter：我非常感谢您的解释，以便改进！

【解决方案5】：

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

【讨论】：

【解决方案6】：

这也应该注意
在某些情况下，例如HLS流 “onmetadataloaded”也不起作用。
在这些情况下，此解决方案非常完美。

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)
}

【讨论】：

【解决方案7】：

在 Vuejs 中，我在挂载标签中使用以下代码。

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
    },
});

【讨论】：