目前，大多数视频是通过插件（比如 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. JavaEE连接池泄漏问题检测Oracle数据库

    1.项目环境 项目是典型的轻量级JavaEE项目,使用SSH框架构建,数据源使用DBCP管理,和Spring进行了整合. 项目数据库使用Oracle数据库. 项目DBCP配置内容如下 ###### D ...

  2. c++ 13

    一.向量 ... 10.size/resize/clear/capacity/reserve 1)向量的大小可增可减,使向量大小改变的函数包括:resize/push_back/pop_back/cl ...

  3. 瑞柏匡丞：app商业价值如何体现

    在互联网行业,想要实现商业价值,必须先实现用户价值.这个观点发源自PC统治互联网的时代,如今PC端的用户停留时间下降,用户行为趋于稳定保守,移动端则蒸蒸日上.而PC与移动端的区别之一是,PC端的用户流 ...

  4. juicer模板引擎使用

    http://www.juicer.name/ <script src="~/Scripts/jquery-1.8.2.min.js"></script> ...

  5. Lowest Common Ancestor of a Binary Search Tree 解答

    Question Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given nodes ...

  6. poj 3684 Physics Experiment（数学，物理）

    Description Simon ), the first ball is released and falls down due to the gravity. After that, the b ...

  7. python学习之路-12

    线程池 上下文管理 线程池中关于上下文管理的相关代码 点我查看更详细的上下文管理介绍 import contextlib @contextlib.contextmanager def worker_s ...

  8. [Immutable,js] Iterating Over an Immutable.js Map()

    Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the ot ...

  9. 一道movfuscator混淆过的简单逆向

        月赛中出了道经过movfuscator混淆的逆向题目,记录一下过程.跑起来发现需要用户输入长度为20的字符串,我尝试着输入了几次都是直接退出了,没有任何提示.用IDA打开,题目里面几乎全是mo ...

  10. Oracle静默安装-简单记录

    一.与图形界面安装一样,检查如下条件:新建用户.组创建安装目录配置环境变量检查安装依赖包修改内核参数……前面这些操作都属于常规操作,不管是图形还是静默都需要处理. 二./home/oracle/dat ...