HTML5 인코딩

이 항목에서는 Brightcove Player와 같은 HTML5 비디오 플레이어를 사용하여 재생할 비디오를 인코딩하는 방법에 대해 설명합니다.

서문

그만큼<video> HTML5의 태그는 훌륭한 기능입니다. Flash와 같은 플러그인에 의존하지 않고 모든 현재 브라우저에서 기본 비디오 재생을 가능하게합니다. Flash를 지원하지 않는 장치에서 웹 비디오의 문을 열고 이전에는 웹에서 재생할 수 없었던 코덱을 활성화합니다.

그러나 비디오 콘텐츠를 게시하는 경우 브라우저 지원이 혼란 스러울 수 있습니다. 웹 비디오를 실제로 지원하려면 몇 개의 출력 버전을 만들어야합니까? WebM, Ogg 및 MP4? iPhone 또는 Android는 어떻습니까? 저 / 중 / 고 비트 레이트 버전은 어떻습니까?

이 질문에 대한 답은 하나가 아니므로 여기에 HTML5 비디오의 출력을 선택하는 간단한 가이드가 있습니다.

뭐 편물 형식?

일부 브라우저에서 기본적으로 작동하는 세 가지 비디오 형식이 있습니다. 안타깝게도 모든 브라우저에서 작동하는 형식은 없으므로 의미있는 HTML5 비디오 지원을 원하면 적어도 두 가지 작업을 수행해야합니다.

최소한 다음을 사용해야합니다. MP4 + H.264 , AAC 또는 MP3. MP4 비디오는 Safari, Chrome 및 IE9 (Vista / Windows 7)에서 기본적으로 재생됩니다. 또한 Flash 비디오 폴백을위한 최상의 옵션이며 기본적으로 많은 장치 (iOS, Android, Blackberry, PSP, Xbox, PS3 등)에서 재생됩니다. 최상의 품질을 위해서는 H.264 High Profile을 사용하고, 모바일 장치에서 동일한 비디오를 재생하려면 Baseline 프로필을 사용하십시오.

그 외에도 다음 중 하나를 사용하십시오. WebM + VP8또는 Ogg + Theora다른 브라우저 용 Vorbis 오디오와 함께.

추천: 최소한 MP4 + WebM 또는 Ogg 또는 둘 다.

어떤 모바일 장치?

다시 말하지만 모든 모바일 장치에서 작동하는 단일 모바일 프로필은 없습니다. 실제로 모바일 비디오에 대한 표준은 웹보다 더 다양합니다. 하지만 다행스럽게도 잘 선택된 몇 가지 레시피는 대부분의 최신 모바일 장치를 다룰 수 있습니다.

자세한 내용은 다음 가이드를 확인하세요. 모바일 용 비디오 인코딩 .

1. 대부분의 최신 모바일 장치는 MP4 / H.264를 지원합니다. 여기에는 전체 iOS 시리즈 (iPhone, iPod, iPad, Apple TV 등), 대부분의 Android 기기, 최신 Blackberry 휴대 전화 등이 포함됩니다. 대부분의 경우 H.264 Baseline 프로필을 사용해야합니다. iOS 및 Android의 경우 640x480 이하를 사용하고 Blackberry 지원의 경우 480x360 이하를 사용합니다.

iPhone에서 재생되는 동일한 파일은 HTML5 (일부 브라우저) 또는 Flash를 통해 웹에서 재생할 수 있습니다. 따라서 버전을 줄이려면 동일한 버전을 사용하십시오. 그러나 대부분의 모바일 장치에 대해 Baseline 프로필을 사용하고 있으며 Main / High가 큰 차이를 만들므로 각 장치에 대해 최상의 품질을 원한다면 별도의 출력 버전을 사용하는 것이 좋습니다.

2. 구형 모바일 장치에는 3GP / MPEG4를 사용하십시오. 대부분의 Blackberrys와 일부 Android는 3GP도 지원하며 3GP는 일반적으로 iPhone / iPod에서도 재생됩니다 (iOS는 MP4 / MPEG-4를 재생하고 3GP는 MP4의 하위 집합에 불과하기 때문에).

추천: 최소, MP4, 640x480 또는 480x360. 최대 3 개의 MP4 버전 (480x360, 640x480, 720p + 메인 프로필)과 1 개 또는 2 개의 3GP 버전 (320x240 및 176x144). 이전 게시물을 참조하십시오. 특정 인코딩 설정 .

다중 비트 레이트

빠른 인터넷 연결을 사용하는 사용자에게 더 큰 비디오를 제공하고 느린 인터넷 연결을 사용하는 사용자에게 작은 비디오를 제공하려면 여러 비트 전송률을 사용해야합니까? 사용자가 웹에서 고품질 비디오를보고 있다면 대답은 "예"일 것입니다. 이를 위해 2-3 개의 크기와 비트 전송률을 사용하는 것이 좋습니다. 예를 들어 하나는 640x360이고 다른 하나는 1280x720입니다. 이에 대해서는 향후 게시물에서 자세히 설명합니다.

스트리밍

Zencoder 지원 HTTP 라이브 스트리밍 iOS 장치뿐만 아니라 Microsoft Smooth Streaming (Silverlight) .

요약

1. HTML5 동영상의 최소값은 MP4 + WebM 또는 Ogg (또는 둘 다) , 플래시 대체 용 MP4 버전을 사용합니다.

2. 모바일 지원의 경우 H.264 / MP4출력은 먼 길을 갈 수 있습니다. 2-3은 더 나은 품질과 더 넓은 호환성을 가능하게합니다.

권고 사항

다음은 몇 가지 권장 구성입니다. Zencoder이러한 모든 형식을 지원합니다. Zencoder를 사용하여 최적의 출력 프로필을 만드는 방법이 궁금하다면지원 티켓 . 우리는 항상 당신에게 조언을 드리겠습니다.

1. 작동시키기

HTML5, 플래시, 모바일 : MP4 / H.264, 기준 프로필, 480x360 또는 640x480
HTML5: WebM 또는 Ogg

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "size": "640x480"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm",
        "size": "640x480"
    }
    ]
}

HTML5, 플래시 : MP4 / H.264, 하이 프로파일
HTML5: WebM
HTML5: Ogg
모바일: MP4 / H.264, 기준 프로필, 480x360 또는 640x480

2. 반올림

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "h264_profile": "high"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm"
    },
    {
        "url": "s3://output-bucket/output-file-name.ogg"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile.mp4",
        "size": "640x480"
    }
    ]
}

삼. 모든 것을 지원

HTML5, 플래시 : MP4 / H.264, 하이 프로파일
HTML5: WebM
HTML5: Ogg
모바일: MP4 / H.264, Baseline profile, 480x360, 광범위한 호환성
모바일: MP4 / H.264, 기본 프로필, 1280x720, 최신 iOS 장치 용 (iPhone 4, iPad, Apple TV)
모바일: 3GP / MPEG4, 320x240 및 / 또는 177x144, 스마트 폰이 아닌 경우 *

{
    "input": "s3://bucket-name/file-name.avi",
    "outputs": [
    {
        "url": "s3://output-bucket/output-file-name.mp4",
        "h264_profile": "high"
    },
    {
        "url": "s3://output-bucket/output-file-name.webm"
    },
    {
        "url": "s3://output-bucket/output-file-name.ogg"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile-480x360.mp4",
        "size": "480x360"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile-1280x720.mp4",
        "size": "1280x720"
    },
    {
        "url": "s3://output-bucket/output-file-name-mobile.3gp",
        "size": "320x240"
    }
    ]
}