为什么在苹果safari浏览器上video标签无法正常播放视频?

<video autoplay loop><source src="https://segmentfault.com/static/xxx/video/xxx.mp4" type="video/mp4"><source src="https://segmentfault.com/static/xxx/video/xxx.webm" type="video/webm"></video>

视频是.mp4格式,h264编码的。
safari浏览器到底支持什么格式的视频啊,
(1.只放第一个source标签,也无法正常播放)
(2.听说safari阻止自动播放,去掉autoplay也不行)
(3.控制台没有报任何错误)

————————————————————————————————————————

时间距离我提出这个问题已经过去了好几个月……
终于解决了问题:
在tomcat的web.xml配置文件中,增加以下配置:

<servlet-mapping><servlet-name>default</servlet-name><url-pattern>*.mp4</url-pattern></servlet-mapping>

至于为什么要这么做,详情请查看:Safari浏览器无法播放视频资源(Java后台SSM架构)的解决方法

————————————————————————————————————————

第三次更新…
按我的理解,video标签是一个视频功能,是html5标准。浏览器在实现它的时候,可能会产生一些差异。video标签的路径就是浏览器辅助发起视频请求的地址,不同的是,safari会首先去请求1字节的数据来确认这个视频是否可以播放,而其他浏览器不会。为什么这1字节的请求会导致safari无法播放视频呢?因为这一字节的请求是携带range请求头的,它表示请求从某某字节到某某字节(x-x 如 0-1)的数据,如果服务器能够正常响应的话,返回的状态码应该是206 Partial Content,否则的话会返回整个视频流资源及状态码200 OK,这就导致safari没能够拿到想要的数据,于是判定该视频无法播放。range请求头和206状态码,无疑是为断点续传预备的,说白了,如果你的后台视频服务支持断点续传(在视频服务中,快进,快退,拖动进度条,也是请求x-x字节的数据,应也是断点续传),卖QQ号码地图视频就可以在safari上播放,否则就不行。当然,最最基础的,首先是浏览器支持video标签,并且支持对应的视频格式。

回答

谢邀!
第一:确认下safari的版本。video兼容版本:https://caniuse.com/#search=v…如果不支持用html5media.js进行转化,或者把video改成object标签。
第二:如果想要在iOS上播放视频,那么必须在http协议中应用rang请求头。range是播放器要求的区间也就是客户端发送请求的时候http会带有这个标记,这个区间的值在http.headers.range中获取,一般是bytes=0-1。如果没有让服务端伙伴帮忙处理。
第三:Safari出于用户体验考滤是禁止自动播放的。
最后:查查是不是手机设置禁止播放视频了。

看看vedio的请求头和响应头
请求头里面有没有Range字段
响应头里面有没有Content-Range字段

<video src="https://segmentfault.com/static/rogrand/video/banner_video.mp4" controls></video>

这样试一下

这样,dom加载完之后,动态加上src;

document.querySelector('vedio').src="https://segmentfault.com/q/1010000012524886/xxxx";

@眼星你这个解决了吗 我的也是video无法在Safari浏览器播放 我的只是PC端

我也是同样的问题。就mac和ios上safari浏览器无法播放

https://www.npmjs.com/package…
https://wix.github.io/playabl…

我的是在ios13 ipad QQ视频播放不了

请问getUserMedia得到的媒体流也是用相同方案设置头部来解决吗?


更多相关文章

  1. 自学WEB前端
  2. 研招网崩了?网络崩溃的原因有哪些?怎么维护网站?
  3. http请求不带referer的解决方法
  4. http协议基础教程
  5. file_get_contents("php://input")的使用场景
  6. 使用curl请求聚合数据的驾考宝典题库接口数据, composer 常用的
  7. 初识http协议
  8. 安装ApiPost-接口工具 发送HTTP请求
  9. 事件委托的应用

随机推荐

  1. 迈向 serverless 开发的第一步[每日前端
  2. android中导入低版本project
  3. package.json 详解[每日前端夜话0xEF]
  4. 聊聊 Redis 使用场景
  5. 04 管道、重定向和环境变量
  6. Selenium3自动化测试【12】元素定位认知
  7. Java面试题全集(6)
  8. 23 个初级 Vue.js 面试题[每日前端夜话0x
  9. 深入理解Java中的迭代器
  10. 再谈多态