HTML5视频尺寸


105

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


你放弃了吗 这里有很好的线索作为答案!
Juan Mendes

Answers:


105
<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和它的作品...
森那维达斯

似乎链接又断开了
Martin Delille

遗憾的链接不破其实
马丁Delille

137

应当指出,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 );

注意:我不会费心解释Internet Explorer的9之前版本,该版本使用attachEvent而不是addEventListener,因为该浏览器的9之前版本无论如何都不支持HTML5视频。


我得到的宽度和高度的值为100,而视频没有100px。不知道为什么...
Mikel

2
不幸的是,这不适用于Android版Chrome 49。仅当视频开始播放时,信息才可用。对此有任何进一步的见解吗?PS1:我只尝试使用使用文件选择器输入元素选择的本地文件的URL进行此操作。PS2:它确实适用于iOS Safari。
Visionscaper


2
这不会100%地起作用。在极少数情况下,loadedmetadata触发时videoWidth和videoHeight将为零。我刚刚在Chromium 69上看到了它。倾听loadeddata是一个比较安全的选择。
cleong

18

随时可用的功能

这是一个随时可用的函数,该函数异步返回视频的尺寸,而无需更改文档中的任何内容

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

如果您希望观看以下视频,请参考以下视频:Big Buck Bunny


很好地使用了异步传送视频标签数据的承诺,这正是我一直在寻找的感谢
Ray Andison

出色的代码,并具有不错的浏览器支持:从Chrome 32,Opera 19,Firefox 29,Safari 8和Microsoft Edge开始,默认情况下启用promise。
杰夫·克莱顿

13

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


1
@Visionscaper固定,谢谢。当其他人的答案没有改变最初的意图时,可以随意对其进行小的编辑。
胡安·门德斯

Donwvoter:我希望得到一个解释,以便对此进行改进!
Juan Mendes

1

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

-1

在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
    },
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.