关于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.mzph.cn/news/104727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nvm、node、npm解决问题过程记录

在Windows10如何降级Node.js版本&#xff1a;可以尝试将Node.js版本降级到一个较旧的版本&#xff0c;以查看问题是否得以解决。可以使用Node Version Manager (nvm) 来轻松切换Node.js版本&#xff0c;具体完整步骤&#xff1a; 首先&#xff0c;需要安装Node Version Manager…

C++项目:【负载均衡式在线OJ】

文章目录 一、项目介绍 二、技术栈与开发环境 1.所用技术: 2.开发环境&#xff1a; 三、项目演示 1.运行代码 2.进入项目首页 3.题目列表 4.点击具体一道题 5.编辑代码并提交 四、项目思维导图 五、项目宏观结构 六、Comm公共模块 1.日志工具log.hpp 2.其他工具…

SpringEL:SpEL表达式文本转译

目录 1.效果展示 2.实现方法 在项目开发中&#xff0c;后端研发定义的规则表达式&#xff0c;由于掺杂字段定义、操作符、具体数值等&#xff0c;对业务运营人员比较晦涩难懂&#xff0c;不易理解&#xff0c;解释成本也比较高&#xff0c;为了更好将规则表达式的含义触达业务…

多线程并发篇---第十篇

系列文章目录 文章目录 系列文章目录一、Java线程池中队列常用类型有哪些?二、线程安全需要保证几个基本特征?三、说一下线程之间是如何通信的?一、Java线程池中队列常用类型有哪些? ArrayBlockingQueue 是一个基于数组结构的有界阻塞队列,此队列按 FIFO(先进先出)原则…

如何在 Spring Boot 中进行分布式追踪

在 Spring Boot 中进行分布式追踪 分布式系统中的应用程序由多个微服务组成&#xff0c;它们可以位于不同的服务器、容器或云中。当出现问题时&#xff0c;如性能瓶颈、错误或延迟&#xff0c;了解问题的根本原因变得至关重要。分布式追踪是一种用于跟踪和分析分布式应用程序性…

linux安装filebeat并收集日志到elasticsearch

摘要&#xff1a; 通过filebeat收集服务器上各个应用的日志到elasticsearch&#xff0c;通过tags区分不同的应用创建不同的索引保存日志。 官网地址&#xff1a; https://www.elastic.co/cn/downloads/past-releases#filebeat 安装步骤&#xff1a; 1&#xff1a;下载并解…

linux8使用yum安装reids流程

准备安装环境 yum install -y gcc tcl gcc-c make 使用yum进行处理问题 yum install redis -y 安装完成之后会有/etc/redis.conf&#xff0c;我们需要进行一个备份操作 cp /etc/redis.conf /home/redis/ 启动redis服务测试 能否登录 systemctl start redis systemctl st…

如何利用IP地址定位保护网络安全?

通过IP地址定位可以在一定程度上增强网络安全&#xff0c;但它并不是唯一的安全措施。以下是如何利用IP地址定位来保护网络安全的一些方法&#xff1a; 异常检测和入侵检测&#xff1a;监控网络上的IP地址流量&#xff0c;定位异常活动&#xff0c;如大规模的连接尝试、不寻常的…

免费 AI 编程助手 Amazon CodeWhisperer 体验

文章作者&#xff1a;文章作者&#xff1a;米菲爸爸 2022 年 6 月 23 亚马逊云科技就已经推出了 Amazon CodeWhisperer&#xff08;预览版&#xff09;。经过不到一年的测试和 AIGC的飓风在 2023 年 4 月 18 日实时 AI 编程助手 Amazon CodeWhisperer正式可用 Amazon CodeWhis…

微信浏览器大字体模式 按钮文字居中用line-height 显示异常

按钮文字居中用line-height 的css 在微信浏览器大字体模式&#xff0c;会导致显示错误。改成flex 居中就好了

对称加密和非对称加密以及CA证书

