首页 > 代码库 > video与audio的使用

video与audio的使用

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

     这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

  ·首先带大家熟悉一下video标签的属性方法,根据属性方法做一个小demo,

    • HTML5支持的视频格式:

      • Ogg 
        • 带有Theora视频编码+Vorbis音频编码的Ogg文件
        • 支持的浏览器:FCO
      • MEPG4 
        • 带有H.264视频编码+AAC音频编码的MPEG4文件
        • 支持的浏览器: SC
      • WebM 
        • 带有VP8视频编码+Vorbis音频编码的WebM格式
        • 支持的浏览器: IFCO
        • 劣势:视频少、转码器几乎没有,不好转码
    • 想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可

      • 指定一种视频格式,不能播就提示
      • <video id="media" src=http://www.mamicode.com/"examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>

 

               <video controls = “controls”>

               <source src=http://www.mamicode.com/”1.mp4” type=”video/mp4” /> //src属性写到source标签中,要指定视频的type类型,例如MP4的即为type=“video/mp4”

              <source src = http://www.mamicode.com/“2.ogg” type=”video/ogg” /> //ogg格式

              <source src=http://www.mamicode.com/”3.webm” type=”video/webm” /> //webm格式

              </video>

video与audio的使用