移动 safari 上的 videojs-contrib-hls 漏洞

Question

我有一个 videojs 播放器并使用 videojs-contrib-hls

元素：

<video class="video-js vjs-default-skin vjs-big-play-centered" controls playsinline)

javascript:

const player = videojs(element)
player.src({
  type: 'application/x-mpegURL',
  src: <hls-url>
})

player.on('error', (e) => {
  console.error(e)
})

player.on('loadeddata', () => {
  console.log('laodeddata')
})

在桌面版 safari 上运行顺利，一切都很好。在 Mobile Safari 中，我发现了以下问题：

全屏图标在播放器上，点击全屏图标会使屏幕变满，然后立即折叠回内联。我尝试删除 playsinline 属性，但当我这样做时，视频根本无法在移动 safari 上播放
大约五分之四（几乎总是）在点击播放按钮后视频正确开始播放，但它在第一帧冻结并卡住。没有错误回调被触发，它只是被卡住并且需要刷新。刷新几次后就可以正常播放和串流了。

Answer 1

这里的问题是库 fastclick：https://github.com/ftlabs/fastclick

当用户单击 "play" 按钮时，fastclick 妨碍了移动，并且 Mobile Safari 引擎认为 play() 不是由用户手势启动的，因此 Safari 自动暂停了视频。

全屏动作也有同样的效果。

移动 safari 上的 videojs-contrib-hls 漏洞

videojs-contrib-hls bugginess on mobile safari

javascript

safari

http-live-streaming

ios

video.js