对称加密 对称加密只用到了公匙,这个公匙是消息的发送方和消息的接收方共享的,也就是消息发送方使用这个公匙对消息加密,然后接收方使用公匙对消息解密,最典型的例子比如像 encrypt 加密,比如我们有个 springboot 应用,需要对 application.yml 文件里的密码做加密,我们…

【LeetCode高频SQL50题-基础版】打卡第8天:第41~45题

文章目录 【LeetCode高频SQL50题-基础版】打卡第8天&#xff1a;第41~45题⛅前言好友申请II&#x1f512;题目&#x1f511;题解 2016年的投资&#x1f512;题目&#x1f511;题解 部门工资前三高的所有员工&#x1f512;题目&#x1f511;题解 修复表中的名字&#x1f512;题目…

阿里云服务器不能访问网络之安装mysql 提示连接超时

wget -i -c http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm 过了一段时间后提示 fail .......time out 链接超时 有可能你的服务器不能访问网络 因为宽带套餐 我购买的时候没有购 重新购买就行了

登录中获取验证码的节流

一. 验证码框 <el-input placeholder"请输入验证码" prefix-icon"el-icon-lock" v-model"ruleForm.code"><el-button slot"suffix" :disabled"disabled" type"text" size"mini" click"ch…

今年的秋招面试,确实有点难。

不可否认的是&#xff0c;今年秋招确实有点难 从今年的形势来看&#xff0c;好的 offer 都掌握在少数人的手里&#xff0c;想要秋招找到理想的工作&#xff0c;要么学历好&#xff0c;要么技术功底很扎实&#xff0c;这两样都不占的话&#xff0c;就业压力就会比较大。 如何从…

python之PyQt按钮右键菜单功能的实现代码

示例一 我们可以创建一个简单的窗口&#xff0c;然后在窗口中添加一个自定义按钮。 当鼠标右键点击按钮时&#xff0c;弹出菜单&#xff0c;并在菜单中选中某个选项后弹出消息框。 完整代码如下所示&#xff1a; # 导入PyQt库 from PyQt5.QtWidgets import QApplication, QM…

latex伪代码书写进阶(2)

algorithm2e 是一个 LaTeX 宏包&#xff0c;用于在文档中编写算法和伪代码。以下是 algorithm2e 常见的语法和使用方式的示例&#xff1a; 引入 algorithm2e 宏包&#xff1a; \usepackage{algorithm2e}设置算法标题和标签&#xff1a; \begin{algorithm}[h]\caption{Algori…

nodejs+vue+elementui养老院老年人服务系统er809

“养老智慧服务平台”是运用nodejs语言和vue框架&#xff0c;以MySQL数据库为基础而发出来的。为保证我国经济的持续性发展&#xff0c;必须要让互联网信息时代在我国日益壮大&#xff0c;蓬勃发展。伴随着信息社会的飞速发展&#xff0c;养老智慧服务平台所面临的问题也一个接…

C语言水平测试题 过关斩将(3)辗转相除法,前n项求和,整数的正序分解,求最大公约数

我的个人主页&#xff1a;☆光之梦☆的博客_CSDN博客-C语言基础语法&#xff08;超详细&#xff09;领域博主 欢迎各位 &#x1f44d;点赞 ⭐收藏 &#x1f4dd;评论 我的专栏&#xff1a;C语言基础语法&#xff08;超详细&#xff09;_☆光之梦☆的博客-CSDN博客&#xff08;这…

前后端开发环境下载,java web前后端分离项目所有环境下载

前言介绍 配置环境过程枯燥 又麻烦&#xff0c;同时经常设计版本依赖对应关系&#xff0c;所以这里将所有工具集合发出来供大家一次性下载。工具包含如下&#xff1a; 工具介绍&#xff1a; 下面为安装包名&#xff1a; linux环境&#xff1a; jdk-8u45-linux-x64.rpm (jav…