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

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