관리 메뉴

한솔닷컴

[bideo.js] GitHub 뒤지기 2 본문

it/programming

[bideo.js] GitHub 뒤지기 2

훈솔 2016.05.25 11:23



GitHub 뒤지기 - 2

rishabhp / bideo.js




-    소개


html5 비디오 태그를 자바스크립트 상에서 다룰 수 있게 해주는 백업형 라이브러리.

사실 조금만 익숙해지면 가능한 기술이지만 bideo.js 는 이 수고로움을 덜어준다.


링크: https://github.com/rishabhp/bideo.js


-   구성


bideo.js



-    사용법 (by 한솔)


수행하는 역할이 굉장히 한정적인지라 자세한 사용법이 필요하진 않다.

video 태그와 동일하다고 생각하고 작업하면 편할 것이다.



bideo.js 는 두가지 Element 를 컨트롤하게 되는데 이는 video 와 그를 감싸는 Element 이다.

다음은 video Element를 컨트롤 할 스크립트 부분이다.



주석에 설명해 놓았듯이 저게 끝이다.

Bideo 클래스를 init 시키는 행위는 video Element 에 Source 를 넣어주고, 플레이시키며 비디오를 감싸는 컨테이너에 따라 리사이즈(옵션) 되도록 한다.


여기서 개발자는 비디오가 로드된 후 옵션을 위해서 onLoad 콜백도 따로 빼놓은 듯 하다.



-    활용

백그라운드에 비디오를 깐다던지, 혹은 움직이는 프로필을 만든다던지의 활용이 가능할 것이다.
공식 예제 페이지에서는 CSS 로 동영상을 페이지 전체 백그라운드로 사용하였다.

bideo.js 를 사용하진 않았지만 '피자마루' 홈페이지의 푸터영역도 이 라이브러리로 개발이 가능할 듯 하다.




1 Comments
  • 프로필사진 티티오 2017.03.27 02:51 신고 덕분에 동영상을 쉽게 넣을 수 있었습니다.

    다만 모바일에서 플레이 푸쉬버튼 말고 자동으로 계속 반복실행되게 할 수 있게 하고싶습니다.
    초보라 봐도 모르겠습니다...
댓글쓰기 폼