三亚网站建设公司,碉堡了seo博客,网站建设程序员提成,服务好 售后好的网站建设问题#xff1a;
前端demo使用一个video标签包含一个非静态资源的mp4文件。在chrome浏览器下可以正常展示#xff0c;但是safari却不可以。
原因#xff1a;
1. mp4文件必须用ffmpeg合成的#xff0c;其他压缩的mp4文件是不可能展示的。请确定mp4文件并用正常的ffmpeg进…问题
前端demo使用一个video标签包含一个非静态资源的mp4文件。在chrome浏览器下可以正常展示但是safari却不可以。
原因
1. mp4文件必须用ffmpeg合成的其他压缩的mp4文件是不可能展示的。请确定mp4文件并用正常的ffmpeg进行合成
2. safari浏览器会抛出一个请求头Range: bytes0-1 而 chrome 浏览器是 Range: bytes0-
这意味着safari浏览器是要通过服务器先响应1字节内容然后才能持续访问。chrome浏览器兼容性比较好在window环境下可以直接将所有视频流全部获取。
这就导致了统一的接口直接将mp4文件流读给浏览器在safari浏览器使用时候会有问题。呈现的现象是 无控件无视频 or 有控件无视频。 总之就是无法播放。 解决方案
前端demo src如果是静态地址模式则保证MP4格式压缩是通过正常方式压缩的即可
video controlscontrols height500 width500source srcvideoPlay, typevideo/mp4
/video
a hrefvideoDownLoad下载视频/a
src 是接口
href 是下载的接口 后端demo
1. 首先要根据Range请求头获取Range的内容 如tornado框架下通过 self.request.headers[Range] 可以拿到内容 safari第一次请求时这里的内容为Range: bytes0-1 也就是要先请求一个字节的内容。
2. 我们需要将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)
3. 响应内容必须和请求头中 Range 请求的字节一致 如 Range: bytes0-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头的目的是弹出一个“文件下载”对话框让用户决定是“打开”还是“保存”所请求的内容。注意这是设计导致的
