WIT – NTS UIT Blog

HTML5 비디오 플레이어 마크업 작업기

Posted by in Research

서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다.   그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 감이 잡히지 않아서 본격적인 마크업을 시작하기 전에 다른 서비스를 레퍼런스 삼아 분석해 보기로 하였고, 주요 비디오 스트리밍 서비스 사이트 3개(유투브, 비메오, 네이버TV)를 조사해 보았습니다. 이 글에서는 레퍼런스 사이트들의 UI와 마크업 구조를 먼저 살펴보고, 실제 구현했던 마크업 구조는 어떤 식으로 개발하였는지 그리고 작업을…read more

HTML 5.1 정리 / HTML 5.2 미리보기

Posted by in Research

HTML 5.1 권고안 공개 2016년 11월 1일 웹표준화단체인 W3C의 웹플랫폼워킹그룹(Web Platform Working Group)이 HTML 5.1을 W3C 권고안으로 공개했다. (W3C의 규격이 W3C 권고안에 이르기까지의 과정은 “초안 (Working Draft)” → “최종 초안 (Last Call Working Draft)” → “권고 후보 (CR : Candidate Recommendation)” → “권고안 (PR : Proposed Recommendation)” → “W3C 권고안 (Rec : Recommendation)” 라는 5개의 단계가 있다.) HTML 권고안의 역사를 간단히 살펴보면 1999년에 HTML 4.01의 권고안이 공개가 됐다. 그러나 HTML 4.01 당시에는 웹 응용프로그램 등이 고려되지 않았고 웹 페이지를 기술하기 위한 포맷이었던 만큼 전면 개정을 거쳐서 W3C가 15년 만인 2014년 10월 28일에 HTML5 권고안을 공개하게 된다. 이번에 권고안을 공개한…read more

[JSer.info#번역] 2014-12-08 자바스크립트 주요 소식

Posted by in Research

Firefo 34.0 릴리즈 Firefox 34.0이 릴리즈 됐습니다. 개발자 도구에 localStorage inspector, console.table() 등이 추가됐고,  profiler 도구가 개선됐습니다. 그리고 jQuery events를 대응합니다. 자세한 것은 아래 문서를 참고하세요. WebIDE, Storage inspector, jQuery events, iframe switcher + more – Firefox Developer Tools Episode 34 또한 CSS Fonts Level 3 시범적으로 적용됐고, template string 등 ES6의 기능이 구현 됐습니다. Firefox 34 for developers   QUnit 1.16.0 릴리즈 자바스크립트 테스트 라이브러리 QUnit 1.16.0이 릴리즈됐습니다.  코드를 리팩토링했고 done() 스타일의 비동기 테스트와 Promise 테스트 지원하는 등 QUnit 2.x를 위한 여러 사항이 반영됐습니다. 2.0에서 바뀌는 부분은 「QUnit 2.x에서…read more

0

Chrome 브라우저 HTML5 Video Element의 src 캐시 버그

Posted by in Research

  프로젝트 도중에 HTML5 Video Element를 8개 삽입하면 7번째 Video Element 부터는 동영상을 제대로 로딩하지 못하는 문제가 있다는 사실을 발견하였다.

  7, 8번째 동영상을 로딩하지 못해서 아래와 같이 나온다.       크롬을 열어서 네트워크 탭을 봤더니 src 요청이 pending에 걸려있다.   익스플로러, 사파리, 파이어폭스 모두 정상 동작하는데 크롬만 문제인 걸 보니 Blink 엔진의 버그로 추측된다. 바로 구글링을 해봤는데 역시나, Blink 버그가 맞는 듯 아래의 이슈 티켓 두 개를 찾았다. Issue 234779: HTML5 video request stay pending (forever) Issue 31014: Byte range cache is locked when attempting to open…read more

0

FullScreen 모드일 때 HTML5 Video 네이티브 컨트롤 감추기

Posted by in Research

    HTML5 등장 이전까지 웹에서 동영상을 제공하기 위해서는 어도비의 플래시 플레이어나 MS의 실버라이트 같은 플러그인을 이용해야 했다. 하지만 이제는 HTML5 Video API를 이용하면 간단한 마크업만으로 동영상을 제공할 수 있다.

  물론 어디까지나 ‘동영상만 제공할 때’  간단한 마크업으로 가능하다는 이야기다. 브라우저마다 플레이어를 렌더링하는 모습이 제각각이라 제품으로 포장하려면 커스터마이징을 해야 한다. 이 때 건드려야 할 영역 중 하나가 컨트롤이다. 컨트롤은 플레이어 재생, 탐색, 음량 조절 등의 기능을 제공하는 플레이어 가장 하단에 있는 컴포넌트 집합을 말한다.         video.js, mediaElement.js, jwPalyer 같은 유명한 HTML5 Video 지원 플레이어들은 모두 네이티브…read more

0