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

서론 네이버 메인에는 광고가 군데군데 들어가 있는데, 저는 이 중에 롤링보드라는 영역의 비디오 플레이어 마크업 작업을 진행해야 하는 상황이었습니다. 기존에는 플래시로 광고 영상 플레이어가 구현이 되어 있었기 때문에, 이를 순수 HTML5로 변환하는 작업이었습니다.   그림 1: 네이버 메인 롤링보드 영역 처음 해보는 플레이어 마크업 이었기 때문에, 어떻게 시작을 해야 할지 약간 더보기…

글쓴이 배 영,

HTML 5.1 정리 / HTML 5.2 미리보기

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개의 단계가 더보기…

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

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 더보기…

글쓴이 UYEONG,

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

  프로젝트 도중에 HTML5 Video Element를 8개 삽입하면 7번째 Video Element 부터는 동영상을 제대로 로딩하지 못하는 문제가 있다는 사실을 발견하였다. <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video> <video src=”http://video.webmfiles.org/elephants-dream.webm”></video>   7, 8번째 동영상을 로딩하지 못해서 아래와 같이 나온다.       크롬을 열어서 더보기…

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

    HTML5 등장 이전까지 웹에서 동영상을 제공하기 위해서는 어도비의 플래시 플레이어나 MS의 실버라이트 같은 플러그인을 이용해야 했다. 하지만 이제는 HTML5 Video API를 이용하면 간단한 마크업만으로 동영상을 제공할 수 있다. <video id=”video” controls> <source src=”http://content.bitsontherun.com/videos/q1fx20VZ-27m5HpIu.webm” type=”video/webm”> <source src=”http://content.bitsontherun.com/videos/q1fx20VZ-52qL9xLP.mp4″ type=”video/mp4″> </video>   물론 어디까지나 ‘동영상만 제공할 때’  간단한 마크업으로 가능하다는 이야기다. 더보기…

HTML5 transform:translate 와 top/left 성능 비교

참고 : “Myth busting the HTML5 performance of transform:translate vs. top/left”   개요 HTML5에서 애니메이션 효과를 내는 여러가지 방법들이 있습니다. 그 중에서 가장 성능이 좋은 방법이 무엇인지 조사하던 중에 발견한 포스팅 내용을 요약하였습니다.   테스트 범위 transform:translate vs. position:absolute and top/left CSS Transitions vs. custom JavaScript requestAnimationFrame() Graphics acceleration on vs. 더보기…