[JavaScript] 옛날 영화상영을 연상케하는 '고화질' 비디오 재생하기

영화라는 것이 처음 발명되었을 때는, '영상'보다는 '움직이는 사진'에 가까웠다고 한다.

지금의 '고화질'이라는 조건을 충족시키기 위해 영상의 초기 시발점으로 돌아간다는 것이

나는 조금 소름이돋았다.

결국 '기술은 기초(원리)가 탄탄해야되는 구나' 랄까

무튼!

그 방법은 영상을 프레임수 많큼 이미지로 쪼개

스크롤에 반응하여 이미지가 교체되어 '움직이는 이미지'를

'고화질 영상'으로 웹상에서 보다 최적화된 용량으로 제공하는 것이다.

</body>

* { margin: 0; padding: 0; }

body { height: 500vh; }

body.before-load { overflow-y:hidden; }

.sample-img { position: fixed; top: 0; left: 0; width: 100%; }

const imgElem = document.querySelector('.sample-img');

const videoImages = [];

let totalImagesCount = 960;

let progress;

let currentFrame;

function setImages() {

for (let i = 0; i < totalImagesCount; i++) {

let imgElem = new Image();

imgElem.src = `../video/002/IMG_${7027 + i}.JPG`;

videoImages.push(imgElem);

}

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();

[홈페이지구축시] 자주사용하는 툴 (0)	2020.06.24
오픈소스 플레이어 VLC로 프레임 추출하기 (0)	2020.06.24
홈페이지 최적화하기 (0)	2020.06.23
스크롤로 비디오 제어하기 (0)	2020.06.04
[JavaScript] Babel - 자바스크립트 컴파일러 사용법 (0)	2020.05.22

티스토리툴바