html中的video標簽在ios微信中無法播放的解決方法之一

最近在做一個微信企業號的項目，其中有一個需求是在企業號的頁面中播放視頻，最開始是使用video標簽直接加載視頻地址，結果在android手機中能正常播放，但在ios手機中無法播放。

在ios中的癥狀是視頻一直是加載狀態，但就是加載不進來。

在此感謝同事幫我找到一篇文章，
地址是 https://www.zhihu.com/question/41818719，
我的視頻加載不進來的原因比較符合這一篇文章：
https://blog.csdn.net/zhengbin6072/article/details/78235004

下面是我的解決方法：

router.all('/video-play', async (ctx: Context, next: Function) => {
    let { url } = ctx.query; //接收視頻地址
    let list = url.split('uploads'); 
    let path = '/public/uploads' + list[1]; //組合出視頻在本地的地址
    if (!path.startsWith('/uploads') && !path.toLocaleLowerCase().endsWith('.mp4')) {
      await next();
      return;
    }
        // 對視頻請求長度的處理
    function getRange(range: string, stats: any) {
      let r = range.match(/=(\d+)-(\d+)?/);
      let start = r[1];
      let end = r[2] || stats.size - 1;
      return [parseInt(String(start)) || 0, parseInt(String(end))];
    }
    let stats = fs.statSync(process.cwd() + path); // fs獲取視頻文件的狀態
    let [start, end] = getRange(ctx.headers['range'], stats);
    ctx.set('Content-Range', `bytes ${start}-${end}/${stats.size}`);  //設置返回頭
    ctx.set('Content-Type', 'video/mp4');
    ctx.set('Content-Length', String(end === start ? 0 : end - start + 1));
    ctx.status = 206; // 設置返回狀態 這個貌似必須是206，如果是200，視頻又沒有請求完成，就不會再請求下一次了
    ctx.body = fs.createReadStream(process.cwd() + path, { start, end }); // 返回視頻流
  });

我的代碼使用的是alaska框架，alaska框架依賴于koa2，
這段代碼是在后臺開了一個接口，用于視頻的請求，參數接收一個url，url是視頻播放地址,因為視頻是直接傳到我的服務器上的，所以對于后臺來說，視頻是在本地，所以直接用fs讀取了。

前端調用：

                <video
                    src={`/video-play?url=${encodeURIComponent(postDetail.video)}`}
                    controls
                    autoPlay
                    width="100%"
                  ></video>

我的前端代碼是用react寫的，所以controls等屬性要設置為true，可以省略值的部分。
如果需要自動播放，不要全屏播放等請另行查閱資料。謝謝。
完