让你的 Firefox OS 应用通过视频和音频变得生动

Firefox OS 应用不仅仅是文本:没有什么比添加一些视频或音频更能使你的应用变得生动了。让我们探索开发人员可以使用哪些不同的方法来增强我们的移动杰作。

音频和视频 HTML 标签

既然我们谈论的是 HTML,使用 <audio><video> 标签在你的 Firefox OS 应用中播放这些媒体是很有道理的。如果你想在你的应用中添加视频,只需使用以下代码。


在此代码示例中,用户将看到一个带控制按钮的视频播放器,并且有机会开始播放视频。如果你的应用运行在不支持 video 标签的浏览器中,用户将看到标签之间的文本。即使你的主要目标是 Firefox OS 应用,这样做也是一个好习惯,因为它使用 HTML5,如果它是一个托管应用,有人可能会从另一个浏览器访问它。请注意,你可以使用其他 属性 来设置此元素。

至于音频标签,它基本上是一样的。


在此示例中,音频将自动开始,并以循环播放音频文件,从相对路径播放:如果你正在构建游戏,它非常适合作为背景音乐。请注意,你也可以向此元素添加其他 属性

当然,在没有 JavaScript 的情况下使用这些元素只能提供基本功能,但不用担心,你可以使用代码以编程方式控制它们。一旦你有了 HTML 元素,就像你刚刚看到的 audio 示例一样,你可以使用 JavaScript 来播放、暂停、更改音量等等。

document.querySelector("#demo").play(); //Play the Audio
document.querySelector("#demo").pause(); //Pause the Audio
document.querySelector("#demo").volume+=0.1; //Increase Volume
document.querySelector("#demo").volume-=0.1; //Decrease Volume

你可以在 Mozilla 开发者网络文档 中了解更多关于这两个元素的功能。你还想仔细查看 支持的格式列表

在屏幕锁定期间使用音频

也许你正在构建一个播客应用,或者至少你需要能够在屏幕锁定期间播放音频?有一种方法可以使用 audio 标签来实现。你只需将 mozaudiochannel 属性添加到你的实际标签,并将它的值设置为 content 即可。


实际上,这并不完全正确,因为这段代码无法直接使用。你还需要在清单文件中添加权限。

"permissions": {
  "audio-channel-content":{
    "description":"Use the audio channel for the music player"
  }
}

有了上面的清单行,你的应用将被授权使用音频通道播放音乐,即使屏幕是锁定的。话虽如此,你可能已经意识到这段代码**目前是特定于 Firefox OS 的**。我故意将上一句话的末尾加粗,因为这是你理解 Firefox OS 的关键点之一:我们必须创建一些 API、功能或元素来赋予 HTML 所应有的开发人员权限,但我们正在与 W3C 合作制定这些标准。如果这些标准与我们创建的标准不同,我们会更改它以反映这一点。

Firefox OS Web 活动

最后,对 Firefox OS 开发人员来说非常方便的一件事是 Web 活动。它们定义了一种方法,允许应用将活动委托给另一个(通常是用户选择的)应用。在撰写本文时,它们尚未标准化。在我们感兴趣的情况下,我们将使用 Web 活动调用 open 来打开音乐或视频文件。请注意,对于视频,你也可以使用 view 活动,它基本上做的是同样的事情。假设我想在有人点击具有 open-video ID 的按钮时打开一个远程视频:我会在我的 JavaScript 中使用以下代码来实现它。

var openVideo = document.querySelector("#open-video");
if (openVideo) {
    openVideo.onclick = function () {
        var openingVideo = new MozActivity({
            name: "open",
            data: {
                type: [
                  "video/webm",
                  "video/mp4",
                  "video/3gpp",
                  "video/youtube"
                ],
                url: "http://v2v.cc/~j/theora_testsuite/320x240.ogg"
            }
        });
    }
}

在这种情况下,Firefox OS 的视频播放器将打开,并播放视频:就是这么简单!

最后……

你可能需要也可能不需要在你的应用中使用这些技巧,但添加视频或音频可以提高应用的质量,并使它变得生动。最终,你必须为你的用户提供良好的体验,这才是区分好应用和优秀应用的关键!

关于 Frédéric Harper

作为 Mozilla 的高级技术布道师,Fred 热衷于开放 Web,并帮助开发者在 Firefox OS 上取得成功。Fred 是一位经验丰富的演讲者、T 恤爱好者、长期博主、热情的拥抱者和 HTML5 爱好者,他住在蒙特利尔,并讲“法式英语”。他始终意识到独角兽和地精的重要性,你可以在 outofcomfortzone.net 上阅读有关这些主题以及其他想法的文章。

更多 Frédéric Harper 的文章……

关于 Robert Nyman [名誉编辑]

Mozilla Hacks 的技术布道师和编辑。关于 HTML5、JavaScript 和开放 Web 进行演讲和博客写作。Robert 是 HTML5 和开放 Web 的坚定支持者,自 1999 年以来一直在从事 Web 前端开发工作 - 在瑞典和纽约市。他经常在 http://robertnyman.com 上写博客,并热爱旅行和结识新朋友。

更多 Robert Nyman [名誉编辑] 的文章……


5 条评论

  1. David R

    为什么你的所有示例都使用 querySelector 而不是 getElementById?

    对于此示例来说,这显然无关紧要,但两者之间存在显著的性能差异

    http://jsperf.com/queryselector-vs-getelementbyid-pure

    2013 年 11 月 11 日 下午 4:40

    1. Frédéric Harper

      你说得对;在这些情况下,使用 getElementById 会更快,因为它们是简单的选择器。正如你所说,这不会影响此代码的执行,但可能会影响更复杂的应用。我想这可能是我习惯使用 querySelector 的原因。

      2013 年 11 月 12 日 上午 7:05

  2. Web 应用开发者 

    我喜欢这个想法,在屏幕锁定期间播放音频。我是一名 Web 应用开发者,我真的很想实现这个应用,并打造自己的体验。你能分享一下我如何开始这个应用的整个流程吗?

    2013 年 11 月 12 日 下午 10:13

    1. Frédéric Harper

      一个好的起点是 https://mdn.org.cn/en-US/Apps 上的文档。它将帮助你了解平台,并指导你开始构建 Firefox OS 应用。

      2013 年 11 月 13 日 上午 8:05

  3. Luke

    不错!你有 FirefoxOS 支持的音频/视频格式列表吗?

    我做过一些 Firefox 开发,我也想知道你是否可以在 Firefox 应用中使用 XUL、跨站点 AJAX 以及插件使用的其他功能?

    2013 年 11 月 13 日 下午 2:59

本文评论已关闭。