关于safari浏览器浏览html video标签无法正常播放的问题

问题：

前端demo使用一个video标签包含一个非静态资源的mp4文件。在chrome浏览器下可以正常展示，但是safari却不可以。

原因：

mp4文件必须用ffmpeg合成的，其他压缩的mp4文件是不可能展示的。请确定mp4文件并用正常的ffmpeg进行合成
safari浏览器会抛出一个请求头Range: bytes=0-1 而 chrome 浏览器是 Range: bytes=0-

这意味着safari浏览器是要通过服务器先响应1字节内容，然后才能持续访问。chrome浏览器兼容性比较好（在window环境下）可以直接将所有视频流全部获取。

这就导致了统一的接口直接将mp4文件流读给浏览器在safari浏览器使用时候会有问题。呈现的现象是：

无控件，无视频 or 有控件，无视频。总之就是无法播放。

解决方案：

前端：demo（src如果是静态地址模式则保证MP4格式压缩是通过正常方式压缩的即可）

复制代码

<video controls="controls" height="500" width="500">
   <source src="videoPlay",  type="video/mp4">
</video>
<a href="videoDownLoad">下载视频</a>

src = '是接口'

href = "是下载的接口"

后端：demo

首先要根据Range请求头获取Range的内容

如tornado框架下通过 self.request.headers['Range'] 可以拿到内容

safari第一次请求时，这里的内容为：Range: bytes=0-1

也就是要先请求一个字节的内容。

我们需要将mp4文件的字节读取完毕后先添加响应头并设置响应状态

'Content - Type' : 'video/mp4' (必须是safari支持的类型，具体支持什么可以百度)

'Content - Range' : 'bytes Range中请求头中请求的最小值**-** Range请求头中请求的最大值 / 文件总字节数'

状态为 206

复制代码

self.set_header('Content-Type', 'video/mp4')
self.set_header('Content-Range', 'bytes 0-{}/{}'.format(byte_request_max, lenth))
self.set_status(206)

响应内容必须和请求头中 Range 请求的字节一致：如 Range: bytes=0-1 那么响应内容也要是字节的 0-1内容

tornado中代码如下，其他语言参考一下

复制代码

self.write(content[byte_request_min:byte_request_max + 1:])

下载 : demo

由于是通过a标签进行下载，那么接口只需要添加两个响应头即可

注意：第二个是设置下载文件的名称的

复制代码

self.set_header('Content-Type', 'application/octet-stream')
self.set_header('Content-Disposition', ('attachment; filename=%s' % 'tt.mp4').encode('utf-8'))

Content-Disposition是MIME协议的扩展，用于指示MIME用户代理如何显示附加的文件。当特定的HTTP客户端，如Internet Explorer，接收到包含Content-Disposition头的响应时，它通常会激活一个文件下载对话框，并且文件名框会自动填充头中指定的文件名。

这个头信息主要是用于告诉浏览器应该如何处理响应中的内容，特别是当内容类型为application/octet-stream时。在这种情况下，使用Content-Disposition头的目的是弹出一个"文件下载"对话框，让用户决定是"打开"还是"保存"所请求的内容。注意，这是设计导致的；