目前,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
当前HTML5只支持三种格式的视频。

格式 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 文件
开发例子源码如下

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. <video width="320" height="240" controls="controls">
  5. <source src="movie.ogg" type="http://www.w3school.com.cn/i/movie.ogg">
  6. <source src="movie.mp4" type="http://www.w3school.com.cn/i/movie.mp4">
  7. 你的浏览器不支持html5的video标签
  8. </video>
  9. </body>
  10. </html>

解释:
1、control 属性供添加播放、暂停和音量控件。
2、<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
3、video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
支持的部分属性列举

属性 描述
autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload preload

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

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

src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
检测浏览器是否支持HMLT5视频:http://blog.csdn.net/xmtblog/article/details/41513925
基于android4.1browserHTML5视频实现浅析:http://blog.csdn.net/qq295445028/article/details/20055077
 
目前,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。

当前,audio 元素支持三种音频格式

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis    
MP3    
Wav    

开发例子源码如下

  1. <!DOCTYPE HTML>
  2. <html>
  3. <body>
  4. Internet Explorer 8 不支持 audio 元素。在 IE 9 中,对 audio 元素的支持。
  5. <audio controls="controls" autoplay="autoplay">
  6. <source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
  7. <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
  8. 你的浏览器不支持html5的audio标签
  9. </audio>
  10. </body>
  11. </html>

解释:
1、control 属性供添加播放、暂停和音量控件。
2、<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的。
3、audio 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
支持的部分属性列举:
4、autoplay 是否自动播放。

属性 描述
autoplay autoplay 如果出现该属性,则音频在就绪后马上播放。
controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop loop 如果出现该属性,则每当音频结束时重新开始播放。
preload preload

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

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

src url 要播放的音频的 URL。

HTML5视音频小结的更多相关文章

  1. HTML5视音频标签参考

    本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...

  2. 视音频编解码基本术语及解释&MediaInfo

    MEDIA INFO 下载: https://mediaarea.net/en/MediaInfo/Download/Windows 摘要:          整理了一些基本视音频术语,用于入门和查询 ...

  3. FFmpeg学习6:视音频同步

    在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...

  4. FFmpeg学习5:多线程播放视音频

    在前面的学习中,视频和音频的播放是分开进行的.这主要是为了学习的方便,经过一段时间的学习,对FFmpeg的也有了一定的了解,本文就介绍了 如何使用多线程同时播放音频和视频(未实现同步),并对前面的学习 ...

  5. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  6. [转]FFMPEG视音频编解码零基础学习方法

    在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...

  7. [总结]FFMPEG视音频编解码零基础学习方法--转

    ffmpeg编解码学习   目录(?)[-] ffmpeg程序的使用ffmpegexeffplayexeffprobeexe 1 ffmpegexe 2 ffplayexe 3 ffprobeexe ...

  8. FFMPEG视音频编解码零基础学习方法

    在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...

  9. 最简单的视音频播放示例9:SDL2播放PCM

    本文记录SDL播放音频的技术.在这里使用的版本是SDL2.实际上SDL本身并不提供视音频播放的功能,它只是封装了视音频播放的底层API.在Windows平台下,SDL封装了Direct3D这类的API ...

随机推荐

  1. 2015第14周日WebSocket

    清明时节雨纷纷,路上行人欲断魂,借问酒家何处是?牧童遥指杏花村.每次清明都不禁想起杜牧这首诗缅怀先人,此时第一句写时间天气,第二句写人物心情,第三句写解决方法,第四句给出解决方案,脍炙人口. 刚没事看 ...

  2. poj 2288 Islands and Bridges_状态压缩dp_哈密尔顿回路问题

    题目链接 题目描述:哈密尔顿路问题.n个点,每一个点有权值,设哈密尔顿路为 C1C2...Cn,Ci的权值为Vi,一条哈密尔顿路的值分为三部分计算: 1.每一个点的权值之和 2.对于图中的每一条CiC ...

  3. AsyncTask 与 对话框显示 view.WindowManager$BadTokenException: Unable to add window…is not valid; is your a

    最近遇到一个奇葩的问题,好郁闷 之前也没有仔细看.问题偶尔出现一次.再去查看日志时,出现 view.WindowManager$BadTokenException: Unable to add win ...

  4. vim 的配色方案

    浅色: http://www.vimninjas.com/2012/09/14/10-light-colors/ 深色: http://www.vimninjas.com/2012/08/26/10- ...

  5. python list 按长度分段

    def changes(a,b): #list 分段函数,a:数据[(1),(2)]b:长度 for i in xrange(0,len(a),b): yield  a[i:i+b] for i in ...

  6. Appstore 创建App步骤

    .进入AppInformation界面 defaultLanguage:选择默认语言 AppName:填写在Appstore上显示的名字 SKUNumber:填写一个唯一标示符,这个只要唯一即可,不能 ...

  7. How to check for and disable Java in OS X

    Java used to be deeply embedded in OS X, but in recent versions of the OS it's an optional install. ...

  8. java与.net比较学习系列(6) 数组

    这一篇文章要总结的内容是数组,数组可以简单地看成是同种数据类型变量的集合,它在我们的开发中经常用到,我们主要从以下几个方面进行总结: 1,数组的创建和初始化 2,数组的访问和遍历 3,数组的总结 数组 ...

  9. vc10的C2664和C2065错误

    在vs2010中编译一个普通的C++程序(Win32 Console Application),都会出现这两个错误! 究其原因是:我们已经习惯了VC6的种种简陋和不规范! 例如,下列程序在VC6中编译 ...

  10. vue 单页面应用实战

    1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...