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

이 링크가 다시 깨진 것 같다
마틴 Delille

죄송합니다 링크는 실제로 파괴되지 않는다
마틴 Delille

137

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 이전 버전을 고려하지 않았습니다.


너비와 높이 모두에 대해 값이 100이고 비디오에 100px가 없습니다. 확실하지 왜 ...
미켈

2
안타깝게도 Android 49 용 Chrome에서는 작동하지 않습니다. 비디오 재생이 시작된 경우에만 정보를 사용할 수 있습니다. 이것에 대한 추가 통찰력이 있습니까? PS1 : 파일 선택기 입력 요소를 사용하여 선택한 로컬 파일에 대한 URL로만 이것을 시도했습니다. PS2 : iOS Safari에서 작동합니다.
Visionscaper

이 문제는 chromium 버그 추적기에서 만들었습니다. bugs.chromium.org/p/chromium/issues/detail?id=598218
Visionscaper

2
이것은 100 % 작동하지 않습니다. 드물게 loadedmetadata발생 하면 videoWidth 및 videoHeight가 0이됩니다 . Chromium 69에서 방금 봤습니다. 경청하는 loadeddata것이 더 안전한 방법입니다.
cleong

18

바로 사용 가능한 기능

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

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


약속의 위대한 사용은 내가 감사를 찾고 있었다 그냥 뭐, 비동기 비디오 태그 데이터를 제공합니다
레이 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.