HTML 5視頻播放無法在iPhone上運行（Chrome和Safari）

Question

我正在嘗試在我正在構建的簡單網頁上實現視頻的基本HTML5播放。

真的，沒有花哨的東西。 甚至這個例子都沒有用。

<link href="//vjs.zencdn.net/5.4.6/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
<script src="//vjs.zencdn.net/ie8/1.1.1/videojs-ie8.min.js"></script>

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm" />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogg" />
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

我收到以下錯誤： The media could not be loaded, either because the server or network failed or because the format is not supported我錯過了有關IOS和HTML5視頻播放的內容嗎？

=======更新A）

經過一些更多的測試后。 我發現了以下內容：

1. 它根本不適用於iPhone（Chrome和Safari）
2. 它不適用於Macbook Safari，但適用於Firefox

=======更新B）

經過一些更多的測試，並進一步了解Apple的視頻編碼指南和要求，我發現了以下內容：

此視頻有效： <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4" />

這個沒有： <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>

由於它們都與我的本地服務器分離，因此我只能得出結論：它是以下兩種情況之一：

1. 標頭問題
2. 編碼問題

我無法獲取： http://video-js.zencoder.com/oceans-clip.mp4 ： http://video-js.zencoder.com/oceans-clip.mp4的編碼詳細信息，因為它們似乎禁止無頭請求（wget和ffmpeg -i都不允許連接）。

但是我使用以下ffmpeg配置對現有的mp4視頻進行了重新編碼： fmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.1 -preset medium -crf 23 -x264-params ref=4 -acodec copy -movflags +faststart ouput.mp4

沒運氣。 ffmpeg -i確實在output.mp4上顯示編碼器為h264 ，但視頻仍拒絕在iOS設備上播放。

=======更新C）

更改視頻編解碼器縮放視頻並將比特率調整為蘋果要求后： ffmpeg -i input.mp4 -vcodec libx264 -profile:v main -level 3.0 -preset medium -crf 23 -x264-params ref=4 -acodec copy -vf scale=640x480 -maxrate 900k -bufsize 900k -movflags +faststart output.mp4 ...並且在編寫范圍請求流腳本后添加Accept-Ranges （顯然需要apple see： this ）標題，它的工作非常出色，這里是curl輸出： curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null

curl --range 0-50 http://localhost:8000/video/5a2fd7b4e13823117a1b3ea4 -o /dev/null
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0 7871k    0    51    0     0     51      0 43:54:14 --:--:-- 43:54:14   237
curl: (18) transfer closed with 8060705 bytes remaining to read

......並且在絕望地試圖減輕疼痛（無濟於事）之后猛擊我的頭約400次，我大約99.5％肯定這是一些奇怪的蘋果認證/視頻格式化問題。

Answer 1

好吧，所以最大的問題是請求標題。 因此，Apple成功傳輸所需的標頭很少。

Apple將對提供的URI發出預請求，以查找以下信息（我將列出所需的標頭）

1. Content-Type - 不言而喻，它需要知道它將要解析視頻，這將是video/mp4或使用任何視頻格式。
2. Accept-Ranges - 這應該是從0到正在流式傳輸的視頻大小的范圍0-123456 ： 0-123456 bytes
3. Content-Length - 這是文件的總大小，以字節為單位，例如： 123456

然后在每個后續請求中，您要省略content-length標頭，並使用Content-Range標頭將其發送到請求的范圍。

某些外部視頻正在運行而另一些不在外的原因是因為它確實是一個標題問題。 一台服務器不發送Accept-Ranges標頭，不支持遠程請求，Safari / IOS瀏覽器只是放棄了。

此外，他們似乎對他們的視頻編碼標准更加松懈。 一些答案和建議會建議調整H.264編碼的比特率和分辨率，只要它是H.264視頻編碼和ACC音頻編碼（非常標准的東西， ffmpeg通常默認編碼為H.264和ACC）你應該沒事。 有關Apple支持的編碼器的更多信息，請點擊此處

最后的想法：這實際上是非常直接的，如果你正在打這個主題，我真的希望它可以幫助你或者至少指出你正確的方向。