Mondrian Video Mosaic — 동영상 웹뷰어 (아이디어 노트)

다운로드 mp4를 한 페이지 모자이크로 자동 재생하는 로컬 뷰어

 

[문제인식]

 평상시 웹들을 돌아다니다가 동영상 mp4를 자주 다운받게 되는게
보통 다운로더 폴더에 저장이 된다. 시간이 지나면  무진장 쌓이게 되는데
내가 보기에 검색으로 보니 50개 이상은 된거같아 정리가 필요해졌다.
일단 폴더 하나를 만들고 따로 이동시켰다.

 이동시키고 보니 썸넬도 없고, 하나씩 눌러서 재생시켜보자니 귀찮고 그래서
이 폴더에 모아논걸 로컬에서 웹페이지로 자동 재생이 되게 만들면 어떻까
생각하게 되었다. 

 물론 한페이지에서 20개 30개 플레이하는건 웹뷰어 특성상 동시 재생시 성능저하가 있을것이고
큰영상 사이즈일경우 리소스 문제로 더힘들것이기에 최적화가 필요했다.

미리보기 한컷

 

[제작]
▷  크기가 크면 줄여서 인코딩 해주기. 예를들어 720p 이상이면 웹이 다중 플레이가 힘들어지므로
▷  비디오 목록을 json으로 뽑아줘야했다. 동영상파일 이름, 동영상 크기, 동영상 백그라운드 색상정도
▷  index.html에서는 일단 타일을 만들고 거기에 영상을 넣어서 플레이해준다.

     - 물론 다중플레이 이므로 음소거모드. loop를 적용하고, 셔플 버튼으로 레이아웃도 랜덤으로 바꿀수있게 고려해줬다.

간단하게 만드는게 목적이므로 다른기능은 없이 저정도 요구사항으로 
만들고 테스트를 해보았다.

[구현 순서]
1. 영상에서 배치를 이용 폴더스캔, json으로 정보를 뽑아 정리해준다.
2. index.html을 만들어준다. 나중에 json으로 만들어 넣을 부분만 임시로 만들어서 테스트
3. index.html에 (영상정보가 들어갈 부분을) 배치로 치환해준다.
4. imdex.html 실행

기능설명

제작 폴더형태

 

[기능]

- index.html을 누르고 한페이지에 몇개의 영상을 보여줄지 선택 셔플 버튼을 누르고 레이아웃을 바꾸면서 보다가 맘에들면 정지하고 보면되게 구현 (랜덤:영상, 레이아웃)

 

[테스트]

작은화면 - 실행

여러개 보여주기 - 실험

전체화면에 가까운크기 - 실험

 

[해본후 느낌]

- 생각보다 단순하지만 쓸만했다. 특히 전체화면 모드로 플레이 시키고 볼땐 편하다는 느낌을 받았다.
- 오프라인이라 빠르고 편하다

- 여러가지 기능을 넣고 싶긴한데 그럼 간단함을 넘어서므로 여기서 정지
- 필요해지면 시드를 고정 저장 활용하는방안등 많을것 같다.

 

 

예시 사용 영상

- 출처: Pixabay (블로그 게시용으로 720p 재인코딩) (https://pixabay.com)