Media
HTML 多媒体就是指音效、音乐、视频和动画。
视频格式
格式 | 文件 | 描述 |
---|---|---|
AVI | .avi | AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。 |
WMV | .wmv | Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。 |
MPEG | .mg .mpeg | MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。 |
QuickTime | .mov | QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。 |
RealVideo | .rm .ram | RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。 |
Flash | .swf .flv | Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。 |
Mpeg-4 | .mp4 | Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。 |
最新的 HTML5 标准只支持 MP4, WebM, 和 Ogg 视频格式。
声音格式
格式 | 文件 | 描述 |
---|---|---|
MIDI | .mid .midi | MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。 |
RealAudio | .rm .ram | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。 |
Wave | .wav | Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。 |
WMA | .wma | WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。 |
MP3 | .mp3 .mpga | MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。 |
HTML5 的最新标准支持 MP3, WAV, 和 Ogg 音频格式。
插件
可以由浏览器启动的辅助应用程序就是插件。
object元素用于插入对象(such as:java小程序,PDF阅读器,Flash播放器(已经寄了)):
<object width="400" height="50" data="bookmark.swf"></object>
用于包含HTML文件:
<object width="100%" height="500px" data="snippet.html"></object>
用于插入图片:
<object data="audi.jpeg"></object>
embed元素用于表示一个HTML Embed对象
<embed width="400" height="50" src="bookmark.swf">
用于包含HTML文件:
<embed width="100%" height="500px" src="snippet.html">
用于插入图片:
<embed src="audi.jpeg">
Audio
用上面的embed和object元素
<embed height="100" width="100" src="..\..\Music\佐藤直纪 (さとう なおき) - 空の涯まで.mp3">
<object height="100" width="100" data="..\..\Music\佐藤直纪 (さとう なおき) - 空の涯まで.mp3"></object>
tips:一个用的src一个用的data哟~
用HTML5元素元素(在HTML4中是非法的^^)
<audio controls>
<source src="..\..\Music\佐藤直纪 (さとう なおき) - 空の涯まで.mp3">
Your browser does not support this audio format.
</audio>
如果失效了,可以报下面的错误文本信息。个人感觉这个比上面两个都要好。可以调整进度和音量。
下面是the best way:
使用两个不同的音频格式。html5的audio元素会尝试以MP3或者ogg来播放。如果失败了,代码将回退尝试embed元素。
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
存在两个小问题:
- -必须把音频转换成不同格式
- embed元素无法回退来显示错误信息了
使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接,浏览器会启动"辅助应用程序"来播放该文件:<a href="horse.mp3">Play the sound</a>
Video
embed(flash)
<embed src="intro.swf" height="200" width="200">
object(flash)
<object data="intro.swf" height="200" width="200"></object>
感觉Flash基本上不用了,H5的用法就这些了
<video width="320" height="240" controls>
<source src="..\..\Video\Apex Legends.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
最好的解决办法:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
当上面几个都不行,退回到embed用flash插件播放。
使用超链接
<a href="intro.swf">Play a video file</a>