video element - by. UXKM

요약 설명

원본 비디오를 압축해서 동영상 파일로 변환한 것을 인코딩(encording)이라 하고,
영상을 꺼내 플레이어에서 보여주는 것을 디코딩(decoding)이라고 하며,
이 두 가지를 처리하는 것이 비디오 코덱입니다.

video element 설명

<video>는 비디오 재생을 문서에 지원하는 미디어 플레이어를 내장합니다.
오디오 컨텐츠에도 <video>를 사용할 수 있지만 <audio> 요소는 보다 적절한 사용자 경험을 제공할 수 있습니다.
autoplay가 지정된 경우, preload는 무시됩니다.
webm to mp4 converter

CSS 기본값 :

6.5.1. video 속성

[src] <video src="URL">

삽입(embed)할 동영상의 주소(url)입니다.
이 속성은 선택 사항으로, 비디오 블록 내의 <source> 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.

[width], [height] <video width="Number" height="Number">

비디오의 출력 영역 너비와 높이이며, CSS 픽셀 단위입니다.

[autoplay](Boolean) <video autoplay>

이 값이 설정되면, 데이터 로딩이 완료되지 않더라도 재생 가능한 시점에 자동으로 재생이 시작됩니다.
iPhone 또는 Android에서는 지원되지 않으며, 모든 데스크톱 브라우저, iPad, Firefox와 Android용 Opera에서는 지원됩니다.

[controls](Boolean) <video controls>

기본 동영상 컨트롤을 표시합니다(재생, 일시 중지 등).

[loop](Boolean) <video loop>

이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아가서 다시 재생됩니다.

[muted](Boolean) <video muted>

비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다.
설정하면 오디오가 나오지 않습니다.
기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.

[poster] <video poster="URL">

동영상 콘텐츠를 다운로드할 필요가 없이 동영상 요소가 표시되자마자 브라우저에 나타낼 수 있는 이미지 파일의 주소(URL)입니다.
이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될 때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.

[preload] <video preload="none | metadata | auto">

사전 로드할 정보나 콘텐츠의 크기를 브라우저에 알려줍니다.
스펙에서는 기본값으로 metadata를 권장하지만 설정하지 않았다면 각 브라우저가 정한 기본값을 설정하게 됩니다.

비디오를 자동으로 재생하려 한다면 브라우저가 이를 다운로드 해야 하기 때문에 autoplay 속성보다 우선시 됩니다.
autoplay 속성과 preload 속성을 둘 다 설정하는 것은 스펙상 가능합니다만,
브라우저가 이 속성을 반드시 스팩대로 따라야 하는 것은 아닙니다. 단지 힌트일 뿐입니다.

  1. none

    사용자가 동영상을 보지 못 할 수도 있습니다. 아무것도 사전 로드하지 않습니다.

  2. metadata

    최소한의 동영상과 함께 메타 데이터(기간, 크기, 텍스트 트랙)를 사전 로드합니다.

  3. auto

    전체 동영상을 즉시 다운로드하는 것이 바람직한 것으로 여겨집니다.

  4. 빈 문자열

    auto 와 동일합니다.

video element 예제

