我們打算在網站上使用全屏html5視頻。我讀過MPEG-4/H.264可能是目前最好的格式。轉換html5視頻 - 使用什麼軟件
我有可用的1080p mp4視頻文件...它的尺寸爲41.2mb。由於視頻應該以「相對」良好的質量播放並且播放速度非常快,因此我如何優化視頻文件。
任何提示,技巧對我來說?桌面全屏視頻需要1080p還是720p足夠? 桌面全屏視頻的輸出大小應該是多少?
問候, 亞光
我們打算在網站上使用全屏html5視頻。我讀過MPEG-4/H.264可能是目前最好的格式。轉換html5視頻 - 使用什麼軟件
我有可用的1080p mp4視頻文件...它的尺寸爲41.2mb。由於視頻應該以「相對」良好的質量播放並且播放速度非常快,因此我如何優化視頻文件。
任何提示,技巧對我來說?桌面全屏視頻需要1080p還是720p足夠? 桌面全屏視頻的輸出大小應該是多少?
問候, 亞光
很多將取決於目標受衆和它們的連接。如果他們有良好的聯繫和一個大顯示器,他們可能會欣賞1080p,但720p可能會好起來。
在降低質量和緩衝IMO風險方面犯錯(儘管這將取決於用例顯然)。我通常的做法是與某些目標用戶合作,並且A:B測試一些不同的質量設置(調整幀大小和比特率,每次清除緩存),以查看最佳點的位置...
確保MOOV原子處於開始狀態,因此無需在開始播放之前等待整個事件加載。
您可以創建內容的一些樣本版本相當快使用ffmpeg
轉碼使用不同的設置
ffmpeg -y -i {source-file} -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart {target-file}
-s
定義了目標輸出尺寸-b
定義目標位速率movflags faststart
將運行第二遍以確保moov原子在您想要的位置另外,根據您的移動目標,你可能是一個支離破碎的MPEG格式,允許自適應比特率(如HLS)更好使瀏覽器可以決定哪些比特率/框架尺寸它能爲請求
最佳的顯示效果我最近花了很多時間用HTML5視頻,剛剛碰到這個線程 - Miro是一個不錯的,簡單(免費)的選項,可以輸出的主要格式,即MP4,WebM & ogg theora。
720p就足夠了,特別是如果您可以在頂部添加半透明膠片來隱藏任何工件。你真的不希望它變得緩慢和生澀。
格式明智,您可以在<video>
標記中使用盡可能多的標記(無論您需要哪種瀏覽器支持)。例如。
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
</video>
您甚至可以添加閃回回退。視頻標籤中除<source>
屬性以外的任何內容都會被支持html5視頻的瀏覽器忽略。因此:
<video poster="path/to/screenshot.jpg">
<source src="path/to/video.webm" type="video/webm">
<source src="path/to/video.ogg" type="video/ogg">
<source src="path/to/video.mp4" type="video/mp4">
<!-- Flash fallback -->
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
我用HTML5視頻公平一點工作,並內置了免費的(下20MB的文件)轉換器,接受任何視頻文件和輸出支持WebM,OGG和MP4文件與<video>
標記沿:http://html5backgroundvideos.com/converter/
您定位的是哪個平臺? – DRC 2014-11-25 14:16:45
所有plattforms,但我想即使做一個移動版本的視頻和加載不同的視頻文件,如果在移動通過媒體查詢 – matt 2014-11-25 14:20:30
決議只是沒有定義太多。總體比特率(帶寬)是最重要的因素。在給定的帶寬預算下,我們可以調整和調整許多因素,例如分辨率,幀速率,圖片質量等。另請參閱http://video.stackexchange.com/。 – 9dan 2014-11-26 03:33:43