解決 h5 頁面安卓手機播放視頻正常，蘋果高版本系統無法加載視頻問題，主要出現的 iOS 18 以上系統。

NotSupportedError

iOS Safari 一般支持 MP4（H.264 + AAC）, 特別依賴視頻頭部 metadata。如果視頻是通過服務端動態拼接或未優化打包，很可能在 iOS 上出現 NotSupportedError。

問題1

NotSupportedError: The operation is not supported.

出現這問題是因為視頻編碼格式，用小米iPad拍攝一段 mp4 視頻，在 Safari 瀏覽器加載視頻，對視頻進行轉碼優化后可正常播放。

解決辦法：使用 ffmpeg 對有問題的視頻進行轉碼

AI 分析結果：

視頻編碼配置文件（Profile）

• 優化前：使用的是h264 (High)，即高配置文件。這種配置文件雖然提供了更好的壓縮效率和視頻質量，但對解碼器的要求較高，可能不被所有設備或瀏覽器完全支持。
• 優化后：使用的是h264 (Constrained Baseline)，即受限基線配置文件。這種配置文件是H.264標準中最基礎的配置文件，對解碼器的要求較低，兼容性更好，尤其是在移動設備和瀏覽器上。

結論：iOS Safari瀏覽器可能不支持高配置文件（High Profile）的 H.264 視頻編碼，導致優化前的視頻無法播放。

問題2

Unhandle Promise Rejection：NotSupportedError: The operation is not supported.

我這里是因為視頻地址默認返回的是文件下載流，導致在蘋果設備無法播放，因為蘋果 video 標簽播放時響應頭需要包含以下信息：

解決辦法：使用 nginx 代理視頻資源

location /access{
	
	# 設置文件的過期時間
	expires 10y;
	
	# 開啟文件傳輸模塊，支持分段請求
	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	
	# 確保返回文件的修改時間
	if_modified_since before; 
		 
	add_header Accept-Ranges bytes; # 啟用分段請求支持
	add_header Cache-Control public;  # 允許公共緩存
	add_header Last-Modified $date_gmt;  # 添加最后修改時間
	
	# 確保返回文件的ETag
	etag on;  
	
	alias   /xxx/xxx/;
	index  index.html index.htm;
  
}

視頻轉碼

ffmpeg -i 1544347924_1744204465890.mp4 \
  -c:v libx264 -profile:v baseline -level 3.0 \
  -c:a aac -movflags +faststart \
  fixed_ios_video.mp4

云測試平臺

testingbot

h5 頁面調試 JS 庫

eruda 一款可以在手機h5打開控制的工具，方便開發測試。