मैं एक वीडियो के आयाम प्राप्त करने की कोशिश कर रहा हूं, जिसमें मैं जावास्क्रिप्ट के साथ एक पृष्ठ पर ओवरलेइंग कर रहा हूं, हालांकि यह वास्तविक वीडियो के बजाय पोस्टर छवि के आयामों को वापस कर रहा है क्योंकि ऐसा लगता है कि वीडियो लोड होने से पहले इसकी गणना की जा रही है।
जवाबों:
<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 और वीडियोहाइट गुण सेट नहीं होते हैं।
यदि आप उन गुणों के लिए क्वेरी करते हैं, जब तक कि VIDEO तत्व के प्रस्तुत होने के बाद यह कभी-कभी काम करता है, लेकिन ज्यादातर मामलों में यह दोनों गुणों के लिए 0 के मान को लौटा देगा।
यह सुनिश्चित करने के लिए कि आपको सही संपत्ति मूल्य मिल रहे हैं, आपको इनकी तर्ज पर कुछ करने की आवश्यकता है:
var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
var width = this.videoWidth,
height = this.videoHeight;
}, false );नोट: मैं Internet Explorer के पूर्व -9 संस्करणों के लिए लेखांकन को परेशान नहीं करता था जो कि addEventListener के बजाय अनुलग्नक का उपयोग करते हैं क्योंकि उस ब्राउज़र के पूर्व -9 संस्करण HTML5 वीडियो का समर्थन नहीं करते हैं, वैसे भी।
loadedmetadataआग। मैंने इसे क्रोमियम 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) ;
});यदि आप इसे देखना चाहते हैं तो यहां स्निपेट के लिए उपयोग किया जाने वाला वीडियो है: बिग बक बनी
उस 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);
});इस प्रकार इसे 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>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
},
});