格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.或者可以加flash的备用方案啦
</video>
属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType videoHeight error
  duration timeupdate
  ended ended
  error abort
  paused empty
  muted emptied
  seeking waiting
  volume loadedmetadata
  height  
  width  

音频----------------------------------------------------------------------------------------------------------------------------------------------------

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src url 要播放的音频的 URL。

html5+css3学习笔记音频和视频的更多相关文章

  1. HTML5+CSS3学习笔记(一)

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  2. HTML5+CSS3学习笔记(一) 概述

    HTML5+CSS3概述      HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...

  3. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  4. html5+css3学习笔记-prefixfree前缀补全插件

    虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...

  5. HTML5 CSS3学习

    HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍:   http://www.html5cn.com.cn/news/gdt/2 ...

  6. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  7. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

  8. HTML5学习笔记 音频

    HTML5提供了播放音频的标准. Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...

  9. HTML5+CSS3学习目录

       目录 第YI章 Web开发新时代 第2章 从HTML.XHTML到HTML5 第3章 创建HTML5文档 第4章 实战HTML5表单 第5章 实战HTML5画布 第6章 HTML5音频与视频 第 ...

随机推荐

  1. MySQL连接无法解析HOST主机名

    #1042 - Can't get hostname for your address 使用IP链接或域名链接都可能遇到这个问题 解决办法: my.ini 或 my.cnf 末尾添加 skip-nam ...

  2. 使用 Git 报错 error: src refspec master matches more than one.

    今天在使用 Git push 代码时遇到一个报错: error: src refspec master matches more than one. error: failed to push som ...

  3. C++之指针例题解析

    看了挺长一段时间的C了,基本上是把基础语法过关了,偶然遇见一个C++的面试题,分析一下,作为一段时间的打卡. 代码在编译器里边打一下, #include <iostream> using ...

  4. centOS静态ip设置

    设置静态IP地址 1,先搜索了一下,得到以下解释IP          P地址Netmark     子网掩码Gateway     默认网关HostName    主机名称DomainName  域 ...

  5. EntityFramework批量Insert

    先说解决办法:使用SqlBulkCopy. 然后问题是:这个和EF没有半点关系,还要拼DataSet. 再是解决办法:你可以自己封装一个,也可以使用人家写好的 EntityFramework.Bulk ...

  6. 元素的BFC特性与自适应布局

    一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...

  7. linux内存管理(repost)

    一 为什么需要使用虚拟内存 大家都知道,进程需要使用的代码和数据都放在内存中,比放在外存中要快很多.问题是内存空间太小了,不能满足进程的需求,而且现在都是多进程,情况更加糟糕.所以提出了虚拟内存,使得 ...

  8. angularjs各版本下载

    下载网址:https://code.angularjs.org/1.2.14/

  9. String类使用方法

    1.1.字节与字符串相互转换 |-字节-->String:public String(byte[]  bytes)        |-String-->字节: public byte[] ...

  10. 关于 HSSF 和 XSSF 功能的开发者入门指南 (Apache POI 操作 Excel)

    关于 HSSF 和 XSSF 功能的开发者入门指南 笔者深夜无眠,特此对本文翻译一部分,未完成部分待后续更新 本文源文地址 意欲使用 HSSF 和 XSSF 功能快熟读写电子表格?那本文就是为你而写的 ...