Chrome 中的 mediaelement.js 视频不再流式传输

Question

在过去的几天里，我们注意到我们的视频停止使用 MediaElement.js Version 2.11.3 和 Chrome Version 50.0.2661.94 (64-bit)

进行流式传输

视频仍然可以在 Firefox 和 Safari 中正常播放。

我们在 Chrome 开发工具中收到的错误是：

Uncaught (in promise) DOMException: The element has no supported sources.

呈现页面上的标记如下所示：

<video height="150" poster="https://xxxxxxxxxx.cloudfront.net/123423_1_thumb.jpg" preload="auto" width="200" src="" hidden-source="https://xxxxxxx.cloudfront.net/123423_1_wm.webm">
  <object data="flashmediaelement.swf" height="150" type="application/x-shockwave-flash" width="200">
  <param name="movie" value="flashmediaelement.swf">
  <param name="flashvars" value="controls=true&amp;file=http://s38zby1czkz3d7.cloudfront.net/123423_1_wm.mp4">
  </object>
</video>

以下是错误的一些图片，以使其更加清晰：

以下是控制台中的错误消息：

Answer 1

那是因为从 Chrome 50 开始，play() 调用 <video> 或 <audio> 元素 returns Promise。如果播放成功，则 Promise 得到满足，如果播放失败，则 Promise 被拒绝，并显示一条解释失败的错误消息。

您可以在此处找到一些示例和更多信息：https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en

Answer 2

我可以用 Chromium 51 重现这个问题。但是，Chrome 53.

似乎不再出现此问题

不幸的是，我无法在 Internet 上找到易于阅读的确认信息，确认这是 Chromium/Chrome 的已确认错误并已修复，但只是表明有几个人报告了 Chrome/Chromium 的问题版本。例如这里其中 Google Chrome 开发人员 cwilso 指向这个内部 chromium 邮件列表，但其内容相当神秘，没有进一步研究。它似乎与一个名为 ENABLE_BROWSER_CDMS 的开关和 DRM 支持的 EME 实现有关，它没有按预期工作。 https://groups.google.com/a/chromium.org/forum/#!topic/chromium-reviews/Qi4dLcKjcCM

Answer 3

也可能是 CORS 问题。设置 media.crossOrigin = 'anonymous'; 并确保服务器响应具有 header Access-Control-Allow-Origin: *。或者不使用星号通配符，而是指定允许从服务器访问视频的网站域。

Chrome 中的 mediaelement.js 视频不再流式传输

Videos no longer streaming with mediaelement.js in Chrome

video

google-chrome

video-streaming

mediaelement.js