web学习之路—H5（五）

            今天朋友去面试，题目变态至极，本渣渣百度了半天也没有找到答案。然后我就想到，要好好学习啊，要不然那天就该回家种地啦，哈哈。刚刚开始上班，是挺闲的，事实上我一直很闲。不过本来就不爱学习所以也很久才写一写博客学习一下，也说句实话，大多都不是自己写的，都是自己在学习别人的，觉得不错就拷贝些。不过不管是怎样的学习方式，我们都该多学习，多看书。加油，学习去！

           今天就继续html的学习，把最后一点学习掉，就可以开始H5的学习了。有一天打算敲一个demo，但是发现居然好多都记得不清楚，所以后续会敲两个demo的，建议大家一边学习一边练习，这样效果会特别好。

Html的多媒体

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

格式文件描述AVI.aviAVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。WMV.wmvWindows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。MPEG

• .mpg
• .mpeg

MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。QuickTime.movQuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。RealVideo

• .rm
• .ram

RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。Flash

• .swf
• .flv

Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。Mpeg-4.mp4Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

声音格式

格式文件描述MIDI

• .mid
• .midi

MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。

因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。

RealAudio

• .rm
• .ram

RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。Wave.wavWave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。WMA.wmaWMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。MP3

• .mp3
• .mpga

MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

使用哪种格式？

WAVE 是因特网上最受欢迎的无压缩声音格式，所有流行的浏览器都支持它。如果您需要未经压缩的声音（音乐或演讲），那么您应该使用 WAVE 格式。

MP3 是最新的压缩录制音乐格式。MP3 这个术语已经成为数字音乐的代名词。如果您的网址从事录制音乐，那么 MP3 是一个选项。

Html对象

<object> 的作用是支持 HTML 助手（插件）。

HTML 助手（插件）

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。

辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

使用辅助程序播放视频和音频的一个优势是，您能够允许用户来控制部分或全部播放设置。

大多数辅助应用程序允许对音量设置和播放功能（比如后退、暂停、停止和播放）的手工（或程序的）控制。

使用 QuickTime 来播放 Wave 音频

实例

<object width="420" height="360"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="bird.wav" /><param name="controller" value="true" /></object>

使用 QuickTime 来播放 MP4 视频

实例

<object width="420" height="360"classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param name="src" value="movie.mp4" /><param name="controller" value="true" /></object>

使用 Flash 来播放 SWF 视频

实例

<object width="400" height="40"classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0"><param name="SRC" value="bookmark.swf"><embed src="bookmark.swf" width="400" height="40"></embed></object>

1 嵌入pdf

(1) 利用object

[html] view plain copy

1. <object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="1000" height="1200" border="0">  
2.     <param name="_Version" value="65539">  
3.     <param name="_ExtentX" value="20108">  
4.     <param name="_ExtentY" value="10866">  
5.     <param name="_StockProps" value="0">  
6.     <param name="SRC" value="pdf/test.pdf">  
7.     <object data="pdf/test.pdf" type="application/pdf" width="1000" height="1200">   
8.     </object>  
9. </object>  

(2) 利用超链接

[html] view plain copy

1. <a href="javascript:" onclick="window.open('pdf/test.pdf')">内嵌pdf测试</a>  

2 嵌入word

[html] view plain copy

1. <object   classid=000209FF-0000-0000-C000-000000000046   height=200   width=100%>   
2.     <param   name=Src "   VALUE= "msword/新建 Microsoft Word 文档.doc">  
3.          <param   name=DisplayTitleBar   value=false>   
4.          <param   name=DataType   value=HTMLData>   
5.          <param   name=HTMLData   value= " ">   
6.          <param name="SRC" value="msword/新建 Microsoft Word 文档.doc">  
7.          <object data="msword/新建 Microsoft Word 文档.doc" type="application/msword" width="1000" height="1200">   
8.                 <a href="javascript:" onclick="window.open('msword/新建 Microsoft Word 文档.doc')">msword/新建 Microsoft Word 文档.doc</a>  
9.          </object>  
10. </object>  

 

*测试发现：ie浏览器支持较好，chrome不能显示。

 

3 嵌入音频

(1) 嵌入背景音乐

[html] view plain copy

1. <bgsound src="music/爱笑的眼睛.mp3" loop="-1">   

(2) 

[html] view plain copy

1. <embed src="music/爱笑的眼睛.mp3" autostart="true" loop="true"></embed>  

 

4 嵌入视频

chrome等浏览器支持html5，html5中video对象支持ogg、mp4(必须是H.264)格式的视频播放。为了兼容ie和chrome，采用了如下方法：

[html] view plain copy

1. <video height="250" width="350" controls>  
2.     <source src="video/movie.mp4" type="video/mp4"/>    
3.     <embed SRC="video/movie.avi" type=audio/x-pn-realaudio-plugin autostart=false loop=false width=350 height=250></embed>    
4. </video>  

 

5 嵌入flash

[html] view plain copy

1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="1000" height="200">  
2.     <param name="movie" value="flash/test.swf" />  
3.     <param name="quality" value="high" />  
4.     <param name="wmode" value="transparent" />  
5.     <embed src="flash/test.swf" width="1000" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" ></embed>  
6. </object>  

 

        html就学到这里了，六就来两个例子，我保证是自己的想法，大家敬请期待吧！