音频元素不会在 Firefox 的 iframe 中显示/播放答案

【问题标题】：Audio element won't display/play inside iframe in Firefox音频元素不会在 Firefox 的 iframe 中显示/播放
【发布时间】：2012-01-23 14:30:27
【问题描述】：

我有这个 HTML5 的 sn-p，它允许用户单击并播放一些音频：

<audio controls>
    <source src="cell.ogg">
    <source src="cell.mp3">
    <source src="cell.m4a">
</audio>

这在 OS X Lion 上的 FF 8 中运行良好。音频播放器控件出现，我可以点击播放，它播放的是ogg版本。

但是，如果我将包含文件放在另一个 HTML5 文档的 iframe 中（都来自本地文件系统；没有跨域问题），那么它就不起作用。 HTML 的其余部分显示正常，但 Firefox 表现得好像它不支持任何媒体格式。

这是我用来将页面添加到 iframe 的函数：

function postContentToIframe(content)
{
    var iframe = $("#displayContents")[0].contentWindow.document;
    iframe.open(); iframe.close(); // must open and close document object to start using it!
    $("body", iframe).append(content).hide().fadeIn("slow");
    return;
}

这是 FF 的渲染方式。

为什么？我该如何解决？ TIA。

【问题讨论】：

新信息：在 Apache 上托管文件（因为 Chrome 存在与本地文件的跨域问题）。用 Chrome 16 测试。同样的问题！音频在呈现为它自己的页面时播放，但在 iframe 中时不播放。很奇怪。
我想知道这是否是与安全相关的问题。您是否在控制台中收到任何错误报告？
我正在做一些日志记录，它显示在控制台中，但在 FF 或 Chrome 中没有错误。
新信息：如果我删除 JS 函数并在 iframe () 中手动添加源，音频可以正常工作。所以，问题一定出在 JS 函数是如何添加内容的。想法？

标签： javascript html firefox audio iframe

【解决方案1】：

谜团解开了。这是一个目录/相对 URL 问题。基本 HTML 文件（带有 iframe 元素）与附加的 HTML 文件（iframe 内容）和音频文件位于不同的目录中。因此它找不到音频文件。

解决方案：要么将所有文件放在一个目录中，要么（更好）使用绝对 URL 而不是相对 URL。

【讨论】：