视频,音频和其他多媒体

视频,音频和其他多媒体

1,原生多媒体:速度快,对插件依赖度低。

2,视频文件的格式

h5支持以下三种视频文件格式(编解码器)

a,Ogg Theora文件,扩展名为:.ogg  或.ogv

b,MP4文件,扩展名为:.mp4 或 .m4v

c,WebM  扩展名:.webm

3,在网页中添加单个视频

<html>
   <body>
      <video scr="paddle.webm"></video>
   </body>
</html>

vedeo 的属性可以有:scr(源)  autoplay(自动播放)  controls(控件)  muted(静音)  loop(循环)  poster(海报)  width(宽)  height(高)  preload(预加载)

4,为视频添加控件和自动播放

<html>
   <body>
      <video scr="paddle.webm" controls></video>
   </body>
</html>
<html>
   <body>
      <video scr="paddle.webm"  autoplay></video>
   </body>
</html>

5,为视频指定循环播放和海报图像

<html>
   <body>
      <video scr="paddle.webm" autoplay loop></video>
   </body>
</html>
<html>
   <body>
      <video scr="paddle.webm"  poster="paddle.jpg" ></video>
   </body>
</html>

6,阻止视频预加载

<html>
   <body>
      <video scr="paddle.webm" preload=“none” controls></video>
   </body>
</html>

7,使用多种来源的视频和备用文件

<body>
<
video width="369" height="208" controls> <source scr="paddle.mp4" type="video/mp4"> <source scr="paddle.webm" type="video/webm">

</video>
</body>

8,提供可访问性

9,音频文件格式

.ogg  .mp3  .wav   .aac  .mp4  .opus

10,在网页中添加带控件的单个音频文件

<body> 
  <audio scr="pinao.ogg" controls></audio>
</body>

11,自动播放,循环和预加载音频

......
 <body> 
    <audio scr="pinao.ogg"  autoplay controls></audio>
 </body>
<html>
......
 <body> 
    <audio scr="pinao.ogg"  loop controls></audio>
 </body>
<html>
......
 <body> 
    <audio scr="pinao.ogg"  preload="metadate" controls></audio>
 </body>
<html>

12,提供带备用内容的多个视频源

1 <body>
2     <audio controls>
3         <source scr="pinao.ogg" type="audio/ogg">
4         <source scr="pinao.mp3" type="audio/mp3">
5     </audio>
6 </body>

 13,添加备用Flash的视频和音频

<body>
  <video width="369" height="208" controls>
      <source scr="paddle.mp4" type="video/mp4">
      <source scr="paddle.webm" type="video/webm">

 </video>
</body>

 

 

posted @ 2015-12-27 17:26  liaoali  阅读(356)  评论(0编辑  收藏  举报