Connection: keep-alive
Transfer-Encoding: chunked

Range: bytes=500-999

HTTP/1.1 206 Partial Content
Content-Range: bytes 500-999/2000
Content-Length: 500
Content-Type: video/mp4

这是非常标准的响应，即服务端同意返回第5未经授权，禁止复制转载。未经授权，禁止复制转载。00-999个比特。在这个响应中Cont著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netent-Length是必须的，而且值为r【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ange比特数。206状态码表示这是一个【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。未完成的资源响应，客户端应该继续请求，直【作者：唐霜】本文版权归作者所有，未经授权不得转载。到拿到最终结果。

但是，如果按照上面的响应方式，我需要在服原创内容，盗版必究。【本文首发于唐霜的博客】务端做大改造，即我需要按比特截取视频，这著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net显然有点强人所难。因此，我探索是否可以有【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net其他方式，在改动比较小的情况下解决。

最后，我找到一种方案，在原来响应200状【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】态码的情况下，我返回：

Accept-Ranges: bytes
Content-Length: 552302

即我返回了整个视频的长度，并添加了Acc【原创内容，转载请注明出处】【原创不易，请尊重版权】ept-Ranges头来标识。

完成这个调整之后，我发现直接请求视频地址【原创不易，请尊重版权】【版权所有，侵权必究】，会报502，看nginx日志后发现是T【版权所有】唐霜 www.tangshuang.net【本文受版权保护】ransfer-Encoding: ch著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。unked与Content-Length【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】两个头互斥引起的。经过调整，在Range【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net Requests的场景下，不在使用Tr【作者：唐霜】【本文首发于唐霜的博客】ansfer-Encoding: chu【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.netnked进行响应。

最终通过这样的改造，safari可以正常响应播放视频了。本来以为解决了，但是没想到发现其实是有问转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。题的，当视频体积稍大的时候，报错依然存在【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。。safari实际上还是以range模式【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net拉取视频数据，因此，还是必须实现rang【版权所有，侵权必究】【原创内容，转载请注明出处】e请求改造。

标准的Range响应要使用206状态码。本文作者：唐霜，转载请注明出处。【作者：唐霜】因此，世纪改造还是比较复杂的，下面是大致本文作者：唐霜，转载请注明出处。原创内容，盗版必究。的代码：

const responseBuffer = (buff) => {
        const range = header('range');
        const byteLength = buff.byteLength;

        // 当不存在range请求头时，直接返回
        if (!range) {
            header('Content-Length', byteLength);
            return buff;
        }

        const [start, end] = range.replace('bytes=', '').split('-');

        // 当range头为 Range: bytes=0- 时，表示读取整个视频，因此也直接返回
        if (start === '0' && end === '') {
            header('Content-Length', byteLength);
            return buff;
        }

        const begin = start === '' ? 0 : +start;
        const to = end === '' ? byteLength : +end + 1;

        header('accept-ranges', 'bytes');

        // 处理一些不符合请求要求的情况
        if (Number.isNaN(begin) || Number.isNaN(to) || begin < 0 || to > byteLength || begin >= to) {
            status(416);
            header('Content-Range', `bytes */${byteLength}`);
            return;
        }

        const length = to - begin;
        header('Content-Length', length);
        header('Content-Range', `bytes ${start}-${end}/${byteLength}`);
        // 当返回Content-Range时，状态码必须为206
        status(206);

        const clip = buff.slice(begin, to);
        return clip;
    };

通过上面这段代码，当浏览器发起的请求为不转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net同情况时，返回不同的请求头和buff，这著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】样就可以让safari正常播放。

此外，还有一个点需要注意，safari视本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】频请求其实分了两个阶段：

第一阶段是与视频建立可读性连接，并根据c【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ontent-length，计算rang本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.nete bytes的大小，确认视频可读性之后本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】，这个连接被放弃，之后开始加载video著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】标签，上面的data:image/png【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】..就是video标签视频播放器的素材（【本文首发于唐霜的博客】【转载请注明来源】例如播放按钮、画中画图标等），在完成vi【本文首发于唐霜的博客】未经授权，禁止复制转载。deo标签组件的渲染之后，才会发起第二阶转载请注明出处：www.tangshuang.net【未经授权禁止转载】段的连接。

在第一次连接时，请求并不带Ranges头【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。，而是一个普通的http请求，在第二阶段【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】连接时才会带上Ranges头。第二阶段实【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。际上会发起多个range请求，上面截图中【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。只有一个请求，是因为视频体积比较小，而当【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。content-length较大时，sa【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。fari会自动拆分为多个range来发起【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】多个请求，因此，每一个range请求返回【原创内容，转载请注明出处】【未经授权禁止转载】的结果其实都应该不一样。这也是我第一次调【本文首发于唐霜的博客】【版权所有，侵权必究】整代码后，留下了尾巴，带来的问题。

这就意味着，我们后端代码中，必须通过Ra【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。nges头来判断请求处于哪一个阶段，并且【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。根据实际情况返回Content-Leng本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】th，否则就有可能在第一次连接时就由于代【关注微信公众号：wwwtangshuangnet】【本文受版权保护】码疏忽导致相应失败。

而比较坑爹的是，safari和chrom【本文受版权保护】【原创内容，转载请注明出处】e的video逻辑不同。上面这套逻辑适用原创内容，盗版必究。未经授权，禁止复制转载。于safari，但在chrome中，似乎【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。容忍的range体积大很多，我测试了几个原创内容，盗版必究。转载请注明出处：www.tangshuang.net视频，都是直接Range: bytes 0-，意思是请求整个视频，而此时如何返回20【版权所有，侵权必究】【本文首发于唐霜的博客】6的话，chrome又无法播放视频。真的【作者：唐霜】本文版权归作者所有，未经授权不得转载。是造孽了……不过好在，遇到这种情况的时候【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。，直接返回200，就可以正常播放，于是才【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。有了上面代码中的特殊逻辑。

以上就是解决整个问题的完整思路。