HTML 音频和视频

Posted on 2017-11-27 07:37  YanHongJie  阅读(177)  评论(0)    收藏  举报

音频 <audio>

  

<audio controls>
  <source src="http://www.runoob.com/try/demo_source/horse.ogg" >
  <source src="http://www.runoob.com/try/demo_source/horse.mp3" >
    您的浏览器不支持 audio 元素。
</audio>

  

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。

注释: IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。

 

<audio> 标签定义声音,比如音乐或其他音频流。

目前,<audio> 元素支持的3种文件格式:MP3、Wav、Ogg。

 

<audio> 标签是 HTML5 的新标签。

 

提示:可以在 <audio> 和 </audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

 

属性:

  autoplay   如果出现该属性,则音频在就绪后马上播放。     <audio autoplay='autoplay'> ... </audio>

  controls    如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。     <audio controls> ... </audio>

  loop          如果出现该属性,则每当音频结束时重新开始播放。  <audio loop='loop'> ... </audio>

  muted  如果出现该属性,则音频输出为静音。  <audio muted='muted'> ... </audio>

  preload   规定当网页加载时,音频是否默认被加载以及如何被加载。   值:  

       auto - 当页面加载后载入整个音频

         meta - 当页面加载后只载入元数据

         none - 当页面加载后不载入音频

  src     规定音频文件的 URL。

 

 

 

 

 

  

视频 <video>

<video width="320" height="240" controls>
  <source src="http://www.runoob.com/try/demo_source/movie.mp4"  type="video/mp4">
  <source src="http://www.runoob.com/try/demo_source/movie.ogg"  type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

  

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 标签。

注释:IE 8 或更早版本的 IE 浏览器不支持 <video> 标签。

 

<video> 标签定义视频,比如电影片段或其他视频流。

目前,<video> 元素支持三种视频格式:MP4、WebM、Ogg。

 

  • MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器
  • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
  • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器

提示:可以在 <video> 和 </video> 标签之间放置文本内容,这样不支持 <video> 元素的浏览器就可以显示出该标签的信息。

 

属性:

  autoplay   如果出现该属性,则视频在就绪后马上播放。     <video autoplay='autoplay'> ... </video>

  controls    如果出现该属性,则向用户显示控件,比如播放按钮。     <video controls> ... </video>

  width  设置视频播放器的宽度。    <video width='320'> ... <video>

  height    设置视频播放器的高度。    <video height='320'> ... <video>

  loop          如果出现该属性,则每当视频结束时重新开始播放。  <video loop='loop'> ... </video>

  muted  如果出现该属性,则视频的音频输出为静音。  <video muted='muted'> ... </video>

  preload   规定当网页加载时,视频是否默认被加载以及如何被加载。   值:  

       auto - 当页面加载后载入整个音频/视频

         meta - 当页面加载后仅加载音频/视频的元数据。

         none - 当页面加载后不载入音频/视频

  src     规定视频文件的 URL。