J'essaie d'obtenir les dimensions d'une vidéo que je superpose sur une page avec JavaScript, mais il renvoie les dimensions de l'image de l'affiche au lieu de la vidéo réelle, car il semble qu'elle soit calculée avant le chargement de la vidéo.
J'essaie d'obtenir les dimensions d'une vidéo que je superpose sur une page avec JavaScript, mais il renvoie les dimensions de l'image de l'affiche au lieu de la vidéo réelle, car il semble qu'elle soit calculée avant le chargement de la vidéo.
Réponses:
<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
Spécification: https://html.spec.whatwg.org/multipage/embedded-content.html#the-video-element
Il convient de noter que la solution actuellement acceptée ci-dessus par Sime Vidas ne fonctionne pas réellement dans les navigateurs modernes puisque les propriétés videoWidth et videoHeight ne sont définies qu'après le déclenchement de l'événement "sharedmetadata".
Si vous interrogez ces propriétés assez loin après le rendu de l'élément VIDEO, cela peut parfois fonctionner, mais dans la plupart des cas, cela retournera des valeurs de 0 pour les deux propriétés.
Pour garantir que vous obtenez les valeurs de propriété correctes, vous devez faire quelque chose du genre:
var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );
REMARQUE: Je n'ai pas pris la peine de comptabiliser les versions antérieures à la 9 d'Internet Explorer qui utilisent attachEvent au lieu de addEventListener car les versions antérieures à la 9 de ce navigateur ne prennent pas en charge la vidéo HTML5, de toute façon.
loadedmetadata
incendie. Je viens de le voir sur Chromium 69. Écouter loadeddata
est un pari plus sûr.
Voici une fonction prête à l'emploi qui renvoie les dimensions d'une vidéo de manière asynchrone, sans rien changer dans le document .
// ---- 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) ;
});
Voici la vidéo utilisée pour l'extrait si vous souhaitez le voir: Big Buck Bunny
Écoutez l' loadedmetadata
événement qui est distribué lorsque l'agent utilisateur vient de déterminer la durée et les dimensions de la ressource multimédia
https://www.w3.org/TR/html5/semantics-embedded-content.html#eventdef-media-loadedmetadata
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});
Voici comment cela peut être fait dans 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>
Dans Vuejs, j'utilise le code suivant dans la balise montée.
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
},
});