Я пытаюсь получить размеры видео, которое я накладываю на страницу с помощью JavaScript, однако оно возвращает размеры изображения плаката, а не фактическое видео, которое кажется рассчитанным до загрузки видео.
Размеры видео HTML5
Ответ 1
<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
Spec: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
Ответ 2
Следует отметить, что в настоящее время Sime Vidas, принятое выше решение Sime Vidas, на самом деле не работает в современных браузерах, поскольку свойства videoWidth и videoHeight не устанавливаются до тех пор, пока не сработало событие "loadedmetadata ".
Если вам случится запросить эти свойства достаточно далеко после рендеринга элемента 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.
Ответ 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(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) ;
});
Ответ 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);
});
Ответ 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
В 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
},
});