html背景音乐火狐兼容,Firefox 中的 HTML5 音视频

您可以在网页上播放某些类型的音频和视频文件,而且无需使用 插件。本文介绍了可以播放哪些格式以及如何控制、保存和打开它们。

支持的格式

因为许多音频和视频文件类型的使用受到专利限制,所以需要第三方应用程序来播放。不过,Firefox 自来就能够播放开放式媒体和某些专利媒体。

开放式媒体

Firefox 能播放 WAV 容器格式(.wav, .wave 文件),该格式包含 PCM 8或16比特每采样的无压缩音频。

Vorbis 音频、Opus 音频、Theora 视频 和 VP8 video 都是自由 音频/视频压缩 格式,没有专利限制。如果它们是嵌入在 容器格式:Ogg(.ogg, .oga, .ogv, .ogx, .spx, .opus 文件)或 WebM(.webm 文件)中,它们就可以在 Firefox 播放。

Firefox 也支持 FLAC (Free Lossless Audio Codec) 回放 (.flac 文件类型)和 MP3 回放(.mp3 文件类型)。

专利媒体

AAC 和 H.264/MPEG-4 AVC 都是专利 音频/视频压缩 格式。如果它们是嵌入在 MP4 容器格式(.mp4, .m4a, .m4p, .m4b, .m4r, .m4v 文件)中,它们就可以使用操作系统自带的库在 Firefox 中播放(你或 Mozilla 都无须付费)。

在不支持 MP4/H.264 的系统上,Firefox 支持 WebM/VP9 视频。

音频和视频控制

控制栏

当您访问包含被支持媒体的网站,将您的鼠标指针指向媒体时,您将看到管理播放的控制台。

f6af4fa060993746e76532daaeb6637d.gif

播放按钮:

f6af4fa060993746e76532daaeb6637d.gif 开始播放。

暂停按钮:

f6af4fa060993746e76532daaeb6637d.gif 在开始播放后停止播放。

进度指示器:

f6af4fa060993746e76532daaeb6637d.gif 标示从文件开头到现在已经过去了多少时间。可以拖曳进度条来前进和后退。

音量控制:点击可以静音或取消静音。拖动滑块向上或向下调整音量。

f6af4fa060993746e76532daaeb6637d.gif

全屏按钮:

f6af4fa060993746e76532daaeb6637d.gif 从默认大小切换到全屏。

默认屏幕按钮:

f6af4fa060993746e76532daaeb6637d.gif 从全屏恢复到默认大小。

内容菜单控制

内容菜单(通过 右击Ctrl-单击弹出)包含以上除滑块之外的控制,也可以使你:

加速或减速播放:选择 播放速度,然后选一个速度。

反复播放视频:选择 循环,视频就会自动反复播放。

隐藏控制:选择 隐藏控制,下边的控制栏就不会出现。选择 显示控制 可以重新显示控制栏。

键盘控制

当您在网页上点击一个音频或视频文件后,您就可以使用您的键盘控制播放了。

命令快捷键

播放 / 暂停空格

降低音量↓

提高音量↑

静音Ctrl + ↓command + ↓

取消静音Ctrl + ↑command + ↑

快退 15秒←

快退 10%Ctrl + ←command + ←

快进 15秒→

快进 10%Ctrl + →command + →

回到开头Home

转到结尾End

保存媒体文件

要从网页上保存音频文件到您的计算机:

在音频控制台上 右击按住Control键点击

,然后选择 音频另存为...。

选择您要保存文件到您的计算机上的位置。

要从网页上保存视频文件到您的计算机:

在视频控制台上 右击按住Control键点击

,然后选择 视频另存为...。

如果只是保存视频快照,请选择 快照另存为...。

选择您要保存文件到您的计算机上的位置。

打开已存文件

在您的普通媒体播放器中打开您从网页上保存的媒体文件可能会无法播放。要打开这些类型的文件:

打开 Firefox。

按 Ctrl + Ocommand + O。

导航到您想播放的文件所在的文件夹,选中文件,然后点击 打开。

疑难解答

如果您有音频或视频文件的问题,参见:

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 5 特性 官方详细的文档是寻找 HTML5 特性的最好地方,当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章涉及到以下的特性: • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布(Canvas) • 可编辑内容 • 拖放 • 稳健的数据存储 检测浏览器支持 在你开始尝试 HTML5之前,需要知道各主流浏览器的支持状况。这些有用的资源,将可以帮助你向着正轨走: • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比 你还可以运行 Javascript(用Javascript 检测浏览器特性)来检测 HTML5 特性的支持。你还应该用用Modernizr: 一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。 你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。 值得注意的变更点 除了新的特征,你还应该记下这些重要的变更点: • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型:<!DOCTYPE html>。它有意不使用版本,因此文档将会适用所有版本的HTML。 • 简单易记的语言标签 你并不需要在 <html> 使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型 你现在可以在 meta 标签使用 "charset":<meta charset="utf-8″ /> • 不需要闭合标签 在 HTML5 ,空标签(如:br、img 和 input )并不需要闭合标签。 • 废弃的标签 下面这些标签并不被 HTML5 支持: <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。 语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的 <div> 标签的替代品,并不提供额外的功能。这些都是新增的标签:<article>、<section>、<aside>、<hgroup>、<header>,<footer>、<nav>、<time>、<mark>、<figure> 和 <figcaption>。 这些标签被除了IE 外的所有现代浏览器(Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+)支持。Javascript 提供了document.createElement(tagName) 的方法,让你可以用来创建新的 HTML5 标签。代替自己创建这些元素,你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。 你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset: • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] <![endif]--> </head> <body> <header> <hgroup> <h1>Page Header</h1> <h2>Page Sub Heading</h2> </hgroup> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <article> <header> <h1>Article Heading</h1> <time datetime="2010-05-05" pubdate>May 5th, 2010</time> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <section> <header> <h1>Section Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod</p> </footer> </section> <section> <header> <h1>Section Heading</h1> </header> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <figure> <img src="item-1.png" alt="Club"> <img src="item-2.png" alt="Heart"> <img src="item-3.png" alt="Spade"> <img src="item-4.png" alt="Diamond"> <figcaption>FigCaption: Club, Heart, Spade and Diamond</figcaption> </figure> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio</p> <footer> <p>Section Footer: Pellentesque volutpat, leo nec auctor euismod est.</p> </footer> </section> <footer> Article Footer </footer> </article> <aside> <header> <h1>Siderbar Heading</h1> </header> <p>Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p> </aside> <footer> Page Footer </footer> </body> </html> 注意:没有一个 div 标签,id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值