HTML 往日冒险 09
HTML 多媒体
Web 上的多媒体指的是音效、音乐、视频和动画
不同的浏览器以不同的方式处理音效、动画和视频
某些元素能够以内联的方式处理，而某些则需要额外的插件
多媒体元素（比如视频和音频）存储于媒体文件中
确定媒体类型的最常用的方法是查看文件扩展名
多媒体元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4
MP4 格式是一种视频格式
HTML5 、Flash 播放器以及优酷等视频网站均支持它
| 视频格式 | 文件 | 描述 |
|---|---|---|
| AVI | .avi | Audio Video Interleave格式是由微软开发，所有运行 Windows 的计算机都支持 AVI 格式 |
| WMV | .wmv | Windows Media格式是由微软开发，但是如果未安装额外的组件，就无法播放 Windows Media 电影 |
| MPEG | .mpg/.mpeg | Moving Pictures Expert Group格式是跨平台的，得到了所有最流行的浏览器的支持 |
| QuickTime | .mov | 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 的因特网共享格式 |
| 声音格式 | 文件 | 描述 |
|---|---|---|
| MIDI | .mid/.midi | Musical Instrument Digital Interface是一种针对电子音乐设备（比如合成器和声卡）的格式，MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧，同时得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI |
| RealAudio | .rm/.ram | RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低 |
| Wave | .wav | waveform格式由IBM和微软开发。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它 |
| WMA | .wma | Windows Media Audio，质量优于 MP3，兼容大多数播放器，除了 iPod，同时WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用 |
| MP3 | .mp3/.mpga | MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它 |
HTML 插件 plug-in
插件是扩展浏览器标准功能的计算机程序
大多数浏览器不再支持 Java Applet 和插件
所有浏览器均不再支持 ActiveX 控件
在现代浏览器中，对 Shockwave Flash 的支持也已关闭
音频 audio
需要谙熟大量技巧，以确保音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放
可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面
<embed> 标签和<object> 标签都可以定义外部（非 HTML）内容的容器
<embed heigth="60" width="150" src="/i/horse.mp3"></embed>
<object height="100" width="100" data="/i/horse.mp3"></object>
<audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
为了使这段音频在 Firefox 和 Opera 中同样有效，添加了一个 ogg 类型的文件
如果失败，会显示错误消息
使用超链接的方式
如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件
<p><a href="/i/song.mp3">Play MP3</a></p>
<p><a href="i/bird.wav">Play WAV</a></p>
视频 video
<body>
<video width="320" height="240" controls="controls"autoplay="autoplay">
<source src="/i/movie.ogg" type="video/ogg" />
<source src="/i/movie.mp4" type="video/mp4" />
<source src="/i/movie.webm" type="video/webm" />
<object data="/i/movie.mp4" width="320" height="240">
<embed width="320" height="240" src="/i/movie.swf" />
</object>
</body>
使用超链接
<a href="movie.swf">Play a video file</a>
iPad 和 iPhone 不能显示 Flash 视频
YouTube
这个部分需要您的浏览器能够访问YouTube
但是使用Bilibili也可以做到，使用时注意IP地址，二者不可同时访问
将视频转换为不同的格式可能既困难又耗时
一个更简单的解决方案是让 YouTube 在您的网页中播放视频
保存（或播放）视频时，YouTube 会显示一个 id（例如 ih1l6wb7LhU）
可以使用这个 id，并在 HTML 代码中引用您的视频
1. 视频上传到 YouTube
2. 记下视频 id
3. 网页中定义 <iframe> 元素
4. src 属性指向视频的 URL
5. 使用 width 和 height 属性来规定播放器的尺寸
6. 向 URL 添加其他参数
<iframe width="720" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU">
</iframe>
B站可以直接复制嵌入代码，但是最好自己设置宽高
<iframe src="//player.bilibili.com/player.html?aid=684057457&bvid=BV1nU4y1m7dh&cid=719387188&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
可以通过在 YouTube URL 上添加 autoplay=1 来让视频在用户访问页面时自动开始播放
在大多数情况下，Chromium 浏览器都不允许自动播放。但始终允许静音自动播放
在 autoplay=1 之后添加 mute=1，可让您的视频自动开始播放（但已静音）
<iframe width="420" height="345" src="https://www.youtube.com/embed/ih1l6wb7LhU?autoplay=1&mute=1">
</iframe>
添加 loop=1 会让视频永远循环
值 0（默认）：视频将播放一次
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?playlist=ih1l6wb7LhU&loop=1">
</iframe>
添加 controls=0 会使视频播放器不显示控件
<iframe width="420" height="315"
src="https://www.youtube.com/embed/ih1l6wb7LhU?controls=0">
</iframe>