ขนาดวิดีโอ HTML5


105

ฉันกำลังพยายามหาขนาดของวิดีโอที่ฉันวางซ้อนบนหน้าเว็บด้วย JavaScript แต่มันจะส่งคืนขนาดของภาพโปสเตอร์แทนที่จะเป็นวิดีโอจริงเนื่องจากดูเหมือนว่าจะคำนวณก่อนที่จะโหลดวิดีโอ


คุณไม่ยอมแพ้? มีปมดีๆเป็นคำตอบที่นี่!
Juan Mendes

คำตอบ:


105
<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


เป็นไปได้ไหมกับรูปแบบ ogg เพราะฉันไม่คิดว่าวิดีโอจะมีข้อมูลเมตาแบบนี้
Elliot

@Elliot ฉันทดสอบใน Chrome ในการสาธิตนี้: people.opera.com/howcome/2007/video/controls.htmlและใช้งานได้ ...
Šime Vidas

ดูเหมือนว่าลิงค์จะเสียอีกแล้ว
Martin Delille

ขออภัยลิงค์ไม่เสียในความเป็นจริง
Martin Delille

137

ควรสังเกตว่าโซลูชันที่ได้รับการยอมรับในปัจจุบันข้างต้นโดย 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


ฉันได้รับค่า 100 สำหรับทั้งความกว้างและความสูงและวิดีโอไม่มี 100px ไม่แน่ใจว่าทำไม ...
Mikel

2
สิ่งนี้ใช้ไม่ได้กับ Chrome สำหรับ Android 49 เฉพาะเมื่อวิดีโอเริ่มเล่นข้อมูลจะพร้อมใช้งาน มีความเข้าใจเพิ่มเติมเกี่ยวกับเรื่องนี้หรือไม่? PS1: ฉันลองใช้กับ URL ไปยังไฟล์ในเครื่องที่เลือกโดยใช้องค์ประกอบอินพุตตัวเลือกไฟล์เท่านั้น PS2: ทำงานบน iOS Safari
Visionscaper

ฉันสร้างปัญหานี้ที่ตัวติดตามข้อบกพร่องของโครเมียม: bugs.chromium.org/p/chromium/issues/detail?id=598218
Visionscaper

2
สิ่งนี้จะไม่ได้ผล 100% ในบางครั้ง videoWidth และ videoHeight จะเป็นศูนย์เมื่อloadedmetadataเกิดไฟไหม้ ฉันเพิ่งเห็นบน Chromium 69 การฟังloadeddataเป็นการเดิมพันที่ปลอดภัยกว่า
เคลียร์

18

พร้อมใช้งาน

นี่คือพร้อมที่จะฟังก์ชั่นการใช้งานซึ่งจะส่งกลับขนาดของวิดีโอ 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


การใช้คำสัญญาอย่างยอดเยี่ยมในการส่งข้อมูลแท็กวิดีโอแบบอะซิงโครนัสสิ่งที่ฉันกำลังมองหาขอบคุณ
Ray Andison

รหัสที่ยอดเยี่ยมและรองรับเบราว์เซอร์ที่ดี: ตั้งแต่ Chrome 32, Opera 19, Firefox 29, Safari 8 และ Microsoft Edge สัญญาจะเปิดใช้งานตามค่าเริ่มต้น
Jeff Clayton

13

รับฟัง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);
});

ลิงค์ที่ถูกต้อง: w3.org/TR/html5/…
Visionscaper

1
@Visionscaper คงขอบคุณ อย่าลังเลที่จะแก้ไขคำตอบของผู้อื่นเล็กน้อยเมื่อพวกเขาไม่เปลี่ยนความตั้งใจเดิม
Juan Mendes

Donwvoter: ฉันขอขอบคุณคำอธิบายเพื่อให้สามารถปรับปรุงได้!
Juan Mendes

1

นี่คือวิธีที่สามารถทำได้ใน 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>

-1

ใน 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
    },
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.