6.5.2. 웹에서 사용하는 비디오 파일 형식

  1. MPEG4(.mp4/.m4v)

    영상과 음성을 디지털 데이터로 전송하고 저장하는 규격 중 하나. part1에서 part27까지 다양한 표준으로 구성되어있고 새로운 기술이 적용되면 새로운 파트가 생깁니다.
    최근 많이 사용되는 .mp4와 m4v는 MPEG-4의 part14로 규정된 파일 형식이며, 최근에는 H.264 코덱이 MPEG-4의 part10 AVC로 규격화 되었습니다.

  2. MP4 H.264 (AAC 또는 MP3)

    H.264 비디오 코덱과 AAC 오디오 코덱이 포함된 MP4 컨테이너 형식은 데스크톱 / 모바일 Internet Explorer, Safari 및 Chrome에서 기본적으로 지원되지만 Chromium과 Opera는 이 형식을 지원하지 않습니다.
    IE와 Chrome은 MP4 컨테이너에서 MP3 오디오 코덱을 지원하지만 Safari는 지원하지 않습니다. Android / Firefox 용 Firefox / Firefox OS는 경우에 따라 형식을 지원하지만 타사 디코더를 사용할 수있는 경우에만 장치 하드웨어가 MP4를 인코딩하는 데 사용되는 프로필을 처리 할 수 ​​있습니다.

    높은 프로필로 인코딩 된 MP4는 로우 엔드 폰과 같은 저가형 하드웨어에서 실행되지 않습니다.

    MPEG 미디어 형식은 자유롭게 라이센스가 부여되지 않은 특허에 의해 보호됩니다.
    필요한 라이센스 중 일부는 MPEG LA에서 구입할 수 있습니다.
    H.264는 현재 로열티가 없는 형식이 아니기 때문에 Mozilla [ 1 , 2 ], Google [ 1 , 2 ] 및 Opera에 따르면 개방형 웹 플랫폼에는 적합하지 않습니다.
    그러나 로열티가없는 형식은 Internet Explorer와 Safari에서 지원되지 않기 때문에 Mozilla는 형식을 지원하기로 결정 했으며 Google은 Chrome에서 지원하지 않을 것이라고 약속했습니다.

  3. MP3

    운영 체제가 MP3 디코더를 제공 할 때 MP3 오디오 형식 (.mp3, audio/mpeg , MP4 컨테이너의 위의 MP3 오디오와 구분됨)은 Firefox / Firefox for Android / Firefox OS에서 <audio>로 지원됩니다.

  4. ogg

    공개 소스 형식으로 Vorbis, FLAC 같은 오디오 코덱과 Ogg Theora 같은 비디오 코덱이 있습니다.
    공개 소스이기 때문에 각종 무료 및 상용 미디어 플레이어에 Ogg의 여러 코덱을 사용할 수 있습니다.

  5. WebM

    구글이 2010년 발표한 공개 소스 방식의 파일 형식입니다.
    WebM 형식은 Matroska 컨테이너 형식의 제한된 버전을 기반으로 합니다. 항상 VP8 또는 VP9 비디오 코덱과 Vorbis 또는 Opus 오디오 코덱을 사용합니다.
    WebM 포맷, 특히 VP8 비디오 코덱은 MPEG LA의 특허 풀 형성 요청에 응한 기업 그룹의 특허 침해 혐의로 기소되었지만 MPEG LA는 특허 출원을 구글 에 "영원히, 양도할 수 있는, 로열티 없는 면허". 이것은 사실상 WebM 형식의 모든 알려진 특허가 모든 사람에게 무료로 라이센스 된다는 것을 의미합니다.

    Gecko는 다음 MIME 유형을 WebM 파일로 인식합니다.

    video/webm - 비디오가 포함 된 WebM 미디어 파일 (가능하면 오디오도 가능).
    audio/webm - 오디오 만 포함 된 WebM 미디어 파일.

  6. avi

    윈도우 운영체제에서 지원하는 동영상 파일 형식으로 화질은 뛰어나지만 용량이 크기 때문에 스트리밍 방식의 실시간 웹 영상에는 적합하지 않습니다.

