LHJ

I'm a FE developer.

고화질 비디오 부드럽게 처리하기1

29 Aug 2020 » js_apple_interaction

고화질 비디오 부드럽게 처리하기1

  1. image scroll 예시

고화질 비디오만큼 화질이 좋으면서도 고화질 비디오에 비해 애니메이션이 자연스럽다.
이미지 파일을 가지고 애니메이션 효과를 구현한 것이다.
이미지를 수백장 사용해서 만든 효과이다.

기존 비디오에서 각 프레임당 이미지를 다 뽑아낸 것이다.
해당 예제는 16초 정도의 동영상을 1초당 60 프레임으로 만든 것이다.
즉 960개의 이미지 파일이 생성되었다.

  • 컨텐츠 로딩률 구하는 팁

  • 컨텐츠 로딩률 필요없다면 window 전역객체에 load 메서드를 사용하는 것이 더 좋은 듯?

  • 이미지 이렇게 많이 사용하면 용량 크지 않나요?
    똑같은 화질의 video 랑 비교해보면 video 보단 용량이 적다.
    이미지 압축툴도 활용했다. (이미지 최적화)

  • 비디오를 이미지로 어떻게 만들까?
    너무 많은 툴이 있다. 구글 검색 -> 동영상 프레임 추출

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			height: 500vh;
		}
		body.before-load {
			overflow-y: hidden;
		}
		.sample-img {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}
	</style>
</head>
<body class="before-load">
	<img class="sample-img" src="../video/002/IMG_7027.JPG">

	<script>
		const imgElem = document.querySelector('.sample-img');
		const videoImages = [];
		let totalImagesCount = 960;
		let progress;
		let currentFrame;

        // let loadedImagesCount = 0;

		function setImages() {
			for (let i = 0; i < totalImagesCount; i++) {
				let imgElem = new Image();
				imgElem.src = `../video/002/IMG_${7027 + i}.JPG`;
				videoImages.push(imgElem);

                // 로딩바 같은 진행률 표시에 아래식처럼하면 유용함
                // imgElem.addEventListener('load', function () {
                //     loadedImagesCount++;
                //     if (loadedImagesCount === totalImagesCount) {
                //         init();
                //     }
                // })
			}
		}

		function init() {
			document.body.classList.remove('before-load');

			window.addEventListener('scroll', function () {
				progress = pageYOffset / (document.body.offsetHeight - window.innerHeight);
				if (progress < 0) progress = 0;
				if (progress > 1) progress = 1;

				requestAnimationFrame(function () {
					currentFrame = Math.round((totalImagesCount - 1) * progress);
					imgElem.src = videoImages[currentFrame].src;
				});
			});
		}

		window.addEventListener('load', init);
		setImages();
	</script>
</body>
</html>

Related Posts