HTML5 동영상 크기

HTML5 동영상 크기

---

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에서 현재 승인 한 솔루션은 "loadedmetadata"이벤트가 시작될 때까지 videoWidth 및 videoHeight 속성이 설정되지 않기 때문에 최신 브라우저에서 실제로 작동하지 않습니다.

VIDEO 요소가 렌더링 된 후 해당 속성을 충분히 쿼리하면 때때로 작동 할 수 있지만 대부분의 경우 두 속성 모두에 대해 0 값을 반환합니다.

올바른 속성 값을 얻고 있는지 확인하려면 다음과 같은 작업을 수행해야합니다.

var v = document.getElementById("myVideo");
v.addEventListener( "loadedmetadata", function (e) {
    var width = this.videoWidth,
        height = this.videoHeight;
}, false );

참고 : 해당 브라우저의 9 이전 버전은 HTML5 비디오를 지원하지 않기 때문에 addEventListener 대신 attachEvent를 사용하는 Internet Explorer의 9 이전 버전을 고려하지 않았습니다.

---

바로 사용 가능한 기능

다음 은 문서에서 아무것도 변경하지 않고 비동기 적으로 동영상의 크기를 반환하는 즉시 사용할 수있는 함수입니다 .

// ---- 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사용자 에이전트가 미디어 리소스의 기간과 크기를 방금 결정했을 때 전달 되는 이벤트를 수신 합니다.

섹션 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);
});

---

In Vuejs I use following code in mounted tag.

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
    },
});

참고URL : https://stackoverflow.com/questions/4129102/html5-video-dimensions