오예의 묵상과 정보가 있는 공간

 


TOTAL ARTICLE : 90, TOTAL PAGE : 1 / 5
구분 웹일반 | 태그-소스 | 제로보드 | 그누보드 |
태그-소스 : video 태그
 오예    | 2014·06·19 18:32 | HIT : 634 | VOTE : 24

먼저, HTML5 비디오 태그에 대한 개요입니다.

-대부분의 온라인 동영상은 (플래시 같은)3rd party plugin을 통해서 제공되고 있습니다.
-유튜브를 비릇, 현존하는 동영상 컨텐츠의 70%는 플래시 포맷으로 제공된다는 통계가 있습니다. 플래시가 사실상 업계의 표준으로 인정받고 있습니다.
-HTML5 video는 이러한 온라인 동영상 제공방식에 있어 또다른 대안으로 제기되었습니다. 
-HTML5 video는 네이티브 태그로서 별도의 외부 프로그램의 도움을 받지않고, 독립적으로 작동되며, 크로스 브라우저 환경에 최적화 되었습니다.

 

사용자입장에서 볼 때, 아무 이상없이 잘 돌아가는 플래시의 대안이 필요한지 물으신다면, 플래시가 더 이상 웹이라는 거대한 생태계에서 동영상컨텐츠의 플랫폼으로 성장하는 것을 원하지 않는다... 정도로 정리하겠습니다. 그걸 원치 않는 이는 비단 Jobs님뿐만은 아닐테고요.

 

다음, HTML5가 가져올 수 있는 문제들입니다. 
-당연히 동영상이 포함된 웹페이지는 느리게 움직이겠고요,
-늘 일어나는 문제입니다만, 현존 대표 브라우저 5개가 서로 자기의 비디오 코덱이 최고라고 주장을 하다보니 업계표준이 없다는 것이고요, (

-마지막으로 표준이 없어서 생기는 문제입니다만, 미래에 업계 표준이 된 코덱에게 지불해야할 라이선스와 관련비용이 예측 불가하다는 점...

 

 

그리고 브라우저별로 채택한 비디오코덱입니다.

(1) MS 와 Apple 은 사이좋게(?) H.264 codec 을 채택
-높은 질 덕분에, 점점 고화질의 온라인동영상이 많아지는 분위기에서 가장 높은 점수획득!

http://handbrake.fr 사이트에서 wav, wmv를 H.264 codec에 맞춰 mp4로 변환할 수 있습니다.


(2) Firefox 와 Opera 는 Ogg Theora format 을 채택
- 질적인 면에서 H.264 만은 못하지만,
- 오픈소스라서 누구나 써보고 있는 상황입니다.
http://firefogg.org 사이트에서 변환 가능하구요. (파이어폭스는 미리 깔고요)


(3) Google 은 VP8 Video Codec 을 채택
- 높은 동영상 품질

- 오픈소스

- 얼마전엔 Mozilla(Firefox)진영도 구글 팔짱을 끼었죠. 

http://www.webmproject.org 사이트에서 정보도 얻고, 파일 변환도 가능합니다.

 

HTML5
http://videojs.com
http://www.html5video.org
http://www.diveintohtml5.org/video.html

 

 

 

드디어, 기본적인 비디오태그의 사용법입니다.

 

controls는 플레이버튼 등이 나오는 컨트롤패널을 보일지, 말지 정하는 것인데요, boolean값이므로 예스, 노 써줘야하는데 안쓰면 기본적으로 예스로 인정.

preload는 'false'로 해두었는데요, 동영상만 있는 페이지가 아니라면 동영상을 볼때만 로딩하는 게 좋습니다. 특히 페이지 하단에 동영상이 있거나 하면 사용자는 이유없는 지연에 실망합니다.

 

더욱 중요한, 크로스브라우저(제일 많은 .mp4, .ogv) 비디오태그의 사용법입니다.



 

IE, Safari, Firefox, Opera에서는 동영상이 잘 보입니다. Chrome은... 한 줄 더 넣어주면 되겠죠? 연습삼아 한 번 해보세요.

 

마지막으로, 아무리 비디오 태그가 (간단해서) 좋아도 큰(작지않은) 동영상 파일은 스트리밍하세요.

샬롬~
난! 자유인...
  
90 태그-소스   태그가 적용되지 않게 하는 태그  오예 18·01·10 60 6
89 제로보드   mysql 4.1에서 제로보드의 호환성 문제 해결  오예 16·01·15 253 16
88 그누보드   그누보드 이미지 리사이즈  오예 15·07·30 384 25
태그-소스   video 태그  오예 14·06·19 634 24
86 그누보드   DHTML 에디터 이미지 새창으로 안뜨게 하려면  오예 15·05·17 365 29
85 그누보드   그누보드 이미지 클릭시 팝업창 뜨는 문제  오예 13·04·24 942 39
84 웹일반   플래시 위에 레이어 팝업창 띄우기  오예 12·11·09 1059 32
83 그누보드   코멘트 줄간격 조정  오예 12·09·03 809 32
82 웹일반   해상도에 따라 변하는 레이어 위치 고정하기  오예 12·08·16 803 30
81 태그-소스   플래시에 레이어창 위로 올라오게 하기  오예 11·10·04 980 36
80 태그-소스   플래시 object태그(배경 투명)  오예 11·08·22 1226 40
79 웹일반   onfocus="this.blur()"  오예 11·08·22 1184 53
78 태그-소스   이미지맵에서 롤오버 만들기  오예 11·07·31 1363 43
77 그누보드   그누보드 토큰 에러  오예 11·07·29 1887 57
76 제로보드   제로보드 관리자 비번 잊어버렸을때  오예 11·06·28 1748 44
75 웹일반   레이어 팝업창 소스  오예 11·05·16 1950 74
74 태그-소스   홈페이지 주소창에 로고 넣기  오예 11·05·03 1969 78
73 태그-소스   동영상 플레이어 100%,200%,전체화면 스크립트  오예 10·05·30 2607 122
72 태그-소스   레이어 팝업창  오예 10·04·13 2566 155
71 그누보드   그누보드 회원삭제 안될때  오예 10·03·06 2866 166
12345
Copyright 1999-2018 Zeroboard / skin by GGAMBO

페이스북

신광교회

진해남부교회

아름다운교회

칠원교회

ke3