格式 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. 洛谷-统计数字-NOIP2007提高组复赛

    题目描述 Description 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照 ...

  2. WPF Image Binding Uri Source 失败解决办法

    在ListView 的ListItem里动态绑定Image. 首先代码写的是没有问题的.但最后运行却无法显示图片.先看代码: 1. XAML部分 代码如下: <ListView x:Name=& ...

  3. ecshop 后台添加新的设置

    1.ecs_shop_config 表添加新的值. 2.language/zh_cn/admin/shop_config.php 设置字段后台字段名和提示信息($_LANG['cfg_name'][' ...

  4. Flexslider图片轮播、文字图片相结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效 ...

  5. List集合对象中的排序,随机显示

    List<User> students = new ArrayList<User>(); User user1 = new User(); user1.setAge(112); ...

  6. Windows Server2012上使用Nginx做文件服务器

    由于项目中用到了大量的文件上传和删除,考虑到安全的因素,所以整体的思路是使用FTP从主服务器把文件资源上传到文件服务器上. FTP上传到服务器的代码如下(简单附加一下,具体的网上很多) public ...

  7. Vladik and cards

    Vladik and cards time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  8. lldb 命令

    po [[UIWindow keyWindow] recursiveDescription]

  9. C1FlexGrid小结(转自http://www.cnblogs.com/C1SupportTeam/archive/2012/12/11/2812316.html)

    C1FlexGrid控件来对一个表格格式中的数据进行显示,编辑,组和总结.该表格可以绑定到一个数据源,它可以对自己的数据进行管理. C1FlexGrid控件有一个包含以下元素的丰富的对象模型: 以下的 ...

  10. 【转】母函数(Generating function)详解 — TankyWoo(红色字体为批注)

    母函数(Generating function)详解 - Tanky Woo 在数学中,某个序列的母函数(Generating function,又称生成函数)是一种形式幂级数,其每一项的系数可以提供 ...