HTML5添加影音素材代码详解

1.加入音乐有两种标识：

<video>可以显示图像
    <audio>只有声音
语法如下：

 <audio src="music.mp3" type="audio/pemg" controls ></audio>

·src="music.mp3"：设置音乐文件名及路径， <audio>标记支持MP3、WAV及OGG 3种音乐格式；
·autoplay:是否自动播放音乐。
语法为：

<audio src="music.ogg" autoplay></audio>

·controls:是否显示播放面板。
 ·loop:   是否循环播放。
 ·preload:是否预先加载,减少用户等待时间。属性值有auto、metadata及none3种。当设置autoplay属性
时，preload属性就会被忽略。
  * auto:网页打开时就加载影音。
  * metadata:只加载meta信息。
  * none:网页打开时不加载影音。
 ·width/height:设置播放面板的宽度和高度，单位为像素。
 ·type="audio/mpeg":指定播放类型，不需要让浏览器去检验文件格式，type必须指定适当的MIME类型。
语法为：

<audio controls="controls">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
 </audio>

2.添加影音动画

<video>其属性大致与<audio>相同。支持MP4、WEBM(VP8编码)、OGG（Theora编码）语法如下：

 <video src="multimedia/butterfly.mp4" controls="controls"></video>

3.Flash动画

Flash动画是矢量格式，文件小并不失真。在网页中播放的格式是.swf文件，在网页中加入Flash动画可利用<embed>标记，语法如下：

<embed src="moive.swf" width="100" height="100">

4.传统影音播放器

传统影音播放器主要为MP4.

5.使用iframe嵌入优酷视频

<iframe>标记属于框架语法，它能够将要链接的网页与组件直接内嵌在当前的网页中，其语法如下：

 <iframe name ="f1" src="new_page.htm" width="300" height="400">你的浏览器不支持iframe框架</iframe>

 其中的设置属性为：
 ·src="new_page.htm" ：显示在窗格中的文件路径及文件名；
 ·name ="f1"：框架窗格名称；
 ·width="300"/height="400"
 ·seamless:隐藏边框及滚动条，让网页看不出来嵌入了iframe框架；
如果想嵌入视频，则src改成视频网址即可。

 <iframe width="300" height="400" src="http://www.优酷.com/embed/uq" frameborder="0" allowfullscreen></frame>