Recently, we are working on a wechat enterprise project. One of the requirements is to play video on the enterprise page. At the beginning, we used the video tag to load the video address directly. As a result, it can play normally in android phones, but not in ios phones.

In ios, the symptom is that the video is always loaded, but it can't be loaded.

Thank you for helping me find an article,
The address is https://www.zhihu.com/question/41818719，
The reason why my video can't be loaded is quite in line with this article:
https://blog.csdn.net/zhengbin6072/article/details/78235004

Here is my solution:

router.all('/video-play', async (ctx: Context, next: Function) => {
    let { url } = ctx.query; //Receive video address
    let list = url.split('uploads'); 
    let path = '/public/uploads' + list[1]; //Combine the local address of the video
    if (!path.startsWith('/uploads') && !path.toLocaleLowerCase().endsWith('.mp4')) {
      await next();
      return;
    }
        // Processing of video request length
    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 get the status of the video file
    let [start, end] = getRange(ctx.headers['range'], stats);
    ctx.set('Content-Range', `bytes ${start}-${end}/${stats.size}`);  //Set return header
    ctx.set('Content-Type', 'video/mp4');
    ctx.set('Content-Length', String(end === start ? 0 : end - start + 1));
    ctx.status = 206; // It seems that the setting of return status must be 206. If it is 200 and the video has not been requested to complete, the next request will not be made
    ctx.body = fs.createReadStream(process.cwd() + path, { start, end }); // Back to video stream
  });

My code uses the alaska framework, which relies on koa2,
This code opens an interface in the background for video request. The parameter receives a url. The url is the video playing address. Because the video is directly sent to my server, the video is local to the background, so it is read directly with fs.

Front end call:

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

My front-end code is written with react, so to set the properties such as controls to true, you can omit the value part.
If you need to play automatically, do not play in full screen. Please refer to the information separately. Thank you.
finish