Open Dream4ever opened 2 years ago
最近（2022-04-22）在搭建一个前端项目通用的框架，基于 Vue-Cli 搭建，想着做好了各项配置的话，之后就只需要关注于开发方面买的需求了，能省很多心。没想到刚开始使用这个框架就让人不省心了。
在编写一个视频播放组件的时候，发现电脑上是可以正常播放视频的，但自己的 iPhone 11 + iOS 15.3.1 却无法播放。
具体现象如下：
第一次点击视频之后，会加载视频的第一帧（或者前几帧），但是视频并不会继续播放而是停在这里，控制栏的播放按钮则显示为“暂停”图标。再次点击按钮会变成“播放”图标，再点击“播放”图标的时候就会报下图中箭头处的错误。
在群里问了问，iOS 15.4.1 有人能播放有人不能，他俩的微信版本不一样。不能播放的那个，微信和自己一样是 8.0.20，能播放的是 8.0.18。还有一个 iOS 14.2 + 微信 8.0.18 的也是能播放视频的。
但是后来仔细想想，发现这应该是 Safari 的问题，因为在自己的 iOS 15.3.1 的 Safari 里面也有这个问题，所以可以先排除微信的原因。
后来又尝试把视频源换成别的视频，问题依旧存在，所以可以排除视频的原因。
之后又尝试在 Vue-Cli 中使用外部 CDN 上的 JS 文件，包括 Vue.js 以及播放视频用的 Hls.js，结果问题依然存在。
而使用相同版本 Vue.js + Hls.js 的手写网页就没有这个问题。
相关关键词及网页：
ios safari play video
现象描述 & 问题排查
最近（2022-04-22）在搭建一个前端项目通用的框架，基于 Vue-Cli 搭建，想着做好了各项配置的话，之后就只需要关注于开发方面买的需求了，能省很多心。没想到刚开始使用这个框架就让人不省心了。
在编写一个视频播放组件的时候，发现电脑上是可以正常播放视频的，但自己的 iPhone 11 + iOS 15.3.1 却无法播放。
具体现象如下：
第一次点击视频之后，会加载视频的第一帧（或者前几帧），但是视频并不会继续播放而是停在这里，控制栏的播放按钮则显示为“暂停”图标。再次点击按钮会变成“播放”图标，再点击“播放”图标的时候就会报下图中箭头处的错误。
在群里问了问，iOS 15.4.1 有人能播放有人不能，他俩的微信版本不一样。不能播放的那个，微信和自己一样是 8.0.20，能播放的是 8.0.18。还有一个 iOS 14.2 + 微信 8.0.18 的也是能播放视频的。
但是后来仔细想想，发现这应该是 Safari 的问题，因为在自己的 iOS 15.3.1 的 Safari 里面也有这个问题，所以可以先排除微信的原因。
后来又尝试把视频源换成别的视频，问题依旧存在，所以可以排除视频的原因。
之后又尝试在 Vue-Cli 中使用外部 CDN 上的 JS 文件，包括 Vue.js 以及播放视频用的 Hls.js，结果问题依然存在。
而使用相同版本 Vue.js + Hls.js 的手写网页就没有这个问题。
相关关键词及网页：
ios safari play video