【前端】在苹果safari浏览器上video标签无法正常播放视频

2021年10月08日 23:38:52阅读数:432博客 / 曾高飞 /

为什么在苹果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得到的媒体流也是用相同方案设置头部来解决吗?


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    曾高飞
    博文
    96
    粉丝
    0
    评论
    0
    访问量
    11992
    积分:0
    P豆:242