我想使用視頻標記向我的用戶顯示HTML5視頻。對於Firefox，Chrome和Opera WEBM按預期工作。在Windows和Mac上的Safari中，我的MP4版本也適用。我遇到的唯一問題是，它不會在iPad和iPhone上播放（當然是Safari）。如何在iOS（iPhone和iPad）上使用HTML5視頻標籤播放mp4視頻文件？

創建視頻

的MP4（H.264 + ACC-LC）被轉換像這樣（配置文件：基線和3.0水平與iOS最大兼容性）：

流＃0： 0（eng）：Video：h264（avc1/0x31637661），yuv420p，640x352,198kb/s，17fps，17tbr，17408tbn，34tbc（默認）
流＃0： 1（eng）：Audio：aac（LC）（mp4a/0x6134706D），48000Hz，stereo，fltp，56kb /秒（默認值）

編輯：所有ffprobe輸出（在比特率等，以上述的微小變化所提到的）：

Metadata: 
major_brand  : isom 
minor_version : 512 
compatible_brands: isomiso2avc1mp41 
encoder   : Lavf56.30.100 
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s 
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default) 
Metadata: 
    handler_name : VideoHandler 
Stream #0:1(eng): Audio: aac (LC) (mp4a/0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default) 
Metadata: 
    handler_name : SoundHandler

我發現各種要求IOS設備等this this和，也someone提到要在轉換時添加yuv420p像素格式。

事實上ffmpeg的CMD看起來是這樣的：

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

顯示視頻

隨着Modernizr的我發覺其格式爲「支持」，並把它添加到src或video標籤。最後一件事是添加正確的MIME類型。對於mp4，我添加了type="video/mp4"。爲video標籤完整的代碼：

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>

我想盡各種辦法：自己的實現與自己的接口，控制和東西從瀏覽器廠商和的Video.js只是爲了檢查我是否太studip這一點。除iPhone和iPad之外，所有工作均在上述環境中進行。

我在Video on the web，特別是this part上閱讀了這篇文章，只用「right」類型的文件，沒有設置poster屬性。

我的Apache有

AddType video/mp4      mp4 m4v f4v f4p 
AddType video/ogg      ogv 
AddType video/webm      webm

和字節範圍啓用。這是從服務器獲取部分內容所需的。

有沒有人有線索發生了什麼？提前致謝！

編輯： Safari和Chrome都在iPad上拋出MEDIA_ERR_SRC_NOT_SUPPORTED錯誤。編碼必須存在問題。

來源

2015-04-17 Marc Saleiko

我找到了原因的iPad iPhone不會播放它。 我的文件夾通過htaccess限制訪問，以保護測試版應用程序。 Firefox等將用戶名和密碼轉發給所有請求，Mac上的Safari會再次詢問憑據，但iPad和iPhone上的瀏覽器不會。要快速檢查這個我刪除了文件夾保護，並且它工作正常。感謝您對我的問題所做的所有貢獻和想法！

來源

2015-04-22 10:12:02

嘗試切換「controls」屬性 - 或定義src的方式不同。

<video src="http://example.com/path/mymovie.mov" 
     controls 
     height=340 width=640 
     poster="http://example.com/path/poster.jpg"> 
    </video>

Check out this article 'About HTML5 Audio and Video for Safari' (developers guide)

此外，在HTML5 <video>標籤爲iPad/iPhone的一個很好的穩定的援助是JW player. （與它的工作原理）

jwplayer('video').setup({ 
    flashplayer: '/Scripts/jwplayer/player.swf', 
    file: 'seanpenn.mp4', 
    autostart: false, 
    controlbar: 'over', 
    image: 'spicoli.jpg', 
    width: 295, 
    height: 214, 
    skin: '/Scripts/jwplayer/glow.xml', 
    stretching: 'exactfit' 
});

來源

2015-04-17 14:58:47

謝謝你的建議。我設置了一個試用帳戶，並將播放器與我的mp4文件一起嵌入。這是錯誤消息：「加載媒體時出錯，文件無法加載。」我想整個事情更多的是關於媒體文件的轉換。有沒有機會錯誤配置ffmpeg的東西或使用錯誤的編解碼器庫？ –

我也嘗試mp4容器中的mpeg4編解碼器。可悲的是同樣的結果。 –

是的，那是一種可能性;嘗試壓縮視頻！ –

如何在iOS（iPhone和iPad）上使用HTML5視頻標籤播放mp4視頻文件？

創建視頻

顯示視頻

回答

相關問題