Answers:
<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
应当指出,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视频。
loadedmetadata
触发时videoWidth和videoHeight将为零。我刚刚在Chromium 69上看到了它。倾听loadeddata
是一个比较安全的选择。
这是一个随时可用的函数,该函数异步返回视频的尺寸,而无需更改文档中的任何内容。
// ---- 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
侦听loadedmetadata
用户代理刚刚确定媒体资源的持续时间和尺寸时调度的事件
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});