HTML5视频尺寸

Question

我正在尝试将我正在覆盖的视频的尺寸放到带有JavaScript的页面上，但它会返回海报图像的尺寸而不是实际的视频，因为它似乎是在视频之前计算的装了。

Answer 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版之前的版本，因为该版本的浏览器不支持HTML5视频。

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

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

Answer 3

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

第4.7.10.16节事件摘要

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

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

Answer 4

准备使用功能

这是一个随时可用的功能，它可以异常地返回视频的尺寸，而不会更改文档中的任何内容。

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


// ---- Usation ---- //
getVideoDimensionsOf("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4")
   .then(function(dimensions){
	console.log("Video width: " + dimensions.width) ;
	console.log("Video height: " + dimensions.height) ;
    });

如果您希望看到以下内容，则会显示用于该代码段的视频：Big Buck Bunny

Answer 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>

Answer 6

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