HTML5 Видео размеры
Я пытаюсь получить размеры видео, которое я накладываю на страницу с JavaScript, однако он возвращает размеры изображения плаката вместо фактического видео, как кажется, он рассчитывается до загрузки видео.
4 ответов
<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 фактически не работает в современных браузерах, так как свойства videoWidth и videoHeight не установлены до тех пор, пока не запустится событие "loadedmetadata".
Если вы запросите эти свойства достаточно далеко после отображения элемента видео, он может иногда работать, но в большинстве случаев это вернет значения 0 для обоих свойств.
чтобы гарантировать, что вы получаете правильный значения свойств вам нужно сделать что-то вроде:
var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
примечание: Я не потрудился учитывать до 9 версий Internet Explorer, которые используют attachEvent вместо addEventListener, так как до 9 версии этого браузера не поддерживают HTML5 Видео, в любом случае.
слушать 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);
});
готов к использованию функции
вот готовая к использованию функция, которая возвращает размеры видео asynchrously,ничего не меняя в документе.
// ---- 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) ;
});
вот видео, используемое для фрагмента, если вы хотите его увидеть:Большой Бак Банни