月度归档： 2017年11月

Safari 下同页面创建的视频超过 16 个则无法播放

三三 / / Web 万象

最近在做一些视频相关的东西。在 Safari 下发现这样一个问题：<video> 标签创建多了，会导致同一个页面内后续的视频都无法播放。不管是 iOS 的 Safari，还是 macOS 下的，都存在同样的问题。尤其是 iOS 下，超过 16 个的视频几乎必定无法播放；效果就是显示一个播放按钮并且有一条斜线。

无法播放的视频截图

通过 video.error来检查最后的错误，得到的是 MEDIA_ERR_DECODE；同时，video.play() 方法会 reject 一个 AbortError。在 Google 检索了很久也没有得到有用的信息。

为了演示这个 bug，一个简单的示例的源码被我放在了 gist 上。你可以通过在 Safari 上打开 RawGit 提供的链接 来测试这个 bug。你只需要点击“测试”，并在视频开始播放后再次点击“测试”，如此循环 16 次，便能得到和我上一张图片一样的结果。

示例的代码如此简单，以至于我认为这个 bug 是几乎不可能发生的；它仅仅是调整了一个 DOM 的 innerHTML 来创建一个 video 元素（事实上无论通过何种方法创建，都会有这个问题；playsinline 属性似乎是必要的），然后再删除它，循环 16 次而已。

hello.innerHTML = '';
var src = 'https://cdn.rawgit.com/mediaelement/mediaelement-files/4d21a042/big_buck_bunny.mp4';
hello.innerHTML = '<video id="video" webkit-playsinline playsinline controls src="' + src + '">';
setTimeout(function () {
    document.getElementById('video').play();
}, 500);

目前，我没有发现任何能够解决这个 bug 的方法。可能唯一的办法就是，播放 15 个视频之后，刷新一下整个页面吧。