当前位置: 首页 > news >正文

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

问题:

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

原因:

1. mp4文件必须用ffmpeg合成的,其他压缩的mp4文件是不可能展示的。请确定mp4文件并用正常的ffmpeg进行合成

2. 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

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

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

        safari第一次请求时,这里的内容为:Range: bytes=0-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: 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头的目的是弹出一个“文件下载”对话框,让用户决定是“打开”还是“保存”所请求的内容。注意,这是设计导致的;

http://www.lryc.cn/news/192588.html

相关文章:

  • 【C++代码】最大二叉树,合并二叉树,二叉搜索树中的搜索,验证二叉搜索树--代码随想录
  • 母婴用品会员商城小程序的作用是什么
  • c++初阶--内存管理
  • Burstormer论文阅读笔记
  • Apifox 学习笔记 - 前置操作之:动态更新请求体中的时间戳
  • 2023年9月 青少年软件编程等级考试Scratch二级真题
  • 12.验证码以及付费代理
  • 使用Plotly可视化
  • 【C语言】结构体、位段、枚举、联合(共用体)
  • “Python+”集成技术高光谱遥感数据处理与机器学习深度应用
  • Excel 转为 PDF,PNG,HTML等文件
  • docker中使用GPU+rocksdb
  • 好用的跨平台同步笔记工具,手机和电脑可同步的笔记工具
  • 【Python 千题 —— 基础篇】浮点数转换为整数
  • 金融科技论文D部分
  • Apache Tomcat下载安装配置使用超详细
  • 基于Seata的分布式事务方案
  • 指令跳转:原来if...else就是goto
  • 【数据库系统概论】第四章数据库安全性
  • 如何正确的关闭Redis服务器
  • MySQL日志管理和权限管理(重点)
  • Maven 使用教程(二)
  • [Swift]同一个工程管理多个Target
  • DevExpress Reporting中文教程 - 如何在macOS等系统中生成导出报表文档
  • 1967作为子字符串出现在单词中的字符串数目
  • CocosCreator 面试题(二)JavaScript中的prototype的理解
  • python:从Excel或者CSV中读取因变量与多个自变量,用于训练机器学习回归模型,并输出预测结果
  • pycharm连接gitlab
  • 【C/C++数据结构 - 2】:稳定性与优化揭秘,揭开插入排序、希尔排序和快速排序的神秘面纱!
  • PCL点云处理之基于强度特征的SIFT关键点提取法 (二百一十五)