微信小程序：一則iOS下用video播放mp4文件問題排查

總共花了2個多小時，值得記錄一下：

邊學習邊琢磨。

• 現象：

iOS下，用video組件播放mp4出現黑屏。mp4文件是用iOS拍攝上傳的視頻。

Andriod下，同樣的代碼，播放mp4則正常。

video組件代碼如下：

<video  show-play-btn="{{true}}" controls show-casting-button="{{true}}" vslide-gesture-in-fullscreen="{{false}}" style="background-color: #eeeeee;width: 320px;height:240px;" src="{{'https://example?id=x'}}"  ></video>

文件src為一個URL請求，服務端為私有服務器處理請求。

• 排查

1、本身mp4文件是由iphone拍攝並且上傳，下載本地后播放沒有問題，說明本身mp4文件沒問題。

2、查看微信小程序幫助文檔，video組件中有binderror callback，加入該callback看看具體出錯原因。

<video  省略...  binderror="videoErrorCallback"></video>

videoErrorCallback(e) {
    console.log('Video error info:')
    console.log(e.detail)
 },

用微信小程序”真機調試“，發現console上輸出 errMsg為："MEDIA_ERR_NETWORK"

3、嘗試修改src，直接下載mp4文件，如https://expamle/webapp/test.mp4，問題消失。

src的url為后台自己實現的servlet，而直接下載文件為tomcat（本例中用的tomcat服務器）默認webapp實現。

 

4、關鍵點是iOS下行為異常，安卓沒問題，又加上是”MEDIA_ERR_NETWORK“錯誤。

懷疑http請求在iOS和andriod下不同。

用tcpdump在服務端抓包（centOS），下載下來用wireshark看一下http的請求和相應包。不知道iOS真機上有沒有這樣的抓包app，這樣不用到服務器上折騰了。

比對2者行為發現：iOS下的http請求果然與andriod不同。繼續google，發現的確如此。

沒搞過視頻不知道，還有這區別。

 

5、查驗后台代碼，發現服務端並沒有根據該http請求進行不同處理。后台問題！

網上參考一個例子，驗證了一下好使。

至此，原因查明，方案基本確定。

當然離代碼提交真正解決還有一段距離。