ฉันกำลังพยายามหาขนาดของวิดีโอที่ฉันวางซ้อนบนหน้าเว็บด้วย JavaScript แต่มันจะส่งคืนขนาดของภาพโปสเตอร์แทนที่จะเป็นวิดีโอจริงเนื่องจากดูเหมือนว่าจะคำนวณก่อนที่จะโหลดวิดีโอ
ฉันกำลังพยายามหาขนาดของวิดีโอที่ฉันวางซ้อนบนหน้าเว็บด้วย JavaScript แต่มันจะส่งคืนขนาดของภาพโปสเตอร์แทนที่จะเป็นวิดีโอจริงเนื่องจากดูเหมือนว่าจะคำนวณก่อนที่จะโหลดวิดีโอ
คำตอบ:
<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" จะเริ่มทำงาน
หากคุณค้นหาคุณสมบัติเหล่านั้นมากพอหลังจากที่แสดงองค์ประกอบ 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
เกิดไฟไหม้ ฉันเพิ่งเห็นบน Chromium 69 การฟังloadeddata
เป็นการเดิมพันที่ปลอดภัยกว่า
นี่คือพร้อมที่จะฟังก์ชั่นการใช้งานซึ่งจะส่งกลับขนาดของวิดีโอ 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;
});
}
// ---- 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);
});
นี่คือวิธีที่สามารถทำได้ใน 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
},
});