6.5.3. 비디오 코덱의 종류

  1. H.264(MPEG-4)

    H.264는 MPEG 컨소시엄에서 특허권을 가지고 있기 때문에 사용료를 지불하여야 합니다.
    하지만 HTML5 웹 표준 동영상 재생 용도로 사용할 경우에 한하여 무료로 사용할 수 있습니다.

  2. VP8(WebM)

    구글이 인수한 코덱 전문업체에서 보유한 기술로 2010년 5월에 오픈 소스로 공개한 코덱입니다.

  3. MP4 FLAC

    Firefox 51부터는 MediaSource Extensions 및 DRM 지원 여부와 관계없이 FLAC 코덱을 사용하여 MP4 파일을 재생할 수 있습니다.

  4. 오그 테오 라 보비스(Ogg)

    공개 코덱으로 테오라 코덱은 Ogv(Theora+Vorbis) 파일에 주로 사용됩니다.
    Theora 동영상 코덱과 Vorbis 오디오 코덱이 포함 된 Ogg 컨테이너 형식은 데스크톱 / 모바일 Gecko (Firefox), Chrome 및 Opera에서 지원되며 형식에 대한 지원은 추가 기능을 설치하여 Safari(iOS 제외)에 추가 할 수 있습니다.
    Internet Explorer에서 지원되지 않습니다.

    WebM은 일반적으로 Ogg Theora Vorbis보다 선호됩니다. 품질 대비 압축률이 높고 더 많은 브라우저에서 지원되기 때문입니다. 그러나 Ogg 형식은 이전 브라우저 버전을 지원하는 데 사용할 수 있습니다.
    (예 : Firefox 3.5 / 3.6은 WebM을 지원하지 않지만 Ogg는 지원합니다).

    Theora의 특허 상황은 WebM의 특허 상황과 유사합니다.

    Theora Cookbook을 읽으면 Ogg 미디어를 만드는 방법에 대해 자세히 알아볼 수 있습니다.

    Gecko는 다음 MIME 유형을 Ogg 파일로 인식합니다.

    audio/ogg - 오디오만 포함 된 ogg 파일.

    video/ogg - 비디오(및 가능하게는 오디오)를 포함한 ogg 파일.

    application/ogg - 불특정 콘텐츠를 가진 ogg 파일. 다른 두 MIME 유형 중 하나를 사용하는 것이 좋지만 파일의 내용을 모르는 경우 이 방법을 사용할 수 있습니다.

  5. 오그 오푸스

    Ogg 컨테이너에는 Opus 코덱을 사용하여 인코딩한 오디오도 포함될 수 있습니다.
    이 기능은 Gecko 15.0 (Firefox 15.0 / Thunderbird 15.0 / SeaMonkey 2.12) 이상에서 데스크탑 및 모바일 브라우저에서 사용할 수 있습니다.

    Firefox는 다음 MIME 유형을 인식합니다.

    audio/ogg; codecs=opus

  6. 오그 FLAC

    Ogg 컨테이너에는 FLAC 코덱을 사용하여 인코딩한 오디오도 포함될 수 있습니다.
    이 기능은 Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48)에서 사용할 수 있으며, 나중에 데스크탑 및 모바일 Gecko 58.0(Firefox 58.0 / Thunderbird 58.0 / SeaMonkey 2.55)에서 사용할 수 있습니다.

  7. 웨이브 PCM

    PCM 오디오 코덱(WAVE 코덱 "1")이 있는 WAVE 컨테이너 형식은 데스크탑 / 모바일 Gecko (Firefox) 및 Safari에서 지원됩니다.
    WAVE 컨테이너 형식의 파일은 대개 ".wav" 확장자로 끝납니다.

    Gecko는 다음 MIME 유형을 WAVE 오디오 파일로 인식합니다.

    audio/wave (기본 설정, Chrome에서는 작동하지 않음)

    audio/wav

    audio/x-wav

    audio/x-pn-wav

  8. FLAC

    FLAC 오디오 코덱 (FLAC 코덱)이 있는 FLAC 컨테이너 형식은
    데스크탑 Gecko Firefox 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) 및 모바일 Gecko 58.0 (Firefox 58.0 / Thunderbird 58.0 / SeaMonkey 2.55)에서 지원됩니다.
    FLAC 컨테이너 형식의 파일은 대개 ".flac" 확장자로 끝납니다.

    Gecko는 다음 MIME 유형을 FLAC 오디오 파일로 인식합니다.

    audio/flac(선호)

    audio/x-flac

6.5.4. 브라우저별 파일형식, 지원코덱

  1. 파이어폭스 : ogg 테오라
  2. 오페라 : ogg 테오라
  3. 사파리 : mp4 H.264
  4. 크롬 : ogg, mp4 테오라, H.264
  5. 아이폰, 안드로이드 : mp4 H.264
  6. 익스플로러 9+ : mp4 H.264C
  7. 익스플로러 8 : 지원안함