반응형

-->

JW Player란?

동영상을 보기 위해 플레이어들이 많이 있다. 네이버 플레이어, 다음플레이어, 유투브...둥등 JW Player도 동영상을 재생하기 위한 플레이어 종류중 하나이다. JW Player는 플래시 기반의 플레이어로써 FLV, H.264, MP4, MP3, AAC, JPG, PNG, GIF 포맷들이 플레이가 가능하다. 네이버, 다음 등 포털사이트의 플레이어 영상은 자체 인코딩 과정을 거치기 때문에 화질열화의 단점을 갖고 있다. 하지만 JW Player는 원본 그대로 재생해주기 때문에 저장 공간만 있다면 아무런 제약없이 고화질의 영상도 재생시켜준다.

JW Player 사용법

JW Player로 동영상을 재생하기 위해서는 jwplayer.js와 player.swf 그리고 동영상 파일이 있어야한다.

  • jwplayer.js
    - JW Embedder 방식으로 JW Player를 실행시킬 때 필요. JW Embedder 방식을 사용하지 않을 경우에는 없어도 상관이 없다.
  • player.swf
    - JW Player의 기본 실행파일. 여타의 비디오 및 오디오 자료를 플레이 시킬 때 사용한다.

jwplayer.js와 player.swf 는 http://www.longtailvideo.com/jw-player 홈페이지에서 받을 수 있다.

  • ※ 기본 구조

    <head>
    		
    </head>
    <body>	
    
    동영상이 재생되는 부분
    </body>
  • ※ 사용 예

    플레이어 불러오는 중...
  • ※ 참고사항

    간혹 JW Player가 특정 브라우저에서 재생이 안될때가 있는데 Adobe Flash player를 설치하면 모든 브라우저에서 동영상 재생이 가능하다.
    http://get.adobe.com/kr/flashplayer

    • 후기

      JW Player는 현재 6버전까지 나와있는 상태이다. JW Player 6버전에서 구현되지 않고 있는 기능들...JW Player 6자체 문제라기 보다는 HTML 5 의 기능적 한계때문에 구현이 어려운 부분들이 많다.

      JW Player 5버전에서 6버전으로 업그레이드 되면서 가능 크게 바뀐건 flash 기반의 플레이어를 추구하다가 6버전에서는 기본 모드가 HTML 5로 바뀐다. 아울러서 기존에 지원하던 <embed> 방식과 SWFObject 방식의 플레이는 더 이상 지원 안한다. 이제는 Embedder 방식만을 지원. HTML5와 Flash 기반의 두 가지 방식을 여전히 지원을 하지만 자바 스크립트를 사용을 하는 Embedder 방식으로만 플레이 할 수 있다. 예를 들어 자바 스크립트를 지원하는 티스토리에는 JW Player 6을 가능하지만, 네이버와 같이 자바 스크립트를 지원하지 않는 사이트에서는 JW Player 6을 사용 할 수 없다.

      전제척으로 봤을 때 JW Player 6버전은 기본적 플레이가 되는데 편의성 부분에서는 아직은 이런 저런 기능들이 부족한 것이 많아 보인다. 플래시 기반의 JW Player 5버전에서의 편의성을 따라가지 못하는 것 같다.

      맑은커뮤니케이션에서 웹퍼블리싱 업무시 JW Player를 사용해본 결과 현재 나와있는 6버전보다는 그 아래 버전인 5.2버전, 5.9버전이 크로스 브라우징을 하기엔 더 용이하다.

      ※ 참고사항

      유투브 영상을 플레이 할 때는 스킨을 쓰면 플레이가 안 된다. 스킨을 제거해야 플레이가 정상적으로 이루어 진다.

      유튜브 플러그인은 아직은 플래시 기반이다.. 이것은 JW Player 6의 문제가 아니라. 유튜브 자체의 문제. 유튜브에서 다른 프로그램이 유튜브 영상을 플레이 하도록 도와주는 API를 제공을 하고, JW Player와 같은 플레이어들은 유튜브에서 제공하는 API를 통해서만 유튜브의 영상을 플레이 할 수 있도록 되어 있다. 아마도 유튜브의 영상을 통해서 제공하는 광고 때문에 그런 것 같다. 다른 플레이어를 통해서 유튜브 영상을 시청 하도라더 정상적으로 광고가 나가도록 하기 위해서. 그런데 유튜브에서 자체적으로 제공하는 API가 현재는 플래시 기반으로 되어 있어서 유튜브 영상을 플레이 할 때는 아직은 플래시 기반을 벗어날 수 없다. 당연히 안드로이드나 iPad같은 기기에서는 문제가 생긴다.. 이 문제는 유튜브에서 iFrame 기반의 API를 시험적으로 내놓고 있기 때문에 이 iFrame 기반의 API가 안정되면 해결 될 것으로 기대 한다.

    반응형
    반응형
    지난 2013년 2월 NHNCompany에서 학교에 첫 정시 입학이 이루어졌습니다.
    그러면서 이번에 (주)맑은커뮤니케이션에서 웹퍼블리싱 작업하게된 부분은 타 사이버 교육기관처럼 교수님들과 학생들의 필요한 웹페이지의 관리 프로그램이었습니다.
    그중 이번에 소개할 내용은 멀티 디바이스를 지향하는 달력(캘린더)/스케쥴관리 MarkUp 부분입니다.
    현재 정상적으로 관리되고 있는 사이트나 작업 진행중인 사이트들 중 꼭 필요하지않지만 대학교나,정규화된 회사들은 스케쥴표나 달력을 필요로 하고 있습니다. 또한 스케쥴표와 달력을 꼭 필요로한 홈페이지들도 많이 늘어나고있습니다.
    그 중심에는 스마트폰을 활용해 PC와 동기화를 가능하게 하여 언제 어디서나 어떤 기기를 사용해 자신의 스케쥴을 관리할수 있게 발전이 되었기 때문입니다.
    이런 흐름에 맞춰 작업을 진행하게 되었으며 포스팅 하게될 내용은 PC버전과 어떤 기종의 모바일에서도 출력이가능하고 개발도 용의한 테이블 스케쥴표를 만들게된 과정과 에러사항/해결에 대해서 정리해보겠습니다.

    웹퍼블리싱 제작과정

    1.테이블 마크업
    강의 시간표
     
    0교시
    (08:00)
               
    1교시
    (09:00)
               
     
    
    강의 시간표
     
    0교시
    (08:00)
               
    1교시
    (09:00)
               

    - 여타 다를것 없는 기본 테이블로 월~금요일까지의 칸 입력 후 시간대별 교시를 입력합니다.
    클릭시 해당데이터를 입력하거나 다른 폼에서 데이터 입력시 데이터 삽입도 가능하도록 마크업한 상태입니다.

    2. 개발시 데이터 출력될 스케쥴 마크업
    강의 시간표
     
    0교시 (08:00)
    자바스크립트 (01반)강의실A - 홍길동
    JAVA (02반)강의실B - 홍길동
    C++ (03반)강의실C - 홍길동
     
    유비쿼터스 (04반)강의실D - 홍길동
     
    1교시 (09:00)    
    Node.js
    Dart.js
    강의실E - 홍길동
     
    2교시 (10:00)            
    강의 시간표
     
    0교시 (08:00)
    자바스크립트 (01반)강의실A - 홍길동
    JAVA (02반)강의실B - 홍길동
    C++ (03반)강의실C - 홍길동
     
    유비쿼터스 (04반)강의실D - 홍길동
     
    1교시 (09:00)  
    자바스크립트
    jQuery API (01반)
    강의실A - 홍길동
     
    Node.js
    Dart.js
    강의실E - 홍길동
     
    2교시 (10:00)            

    Css (아래의 에러사항들의 문제를 주석으로 처리)

     
    .bbs_table{width:100%;border:1px solid #d0d4d9;line-height:16px;/* IE7 수정 */*border-right:0/* IE7 수정 */}
    .bbs_table th:first-child,.bbs_tbl_type2 td:first-child{border-left:0}
    .bbs_table th{padding:10px 9px 7px;border-width:0 0 0 1px;border-color:#dcdee2;border-style:solid;text-align:center;background-color:#eff0f2;color:#333}
    .bbs_table td{padding:10px 9px 7px;border-width:1px 0 0 1px;border-color:#edeef0 #dcdee2;border-style:solid;text-align:center;line-height:33px;color:#666;/* IE7 수정 */*border-left:0;*border-top:0;*border-bottom:1px solid #edeef0;*border-right:1px solid #dcdee2;/* IE7 수정 */}
    .bbs_table td input[type=text],.bbs_tbl_type2 td select,.bbs_tbl_type2 td a.fron{margin:-6px 0 -2px}
    .bbs_table td:hover{border:1px solid #666 !important}
    .bbs_table tr:first-child td{border-top:1px solid #dcdee2}
    .bbs_table tr:first-child td:hover{border-top:1px solid #666 !important}
    .schu_line_bg{border:1px solid #999 !important;background-color:#f9fafa}
    .schedule_area_v1{position:relative;/* IE7 수정 */*top:3px;/* IE7 수정 */padding:18px 5px 16px;line-height:18px;font-size:12px}
    .schedule_area_v1 a{display:block;position:relative;color:#333}
    .schedule_area_v1 a:hover{font-weight:bold}
    .schedule_close{display:block;position:absolute;top:2px;right:2px;width:15px;height:15px;cursor:pointer;border:0;background-color:#f9fafa;color:#333}
    

    * 옵션사항

    - 테이터 출력되면 해당 컬럼에 필요 문구가 입력됩니다.

    - 데이터 출력시 빈 컬럼과 구분하기위해 백그라운드 색과 보더 라인을 입혀줍니다.

    - 데이터 출력반환시 X(이미지로 대체가능)표시를 클릭합니다

     

    제작후 데이터 입력시 에러사항들

    첫째. 각 컬럼별 테이터입력시 위,아래,양옆 사방으로 보더라인 두줄표현문제
    둘째. 최상단 컬럼과 타이틀 컬럼부분 보더라인 겹침문제 (IE7)
    셋째. 타이틀 컬럼 제외 데이터가 출력될 모든 컬럼 '행'의 내용이 길어진 만큼 컬럼높이값이 같이 늘어나야하는 문제



    에러사항과 해결방안

    첫째. 각 컬럼별 테이터입력시 위,아래,양옆 사방으로 보더라인 두줄표현문제
     1. 컬럼 td 안에 div섹션을 구현 absolute 위치값을 상단으로 겹치도록 올림. 
     2. 위,아래,양옆 데이터가 입력되어도 겹쳐보이도록표현해 라인이 한줄로 표현.
     3. 컬럼 td에는 보더값만 지정, 나머지 부속성들은 div섹션에 삽입. 
     4. IE7에서는 우측,하단 부분의 라인이 겹쳐지는 문제가 발생. 
     5. absolute의 위치값이 적용되지 않고 그대로 배출하여 정상처럼 두줄로 표현하지않고 밑쪽으로 내려감.
     6. 해결책은 td의 반대 좌측,상단 보더를 없애 겹침을 유지시켜 줍니다
     
    둘째. 최상단 컬럼과 타이틀 컬럼부분 보더라인 겹침문제 (IE7)
     - 해당 타이틀컬럼(thead)부분의 하단 보더라인 삭제와 컬럼의 제일 첫번째 컬럼만 상단 보더를 넣어주면 문제가 해결됩니다.
     
    셋째. 월~금요일에 해당하는 교시의 내용이 길어진 만큼 컬럼높이값이 같이 늘어나야하는 문제
     - 보더라인을 IE7버그로 최초 div섹션이 주었으나 섹션별로 높이값이 데이터별로 일정하지않아, 어쩔수없이 상위클레스 td에 주었으며, 위사항들의 보더라인의 해결로 인해 자연적으로 해결.




    작업완성/작업평

    최초 컨펌후 작업진행 되었을때는 기존 달력들과 스케줄 소스를 조그만 수정해서 쓰면 된다는 식으로 작업하였으나, 생각외로 에러사항이 많이 생겼고(IE7) 시대의 흐름에 맞게 PC뿐만아니라 멀티 디바이스도 신경써야했기 때문에 해결방안을 찾는데도 너무 많은 시간을 투자했습니다. 언제나 그렇듯이 PSD상에서는 가볍게 느껴지는 작업도 개발로 이뤄지면 항상 생각지도 못한 에러사항이 발생합니다. 이 소스를 보고 조금이나 도움이 되는 부분이 있었으면 좋겠습니다.
    감사합니다.



    스케줄표 다운로드

    schedule.html
    다운로드

     

     

    반응형
    반응형

    2011년 10월에 출시된 iOS 5에서부터 지원하기 시작하여 재조명을 받게된 input type들에 대해 알아보겠습니다.

    본래 input을 HTML5에 추가된 type들을 정확히 써야 하는 이유는 더욱 시맨틱한 데이터 정보를 입력하기 위함이나, 그로 인해 눈으로 보이는 실질적 혜택은 모바일 디바이스에서 보이는 키패드의 변화입니다. 시맨틱 마크업이 추후 어떤식으로 우리에게 편리함을 줄 수 있을지 가늠해 볼 수 있는 좋은 예라고 할 수 있겠지요.

    (※ type="search" 같은 경우 form 엘리먼트로 쌓여있여야만 키보드 하단 다음문장 버튼 부분이 검색 버튼으로 바뀝니다.)

    HTML5에서 새로 추가된 input Type

    HTML5에서 새로 추가된 input Type
    type 데이터 형태 구현 모습 설명
    search 검색 [텍스트 필드] 검색창을 구성할 때 사용하는 input type

    url URL [텍스트 필드] url 입력 input type
    email 이메일 [텍스트 필드] email 입력 input type
    tel 전화번호 [텍스트 필드] 전화번호 입력 input type
    datetime 날짜와 시각 [텍스트 필드] 날짜와 시각 입력 input type
    date 날짜 [텍스트 필드] 날짜(년-월-일) 입력 input type
    month [텍스트 필드] 시간대 없는 년과 달 입력 input type
    week [텍스트 필드] 시간대 없는 주 입력 input type
    time 시각 [텍스트 필드] 시, 분 입력 input type
    datetime-local 날짜와 시각 [텍스트 필드] 시간대 없는 날짜와 시각 입력 input type
    number 숫자 [텍스트 필드] 숫자 값 input type
    range 범위 숫자 값이나 정확한 숫자가 필요 없는 의미상의 값 input type
    color 8bit sRGB input type

    기존 input Type

    기존 input Type
    type 데이터 형태 구현 모습 설명
    hidden 숨김 숨김 input으로 웹퍼블리싱 시 사용하지 않으며 개발단에서 추가되는 input type
    text 텍스트 [텍스트 필드] 일반 텍스트 입력 시 사용하는 input type
    password 비밀번호 [텍스트 필드] 텍스트 필드이나 무조건 영문키로 변환되며 어떤 키가 타이핑되었는지 숨겨져 나타난다.
    file 파일 첨부 파일을 첨부할 수 있도록 하는 input type
    radio 라디오 버튼 동일 name으로 묶인 여러 개체 중 단일 개체만 선택 가능하도록 하는 input type
    checkbox 체크박스 동일 name으로 묶인 여러 개체에서 여러 여체가 선택 가능하도록 하는 input type
    submit 전송 버튼 form 안에 있는 값을 전송하기 위한 input type
    image 전송 버튼 form 안에 있는 값을 전송하기 위한 이미지로 된 input type
    button 버튼 단순 모션 등 서버와 관련없는 페이지단의 처리를 위한 input type
    reset 리셋 버튼 form 안에 있는 value들을 초기화하기 위한 input type. 실수로 클릭 시 모든 값이 지워지는 불편함으로 인해 거의 사용하지 않음.

    참조

    반응형
    반응형

    html5가 발표되면서 새로 추가된 태그들이 발표가 되었습니다.

    맑은커뮤니케이션에서는 이번에 html5에서 새롭게 추가된 태그들을 정리해볼까 합니다.

    새로운 태그 중 저는 <audio>, <video> 태그가 눈에 띄는데요.

    이전버전에는 오디오나 비디오의 표준안이 존재하지 않았었습니다. 그래서 윈도우 미디어 플레이어나 ActiveX기반의 기술을 사용하는 방법 혹은 Silverlight나 Flash와 같은 기술이 발전해왔습니다.

    html5에서 태그를 정의해 줌으로써 별도의 플러그인 없이 재생이 가능해 짐으로써 좀더 가벼워짐을 느낄 수 있을 것입니다.

    지금부터 새롭게 추가된 아이들을 알아볼께요~

    audio

    음악이나 다른 오디오 스트림과 같은 소리를 들려줍니다.

    속성

    속성 설명
    src 미디어 주소 제공
    autoplay 미디어 자동 재생
    loop 미디어 반복 재생
    controls 사용자 에이전트가 제공하는 기본 컨트롤러를 사용
    
    

    canvas

    스크립트를 제공하여 그래프, 게임 그래픽, 기타 비주얼 이미지를 그릴 수 있습니다.

    • - 좌표 공간에서의 크기를 조절하는 두가지 속성은 유효한 양의 정수값이어야 합니다.
    • - canvas 요소에 동적인 작업을 하려면 스크립트 언어를 사용해야 합니다.

    속성

    속성 설명
    width canvas의 너비 지정
    height canvas의 높이 지정
     
    
    

    command

    사용자가 실행할 수 있는 명령을 나타냅니다.

    속성

    속성 설명
    type 명령의 종류를 정의, radio, checkbox, command를 지정하며 기본값은 command
    label command의 이름을 지정하며 값으로 빈 문자열을 쓸 수 없음
    title 사용자에게 설명이나 힌트 제공
    icon command 요소에 보일 아이콘 지정
    disabled 사용 불가능함을 나타냄
    checked type 속성이 checkbox나 radio일 때 checked 속성을 선언하면 선택된 상태로 나타남
    radiogroup type 속성이 radio 일 때 토글된 커맨드의 이름을 지정할 수있는 속성
    
    	Save
    
    

    datalist

    input 요소에 대한 미리 정의된 옵션 집합을 나타냅니다.

    • - input 요소에 "자동완성"기능을 제공하는데 사용됩니다. 사용자는 입력 데이터로 미리내용은 미리 정의된 옵션.
    • - option 요소를 포함할 수 있습니다.
    • - input 요소에 묶여 있습니다.

    details

    사용자가 보거나 숨길 수 있는 추가정보를 지정하고 열고 닫을 수 있는 대화형 도구를 만드는데 사용합니다.

    • - summary 요소는 제목을 지정하며 세부 정보보기와 숨기기 클릭이 가능합니다.

    속성

    속성 설명
    open 세부 사항을 노출
    이미지 추가 정보
    • 만든 날짜: ‎2011‎년 ‎8‎월 ‎2‎일 ‎화요일, ‏‎오후 6:16:41
    • 크기: 11.9KB (12,236 바이트)
    • 위치: D:\Downloads

    embed

    HTML이 아닌 외부 애플리케이션이나 대화형 컨텐츠를 포함할 때 사용합니다.

    속성

    속성 설명
    src 포함하고자 하는 외부 자원의 주소 지정
    type 인스턴스화 할 플러그인의 유효한 MIME 타입 지정
    width 요소의 너비 정의
    height 요소의 높이 정의
           	
    
    

    figcaption

    부모 요소인 figure 요소의 캡션이나 제목을 정의합니다.

    biew
    biew logo

    figure

    일러스트레이션, 도표, 사진, 코드 등과 자체 포함된 내용을 지정합니다. 이 요소는 보통 문서의 흐름에서 단일 요소로 참조되어 제거되더라도 문서의 주된 흐름에 영향을 미치지 않습니다.

    biew

    hgroup

    섹션의 제목을 나타냅니다. 부제목이나 태그영역 h1 ~ h6 요소들을 그룹짓기 위해 사용합니다.

    Welcome to biew

    web standardization group

    keygen

    keygen 요소는 암호화를 위한 개인키와 공개키 쌍을 만들어냅니다.

    • - 폼 관련 요소에 속합니다.
    • - 스크립트에서 form.elements와 fieldset.elements로 호출할 수 있습니다. (여기에서 form, fieldset은 해당 요소의 name 속성값)
    • - 레이블을 붙일 수 있습니다.
    • - 폼을 전송할 때 함께 전송됩니다.

    속성

    속성 설명
    autofocus 페이지를 로드할 때 요소가 자동으로 포커스를 받음
    challenge 값과 함께 전달되는 문자열
    disabled 값을 제출하지 않음
    form 명시적으로 폼 소유자를 지정
    keytype 키의 유형을 정의
    name 폼 제출 시에 사용되는 폼 컨트롤의 이름을 나타냄

    mark

    문서 내에서 다른 문맥과의 관련성을 표시하기 위해 참조 목적으로 마킹, 혹은 하이라이팅 한 텍스트 집합을 나타냅니다.

    • - 인용구의 특정한 부분으로 주의를 환기시키기 위해 mark 요소를 사용합니다.
    • - "구문 강조"와는 다른 의미로 구문 강조에 쓰기엔 span 요소가 좀 더 적절합니다.
    • - 원래는 강조되지 않았었던 텍스트를 인용문 일부에서 mark 요소로 하이라이트할 경우 일반적인 표현 관습대로 인용문 내의 mark 요소를 이탤릭체로 표시할 수 있습니다.
    • - 텍스트에서 "중요성"(strong)을 나타내는 것과 "연관성"(mark)을 나타내는 것의 차이가 있습니다. 문장과 관련이 없으니 중요한 부분을 나타내고자 할때는 mark 요소보다는 strong 요소를 사용하는 것이 더 적합합니다.

    요즘 우리 집을 찾아 오는

    고양이

    가 있는데 너무 귀엽습니다. 내 생각엔 우리 집 정원이 맘에 드는 것 같아요! 나도

    고양이

    를 분양 받아 키워볼까 하는 생각이 듭니다.

    meter

    알려진 범위 내에서의 스칼라 측정 또는 분포 비율을 나타냅니다.

    속성 설명
    value 게이지에 표시하는 측정 값
    min 범위의 최소 값
    max 범위의 최대 값
    low '낮음' 범위의 값
    high '높음' 범위의 값
    optimum '최적' 범위의 값
    form 명시적으로 폼 소유자 정의
    내 컴퓨터 D 드라이브 사용량 : 300GB
    

    output

    계산의 결과를 나타냅니다.

    속성 설명
    for 계산의 결과와 계산에 사용되었거나 계산에 영향을 미친 값을 나타내는 요소를 명시적으로 연결
    form 폼 소유자와 요소를 명시적으로 연결
    name 폼 제출시에 사용되는 폼 컨트롤의 이름

    상품 가격: 10,000원

    progress

    작업의 진행 상황을 나타냅니다.

    속성 설명
    value 진행된 작업의 값
    max 최대 작업양
    form 명시적으로 폼 소유자 정의

    프로그램 설치 진행:

    0%
    

    rp

    루비 주석을 지원하지 않는 사용자에게 루비 텍스트를 괄호로 둘러싸서 표현하기 위해 사용됩니다.

    ()()()
    

    rt

    루비 텍스트의 루비 주석을 나타냅니다.

    ()()()
    

    ruby

    루비 주석을 정의합니다. 루비 주석은 텍스트 주변(보통 위에)에 나타나는 텍스트로 주로 동아시아권 언어에서 발음이나 주석으로 사용됩니다.

           	
    
    	韓國(한국)
    
    

    source

    video 요소 및 audio 요소와 같은 미디어 요소에서 사용할 수 있는 대체 미디어 자원을 정의합니다.

    속성 설명
    src 미디어 자원 주소 정의
    type 사용할 수 있는 타입의 자원인지 확인
    media 사용할 수 있는 미디어 자원인지 확인
    
    

    track

    video 요소 및 audio 요소와 같은 미디어 요소에 대한 텍스트 트랙을 지정합니다. 이 요소는 자막파일이나 텍스트를 포함하는 다른 파일을 자정하는데 사용됩니다.

    속성 설명
    kind 텍스트 트랙의 종류 정의
    src 텍스트 트랙 데이터의 주소 정의
    srclang 텍스트 트랙 데이터의 언어 정의
    label 사용자가 읽을 수 있는 트랙 제목 정의
    default 기본 트랙 정의
    
    

    video

    비디오나 영화를 재생하는데 사용됩니다.

    • - src 속성이 있으면 track 요소를 자식 요소로 포함할 수 있습니다.
    • - src 속성이 없으면 source 요소와 track 요소를 자식 요소로 포함할 수 있습니다.
    • - video 요소, audio 요소와 같은 미디어 요소는 자식 요소로 포함할 수 없습니다.
    • - video 요소를 지원하지 않는 오래된 웹 브라우저에서 구형 비디오 플러그인을 시도하거나 사용자가 비디오 컨텐츠에 접근할 수 있는 방법을 제시하는 텍스트를 보여줄 수 있도록 요소 내부에 컨텐츠를 제공할 수 있습니다.
    속성 설명
    src 미디어 자원의 주소를 제공
    poster 비디오를 사용할 수 없을때 보여줄 이미지
    preload none, metadata, auto 키워드를 지정하여 미디어의 다운로드 상태 결정
    autoplay 미디어를 자동 재생
    loop 미디어를 반복 재생
    audio 오디오 채널을 제어
    controls 사용자 에이전트가 제공하는 기본 콘트롤러를 사용
    width 미디어의 가로 크기를 정의
    height 미디어의 세로 크기를 정의
    반응형
    반응형
    오디오 요소와 비디오 요소는 사운드의 재생과 동영상의 재생을 위한 요소입니다.
    두 요소 모두 HTML4.01 이전에는 없었고 HTML5에 새로 추가된 요소입니다. 이전 버전의 HTML 문서에서도 사운드 파일과 비디오 파일을 재생할 수 있었습니다. 그러나 이전에는 embed요소와 object 요소를 사용했습니다. 하지만 많은 개발자와 디자이너, 퍼블리셔가 웹표준을 지향하고 공유할 수 있는 웹을 만들고자 하는 시대에 이것들을 하나의 문서가 아닌 플래시나 실버라이트, 미디어플레이어나 퀵타임 플레이어와 같은 외부 플러그인으로 작업하는 것은 장애와도 같은 것이라는 생각이 듭니다.
    하지만 html5에서 제공하는 오디오 요소와 비디오 요소를 사용하면 외부의 플러그인을 사용하지 않고 내장된 플레이어로 음악이나 동영상을 감상할 수 있습니다. 이것은 멀티미디어 요소가 웹페이지의 일부분의 되는 것입니다. 이렇게 되면 웹의 기본 정신에도 부합되는 것이고 시맨틱한 웹페이지를 만드는 데 있어서 동영상도 그영역 안에 포함할 수 있게 됩니다.

    비디오 재생을 위한 비디오 요소

    ie9 익스플로러 firefox 파이어폭스 safari 사파리 chrome 크롬 opera 오페라
    9.0 버전부터 지원 3.5 버전부터 지원 3.2 버전부터 지원 3.0 버전부터 지원 10.5 버전부터 지원
    가장 기본적인 비디오 태그 사용 예와 지원하지 않는 브라우저를 위한 안내문구
    
    

    위는 간단한 비디오 태그를 이용하여 비디오를 재생하기 위한 코드입니다.
    오디오 태그와 별 반 차이는 없습니다.

    비디오 태그에서 사용할 수 있는 속성

    속성명 기능 및 역할
    src 파일 경로 재생할 비디오 경로
    autoplay 빈 값, autoplay 페이지가 로드되자마자 사운드를 재생할지 지정
    controls 빈 값, controls 비디오를 제어할 수 잇는 컨트롤 패널 사용
    preload none, auto, meta 페이지가 열리면 비디오를 미리 로드해 둠
    none - 프리로드를 사용하지 않음
    auto - 페이지가 모두 열리면 비디오 프리로드
    meta - 페이지가 모두 열리면 비디오 메타정보만 로드
    poster 이미지 URL 비디오가 로드 되기전에 보여 줄 이미지 설정
    loop 반복횟수(숫자) 비디오를 몇 번 반복 재생할 것인지 설정
    width 픽셀단위 숫자 비디오 스테이지의 너비
    height 픽셀단위 숫자 비디오 스테이지의 높이

    비디오 코덱 정리

    비디오 코덱은 브라우저마다 지원하는 파일 포멧이 약간씩 다릅니다. 브라우저 지원별 코덱은 아래와 같습니다.

    구분 ie9 익스플로러 firefox 파이어폭스 safari 사파리 chrome 크롬 opera 오페라
    Theora(ogv, ogg) 지원 안함 지원함 지원 안함 지원함 지원함
    H.264(mp4 등) 지원함 지원 안함 지원함 지원함 지원 안함
    VP8(Web M) 지원함 지원함 미정 지원함 지원 안함
    html5 비디오와 관련된 문제점(표준 포맷)

    동영상 재생 코덱에는 H.264 코덱과 Ogg theora 코덱이 있습니다. H.264 코덱은 사파리와 크롬에서 기본적으로 지원합니다. 반면 오픈소스이며 라이센스 비용이 들어가지 않는 Ogg theora 코덱은 파이어폭스와, 오페라, 크롬에서 지원합니다. 또한 구글은 On2테크놀로지사를 인수하여 역시 오픈소스인 V8 기반의 '웹M'이라고 하는 새로운 동영상 포맷을 개발하였고 크롬이서 이를 지원한다고 하였습니다. 이러면서 구글은 동영상도 웹페이지의 일부가 되어야 한다고 주장하며 개방형 비디오를 지향한다고 말하고 있습니다. 그리하여 H.264코덱 사용을 고집하는 애플과 MS사 등 회사들간에 문제가 있어서 하나의 포맷 방식으로 통일화는 시일이 좀 걸릴 것 같습니다.

    스크립트를 이용한 내장 미디어 컨트롤

    자바스크립트를 이용해 'audio' 나 'video'와 같은 내장미디어를 재생시키거나 멈추게 할 수 있습니다.

    기본적인 play 이벤트와 pause 이벤트를 이용한 외부 컨트롤 방법 (예제 첨부파일 참조)
    
    
    //비디오 재생을 위한 play 함수
    var play = function() {
    	var videoTag = document.getElementsByTagName('video')[0]; //비디오 태그를 가져옴
    	videoTag.play(); //videoTag 변수에 플레이 이벤트를 부여	
    };
    //비디오 일시 정지를 위한 pause 함수
    var pause = function () {
    	var videoTag = document.getElementsByTagName('video')[0]; //비디오 태그를 가져옴
    	videoTag.pause(); //videoTag 변수에 일시정지 이벤트를 부여
    };
    
    video.zip
    다운로드

     

    document.getElementsByTagName('video')를 이용해서 HTML 마크업상에 있는 비디오 태그를 스크립트 안으로 가져옵니다. 이렇 가져온 비디오 태그는 'videoTag'라는 임의의 변수에 담고 재생 버튼이나 일시정지 버튼이 클릭될 경우 각 함수는 비디오 태그에 내장된 이벤트를 실행합니다.

    HTML5 내장 미디어에서 사용할 수 있는 이벤트 핸들러
    이벤트 이름 이벤트 설명
    loadstart 미디어의 로딩이 시작될 때 발생하는 이벤트 입니다.
    progress 미디어 다운로드 진행 상황의 부분을 주기적으로 알려주기 위해 발생하는 이벤트로 세 가지 속성을 가집니다.
    • - lengthComputable : 미디어의 전체 사이즈를 알면 'true'이고 아닐 경우는 'false'
    • - loaded : 지금까지 받은 미디어 크기의 바이트 단위 숫자
    • - total : 미디어 파일 전체 크기의 바이트 단위 숫자
    suspend 미디어의 로딩이 중단되었을 때 발생하는 이벤트입니다. 미디어의 로딩이 완료되었거나 인터넷이 끊기는 등의 여러 가지 이유로 로딩이 중단되었을 때 발생합니다.
    abort 재생이 중단되었을 때 발생하는 이벤트, 동영상이 재생되고 있다가 처음부터 다시 시작될 때 발생하는 이벤트 입니다.
    error 에러가 발생한 경우에 발생하는 이벤트입니다.
    emptied 미디어가 이미 다 로드되었거나 혹은 부분적으로 로드되었을 때 발생하는 이벤트입니다. 그리고 load() 메소드가 미디어를 다시 로드하라고 호출했을 때 발생합니다. 이는 미디어가 더 이상 로드할 것이 없어서 비어 있을 때를 의미합니다.(미디어가 완전히 없어서 빈 것과는 다릅니다.)
    play 미디어를 새로 재생하거나 일시정지되어 있는 상태에서 연결하여 재생하는 이벤트입니다.
    pause 재생 중인 미디어를 일시정지시키는 이벤트입니다.
    loadedmetadata 미디어의 메타데이터가 모드 로드되었기 때문에 모든 속성은 앞으로 사용할 수 있는 유용한 정보를 담게 됩니다. 미디어의 메타데이터가 로드되었을 때 발생합니다.
    loadeddata 미디어의 첫 번째 프레임의 로딩이 끝났을 때 발생합니다.
    waiting 이미 요청된 작업(예를 들어 재생)을 잠시 보류하고 다른 작업(예를 들어 재생 위치 변경)을 먼저 끝낼 때 발생하는 이벤트입니다.
    canplay 미디어가 재생되기에 충분한 데이터가 로드되었을 때 발생하는 이벤트입니다. 적어도 몇 개 정도의 프레임이 로드되어야 발생합니다.

    인용자료 : HTML5 & CSS3(송종식)

    반응형
    반응형
    오디오 요소와 비디오 요소는 사운드의 재생과 동영상의 재생을 위한 요소입니다.
    두 요소 모두 HTML4.01 이전에는 없었고 HTML5에 새로 추가된 요소입니다. 이전 버전의 HTML 문서에서도 사운드 파일과 비디오 파일을 재생할 수 있었습니다. 그러나 이전에는 embed요소와 object 요소를 사용했습니다. 하지만 많은 개발자와 디자이너, 퍼블리셔가 웹표준을 지향하고 공유할 수 있는 웹을 만들고자 하는 시대에 이것들을 하나의 문서가 아닌 플래시나 실버라이트, 미디어플레이어나 퀵타임 플레이어와 같은 외부 플러그인으로 작업하는 것은 장애와도 같은 것이라는 생각이 듭니다.
    하지만 html5에서 제공하는 오디오 요소와 비디오 요소를 사용하면 외부의 플러그인을 사용하지 않고 내장된 플레이어로 음악이나 동영상을 감상할 수 있습니다. 이것은 멀티미디어 요소가 웹페이지의 일부분의 되는 것입니다. 이렇게 되면 웹의 기본 정신에도 부합되는 것이고 시맨틱한 웹페이지를 만드는 데 있어서 동영상도 그영역 안에 포함할 수 있게 됩니다.

    사운드 재생을 위한 오디오 요소

    ie9 익스플로러 firefox 파이어폭스 safari 사파리 chrome 크롬 opera 오페라
    9.0 버전부터 지원 3.5 버전부터 지원 3.2 버전부터 지원 3.0 버전부터 지원 10.5 버전부터 지원
    가장 기본적인 오디오 요소 사용 예
    
    

    가장 간단한 사용 방법입니다. 이렇게 하면 사운드를 재생하기 위한 플레이어가 올라와 있는 상태가 됩니다. 하지만 아무런 소리도 들리지 않을 것입니다. wav파일을 가지고 테스트 해보시면 됩니다.

    페이지가 열리면 자동으로 사운드 재생
    
    

    autoplay 속성을 추가해 주면 플레이어는 보이지 않지만 페이지가 로드되자마자 사운드가 재생됩니다.

    오디오 태그를 지원하지 않는 브라우저의 경우 에러 문구 출력
    
    

    오디오 요소가 지원되지 않는 브라우저에서는 소리가 재생되지 않지만 안내문구가 보이게 됩니다.

    오디오 태그를 지원하지 않는 브라우저는 embed 태그로 대체 사운드 재생
    	
    

    위와 같이 작성할 경우 오디오 태그를 지원하는 브라우저에서는 오디오 태그를 통해서 사운드를 재생하고, 오디오 태그를 지원하지 않는 구 브라우저는 embed 태그를 통해서 사운드를 재생할 수 있습니다.

    컨트롤 패널 보이기
    	
    

    위와 같이 확장 태그를 붙이면 플레이어 컨트롤 패널을 표시할 수 있습니다. controls 속성만 추가하면 플레이어의 모습을 확인할 수 있습니다.

    오디오 요소에서 사용할 수 있는 속성

    속성명 기능 및 역할
    src 파일 경로 재생할 사운드 파일의 경로를 지정
    autoplay 빈 값, autoplay 페이지가 로드되자마자 사운드를 재생할지 지정
    controls 빈 값, controls 플레이어를 표시
    loop 재생횟수(숫자) 사운드를 반복 재생할 횟수를 지정, 기본값은 1
    preload none, auto, meta 페이지가 열리면 미리 로드해 둠
    none - 프리로드를 사용하지 않음
    auto - 페이지가 모드 열리면 비디로를 프리로드
    meta - 페이지가 모두 열리면 비디오 메타정보만 로드

    오디오 코덱 정리

    오디오 코덱은 브라우저마다 지원하는 파일 포멧이 약간씩 다릅니다. 브라우저 지원별 코덱은 아래와 같습니다.

    구분 ie9 익스플로러 firefox 파이어폭스 safari 사파리 chrome 크롬 opera 오페라
    vorbis(oga, ogg) 지원 안함 지원함 지원 안함 지원함 지원함
    wav, wma 지원함 지원함 지원함 지원 안함 지원함
    mp3 지원함 지원 안함 지원함 지원함 지원 안함
    AAC 지원함 지원 안함 지원함 지원함 지원 안함
    반응형
    반응형

    (주)맑은커뮤니케이션 웹퍼블리싱팀에서는 이번에 html5에서 새롭게 추가된 시멘틱태그를 소개하려고 합니다.

    이전 버전의 html은 구조를 상세하게 나타내기에는 부족함이 있었습니다. div를 이용해서 구조를 나누고 스타일로 의미를 부여함으로 사용했었죠.

    html5에서 추가된 시멘틱 태그는 태그를 통해서 의미를 전달 태그입니다. 랜더링했을 때 눈에 보이는 부분은 없지만 소스를 보면 코드가 한눈에 쏙~

    이것는 본인이 작성하지 않는 코드라도 한눈에 알 수있으니 차후의 유지보수를 함에있어서도 편리해질 거라고 생각합니다.

    지금부터 어떤 태그들이 추가가 되었는지 살펴보려고 합니다.^^

    section

    문서 내에서 같은 의미의 구역(제목으로 시작하는 컨텐츠)을 나눌 때 사용합니다.

    • - 섹션의 제목으로 사용되는 제목컨텐츠는 상하구조를 갖지않으며 섹션내 사용된 제목컨텐츠는 레이아웃에 영향을 주지않습니다.
    • - 신문기사와 같은 배포형은 section이 아닌 article을 사용합니다.
    • - section에 스타일이나 스크립트를 지정하려고 한다면 div를 사용하는 것이 좋습니다.

    육대주

    지구 위의 여섯 대륙

    아시아

    • 한국
    • 일본
    • 중국

    한국

    • 서울
    • 부산
    • 광주

    유럽

    • 프랑스
    • 이탈리아
    • 독일

    article

    문서내의 독립적인 글. 블로그 글이나 뉴스 본문 등을 구성하는 섹션을 나타냅니다.

    • - article 안에서 header, footer와 같은 하나의 페이지형식으로 구현할 수도 있으며 페이지 안에서 article요소가 여러번 반복되어도 상관이 없습니다.
    • - 인용구, 광고, 네비게이션 용도로 사용할 수 있지만, 단순한 삽입구를 위해 사용하는 것은 적합하지 않습니다.
    • - article 요소가 중첩될 경우, 중첩된 article 요소는 서로 상호관련이 있어야 합니다. 예를 들어, 블로그 글을 나타내는 article 요소 내부에 블로그 방문자 댓글이나 의견을 article 요소로 넣을 수 있습니다.

    My blog

    The Very First Rule of Life

    ...

    If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.

    ...

    aside

    섹션의 내용과 관련이 없지는 않지만 분리되어도 문제 없는 섹션으로 주로 사이드바 형태로 표현됩니다.

    • - aside태그는 본문 내용에 대한 추가적인 설명을 할때 사용하는 태그로 본문과 별도로 추가적인 언급을 위해서 사용합니다.
    
    

    header

    머릿말 태그. 소개, 또는 문서에 대한 탐색 요소의 그룹을 지정합니다.

    웹퍼블리싱 - (주)맑은커뮤니케이션

    위치는 홍대입구역에서 10분 거리입니다

    footer

    페이지 하단부의 저작권 정보나 서비스 제공자 정보 등을 제공하는 부분을 의미합니다.

    Copyright 2011 by bluewave. All Rights Reserved.

    menu

    페이지 내 기능을 하는 버튼/링크의 모음(대표적으로는 툴바)을 나타냅니다.

    • - type은 context, toolbar, list 3가지의 type이 있고 기본값은 list.
    
    	
  • nav

    외부 페이지로 연결되는 링크의 모음을 나타냅니다.

    
    
    반응형

    + Recent posts