HTML5 비디오 치수

HTML5 비디오 치수

JavaScript로 페이지에 오버레이하는 동영상의 치수를 가져오려고 하는데 동영상이 로드되기 전에 계산되는 것 같아 실제 동영상이 아닌 포스터 이미지의 치수를 반환합니다.

위에서 Sime Vidas가 승인한 솔루션은 "로드된 메타데이터" 이벤트가 실행된 후에야 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를 사용하는 9 버전의 Internet Explorer를 고려하지 않았습니다.

<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

바로 사용할 수 있는 기능

문서에서 아무것도 변경하지 않고 비디오의 치수를 비동기식으로 반환하는 바로 사용할 수 있는 기능이 있습니다.

// ---- Definitions ----- //

/**
 Returns the dimensions of a video asynchrounsly.
 @param {String} url Url of the video to get dimensions from.
 @return {Promise<{width: number, height: number}>} Promise which returns the dimensions of the video in 'width' and 'height' properties.
 */
function getVideoDimensionsOf(url){
    return new Promise(resolve => {
        // create the video element
        const video = document.createElement('video');

        // place a listener on it
        video.addEventListener( "loadedmetadata", function () {
            // retrieve dimensions
            const height = this.videoHeight;
            const width = this.videoWidth;

            // send back result
            resolve({height, width});
        }, false);

        // start download meta-datas
        video.src = url;
    });
}


// ---- Use ---- //
getVideoDimensionsOf("https://www.w3schools.com/html/mov_bbb.mp4")
   .then(console.log);

여기 스니펫에 사용된 비디오가 있습니다: 빅 벅 버니.

들어보세요.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);
});

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>

이 점도 유의해야 합니다.
HLS 스트림과 같은 경우 "onmetadata loaded"도 작동하지 않습니다.
이러한 경우 이 솔루션은 완벽하게 작동합니다.

var video = document.getElementById("video")
video.onplaying = function () {
    var width = video.videoWidth
    var height = video.videoHeight
    console.log("video dimens loaded w="+width+" h="+height)
}

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

언급URL : https://stackoverflow.com/questions/4129102/html5-video-dimensions