码迷,mamicode.com
首页 > Web开发 > 详细

9.HTML音频和视频

时间:2018-02-28 18:30:53      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:video   mil   使用   文件   指定   控制   文件包含   表示   除了   

                                             第九章 音频和视频

一、音频和视频的概念

       首先,要先了解两个概念:容器(container)和编解码器(codec

   1、视频容器:视频文件包含音频轨道,视频轨道,其他的元数据。

            视频在播放时音频轨道和视频轨道绑在一起

        主流视频格式为:.avi/.flv/.mp4/.mkv/.ogg/.webm

   2、编解码器:是一组算法,

        主流的音频解码器:AAC/MPEG-3/Ogg/Voribs

        视频解码器:H.264/VP8/Ogg/Theora

   3、浏览器支持情况

        容器格式             视频解码器     音频编解码   IE9+    Firefox5+   Chrome13+    

       WebM(主流)              VP8          Vorbis      ×        √          √

         OGG()               Theora         Vorbis      ×        √          √

    MPEG-4(兼容性最好)        H.264          AAC        √        ×         疑问?(现在支持,以后可能不支持)

          

            WebM不但清晰度高,还免费,不受限制许可的使用源码和专利权。

二、video视频元素

   1src/width/height  上面讲过。

   2autoplay  设置后,表示立刻开始播放视频。

   3preload   设置后,表示预先载入视频。

       *预加载设置:preload有三个属性,none  表示播放器什么都不加载,第一帧也不加载,只有点击进去后才会慢慢加载。

                                       metadata  表示播放之前只能加载元数据(宽高,第一帧等信息)。

                                       auto  表示请求浏览器尽快下载整个视频。(未点进去之前就已经在加载了)

             <video src="http://li.cc/text.webm" width="640" height="480" controls preload></video>   //进去后会先缓存后面的视频内容。

             

 

   4controls  设置后,表示显示播放控制。

   5loop      设置后,表示反复播放视频。

   6muted     设置后,表示视频处于静音状态。

   7poster    指定视频数据载入时显示的图片。

         例一、<video src="text.webm" width="640" height="480" controls autoplay loop muted></video>

               <video src="text.webm" width="640" height="480" controls poster="图片"></video>     //视频未点进去时的画面

      

       *兼容多个浏览器

         例二、<video width="640" height="480" controls>

                  <source src="text.webm">                 }

                  <source src="text.mp4">                  } 里边可以写多个同一个视频格式,来保证可以在大多数浏览器支持播放

                  <source src="text.ogg">                  }

               </video>

 

 

三、audio 音频元素:除了没有宽高,和视频元素基本一样。

 

ps:更多设计到APIJavaScript控制,将在以后的基于JavaScript基础后讲解。

 

 

 

让视频在页面水平居中

<center><video class="video" src="cehui.mp4" width="640" height="400" controls loop preload poster=".."></video></center>

 

9.HTML音频和视频

标签:video   mil   使用   文件   指定   控制   文件包含   表示   除了   

原文地址:https://www.cnblogs.com/keshuai752100461/p/8485061.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!