HTML5 編碼

本主題說明如何將視訊編碼為使用 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設備，現代黑莓手機等。對於大多數這些，請確保使用H.264基準配置文件。對於iOS和Android，請使用640x480或更小尺寸，對於Blackberry支持，請使用480x360或更小的尺寸。

請注意，iPhone上播放的同一文件可以通過HTML5（某些瀏覽器）或Flash在網絡上播放。因此，如果要減少版本，請使用相同的版本。但是對於大多數移動設備來說，您都只能使用Baseline配置文件，而Main / High則有很大的不同，因此，如果您希望每個設備都具有最佳質量，則最好使用單獨的輸出版本。

2.對於較舊的移動設備使用3GP / MPEG4。大多數Blackberry和某些Android也支持3GP，而且3GP通常甚至也可以在iPhone / iPod上播放（因為iOS播放MP4 / MPEG-4，而3GP只是MP4的一部分）。

建議：最低為MP4、640x480或480x360。最多可提供三個MP4版本（480x360、640x480、720p +主配置文件）以及一個或兩個3GP版本（320x240，也許是176x144）。請參閱我們之前的文章特定的編碼設置。

多種比特率

您是否應該使用多個比特率來為具有快速Internet連接的用戶提供較大的視頻，而為具有較慢Internet連接的用戶提供較小的視頻？如果您的用戶正在網上觀看高質量的視頻，那麼答案可能是“是”。考慮使用2-3個大小和比特率來完成此操作-例如，一個視頻為640x360，另一視頻為1280x720。在以後的文章中將對此進行更多討論。

直播中

Zencoder支持HTTP實時流適用於iOS設備以及Microsoft平滑流（Silverlight）。

摘要

1.HTML5視頻的最小值為MP4 + WebM或Ogg（或兩者），將MP4版本用於Flash後備廣告。

2.對於移動支持，一個H.264 / MP4輸出會花費很長的路要走。2-3可實現更好的質量和更廣泛的兼容性。

建議

以下是一些建議的配置。Zencoder支持所有這些格式，如果您想知道如何使用Zencoder創建最佳輸出配置文件，請打開支持票。我們很樂意為您提供建議。

1。使它工作

  • HTML5，Flash，移動：「基準」設定檔，
  • 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，快閃記憶體：壓力四分之二，高檔
  • HTML5：WebM
  • HTML5：Ogg
  • 行動裝置：「基準」設定檔，

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"
    }
    ]
}

3。支持一切

  • HTML5，快閃記憶體：壓力四分之二，高檔
  • HTML5：WebM
  • HTML5：Ogg
  • 行動裝置：MP4 / H.264，基準配置文件，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"
    }
    ]
}