Javascript HTML5视频维度

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

<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

var vid=document.getElementById（“foo”）；
vid.videoHeight；//返回视频的固有高度
vid.videoWidth；//返回视频的固有宽度

---

规范：

侦听当用户代理刚刚确定媒体资源的持续时间和维度时发送的

loadedmetadata

事件

第4.7.10.16节事件摘要

---

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

如果在渲染视频元素后恰好查询了足够多的属性，有时可能会起作用，但在大多数情况下，这将为两个属性返回值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视频。

即用功能 这是一个随时可用的函数，它异步返回视频的维度，而不更改文档中的任何内容

/----定义------//
/**
异步返回视频的维度。
@param{String}url要从中获取维度的视频的url。
@return{Promise}Promise，返回“宽度”和“高度”属性中的视频尺寸。
*/
函数getVideoDimensionsOf（url）{
返回新承诺（解决=>{
//创建视频元素
const video=document.createElement（'video'）；
//在上面放置一个侦听器
video.addEventListener（“loadedmetadata”，函数（）{
//检索维度
const height=此高度；
const width=this.videoWidth；
//发回结果
解析（{高度，宽度}）；
}，假）；
//开始下载元数据
video.src=url；
});
}
//----使用----//
getVideoDimensionsOf（“https://www.w3schools.com/html/mov_bbb.mp4")
.然后（console.log）在Vuejs中，我在mounted标记中使用以下代码

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

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


导出默认值{
方法：{
getVideoDimensions（e）{
console.log（e.target.videoHeight）
console.log（例如target.videoWidth）
}
}
}
我认为ogg格式的视频不会包含这样的元数据，这可能吗？@Elliot我在这个演示中用Chrome进行了测试：它可以工作……看起来链接又断了，但实际上链接没有断开。你放弃了吗？这里有很好的线索作为答案！我得到的宽度和高度值都是100，而视频没有100px。不知道为什么…不幸的是，这在Android 49的Chrome上不起作用；只有当视频开始播放时，信息才可用。对此有进一步的了解吗？PS1：我只尝试了使用文件选择器输入元素选择本地文件的URL。PS2：它在iOS Safari上运行。我在chromium bug跟踪器上创建了这个问题：它不会100%运行。在极少数情况下，当
loadedmetadata
触发时，videoWidth和videoHeight将为零。我刚才在电视上看到的。收听
loadeddata
更安全。正确链接：@VisionsPaper已修复，谢谢。当别人的回答没有改变初衷时，请随意对他们的答案进行小的修改。Donwvoter:我希望你能给我一个解释，这样可以改进！非常好地利用了异步交付视频标签数据的承诺，这正是我想要的thanksGreat代码，并且具有良好的浏览器支持：从Chrome 32、Opera 19、Firefox 29、Safari 8和Microsoft Edge开始，承诺默认启用。
<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>