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读取了。

前端调用：

我的前端代码是用react写的，所以controls等属性要设置为true，可以省略值的部分。
如果需要自动播放，不要全屏播放等请另行查阅资料。谢谢。
完

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：html中的video标签在ios微信中无法播放的解决方法之一-创新互联
分享网址：http://cdxtjz.cn/article/cegicd.html