Chrome 中不再使用 mediaelement.js 流式传输视频答案

【问题标题】：Videos no longer streaming with mediaelement.js in ChromeChrome 中不再使用 mediaelement.js 流式传输视频
【发布时间】：2016-09-01 00:30:18
【问题描述】：

在过去的几天里，我们注意到我们的视频停止使用 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>

以下是一些错误图片，以便更清楚地说明：

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

【问题讨论】：

三星 Galaxy Tab 4 上的 Chrome 51.0.2704.81 出现同样的问题
不管怎样，我在处理混合 http/https 音频源时遇到了这个错误。我的页面是 https，但我的资源是 http 提供的。在 https 下同时提供资源和页面修复了此错误。我看到您的代码中有一个 http 服务的 mp4 文件，所以这可能是问题所在？
这是一个 CORS 问题。在这里查看我的答案：*.com/a/43434754/625745

标签： google-chrome video video-streaming mediaelement.js

【解决方案1】：

我可以用 Chromium 51 复制这个问题。但是，Chrome 53 似乎不再出现此问题。

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

【讨论】：

Deepak，这清楚地回答了这个问题。在 Chromium 50/51 中，媒体元素已损坏。从 Chromium 52 开始，问题得到解决，上面的代码可以正常工作。
谢谢你。迪帕克：我试图用我对手头问题的了解来扩展我的答案。由于我无法找到由 Chromium 团队提供的官方的、易于理解的错误确认，并且有一些轶事数据可以直观地支持媒体元素在版本 50/51 中被破坏的概念，所以我在这里首先表达我的回复时有点防御.而且，是的，我确实更喜欢发表评论而不是发表回复，但我无法做到这一点并不是我的错。
我在 Chrome 55 中仍然收到此错误。如果浏览器无法识别该文件，这似乎是一个标准错误。

【解决方案2】：

这是因为从 Chrome 50 开始，对 <video> 或 <audio> 元素的 play() 调用会返回一个 Promise。如果播放成功，则 Promise 被履行，如果播放失败，则 Promise 被拒绝，并带有解释失败的错误消息。

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

【讨论】：

有趣的信息。可悲的是，我认为它与错误无关。下面的答案提供了有关问题根源的确切信息，这是 Chromium 50 中的错误，而不是 API 更改。

【解决方案3】：

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

【讨论】：