Vue.js 3中Plyr播放Azure存储MP4视频频繁冻结问题求助

问题描述 #

在Vue.js 3应用中基于Plyr播放器搭建流媒体视频播放功能，通过Microsoft CDN访问Azure Blob存储中的MP4私有视频，视频访问权限由后端生成的**2小时有效期共享访问签名（SAS）**提供。

播放时长58分15秒的视频时，通常正常播放5-10分钟后会突然停止，Plyr显示缓冲状态，但浏览器无后续网络请求，控制台也无报错信息。该问题在多个视频文件中均存在，拖动视频进度条至任意时间点可立即恢复播放。

问题出现环境 #

• M1 Mac 上的 Chrome 125.0.6422.61：分别在播放7分33秒、6分钟后冻结
• Windows 上的 Edge：分别在播放4分钟、7分30秒后冻结
• Windows 上的另一设备 Chrome：同样出现该问题
• M1 Mac 上的 Safari：未出现此问题

已尝试的解决方案 #

• 前端替换播放器：将Plyr更换为Video.js
• 前端替换播放器：将Plyr更换为原生HTML5视频播放器
• 升级SAS协议版本：将SAS中的sv/X-Ms-Version字段从2017升级至2024-05-04

以上方案均未解决问题。

补充信息 #

• 视频响应头的Content-Type为video/mp4
• 拖动进度条和正常流播放时，均能成功返回包含Content-Range的206部分响应
• 偶尔静置浏览器约30分钟后，视频流会自动恢复播放

内容的提问来源于stack exchange，提问作者Robin