目前，大多数视频是通过插件（比如 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. 深入浅出Node.js (5) - 内存控制

    5.1 V8的垃圾回收机制与内存限制 5.1.1 Node与V8 5.1.2 V8的内存限制 5.1.3 V8的对象分配 5.1.4 V8的垃圾回收机制 5.1.5 查看垃圾回收日志 5.2 高效使用 ...

  2. 独立写作（A or B）

    开头:On contemporary society(一般的背景)/ With the advent of the technologically advanced society (the info ...

  3. Guice 学习（六）使用Provider注入服务（ Provider Inject Service）

    1.定义接口 package com.guice.providerInject; import com.google.inject.ProvidedBy; public interface Servi ...

  4. cocos2dx 编写shader 遇到 溢出问题

    在 编程语言中,不论什么 数据类型 都有 各种 的 局限,无法 表示 现实世界中的 不论什么 情况. 比如 int ,char 会 溢出,float 会 有 溢出 以及 精度 不准确的 情况. 所以 ...

  5. 我在使用vector时候遇到的二逼问题

    最近在练习使用STL中德各种容器,像vector,map,set之类的. 然后在使用vector的时候,无意间遇到了一个很二逼的问题. 主要是这样的,请看源码(C++): //错误的写法: #incl ...

  6. C/C++笔试准备（1）

    题目:用递归的算法实现这样一个函数,计算一个字符串最大连续相同字符数,输入aaabbc,输出3:输入bbc,输出2 #include <iostream> using namespace ...

  7. 解决Xcode6.4安装插件后插件不能使用的问题

    下面是上网查的方法,综合了一下,亲测 原因: 苹果要求加入UUID证书从而保证插件的稳定性. 解决方法: 一.查看Xcode的UUID 在终端执行 defaults read /Application ...

  8. Linux进程控制——exec函数族

    原文:http://www.cnblogs.com/hnrainll/archive/2011/07/23/2114854.html 1.简介 在Linux中,并不存在exec()函数,exec指的是 ...

  9. Android-------手机屏幕适配之文件适配

    public class Main {         //定义文件本地存储路径,可按照需求更改         private final static String rootPath = &quo ...

  10. Android Training: 设备管理

    Android 设备管理 Android2.2 通过Android设备管理API提供对企业级应用的支持.设备管理API在系统级别提供了设备管理特性.这些API可以在企业环境下,需要对员工设备进行控制时 ...