HTML5视音频小结
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 文件
开发例子源码如下：
- <!DOCTYPE HTML>
- <html>
- <body>
- <video width="320" height="240" controls="controls">
- <source src="movie.ogg" type="http://www.w3school.com.cn/i/movie.ogg">
- <source src="movie.mp4" type="http://www.w3school.com.cn/i/movie.mp4">
- 你的浏览器不支持html5的video标签
- </video>
- </body>
- </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 | 设置视频播放器的宽度。 |
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
当前，audio 元素支持三种音频格式：
| IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 | |
|---|---|---|---|---|---|
| Ogg Vorbis | √ | √ | √ | ||
| MP3 | √ | √ | √ | ||
| Wav | √ | √ | √ |
开发例子源码如下：
- <!DOCTYPE HTML>
- <html>
- <body>
- Internet Explorer 8 不支持 audio 元素。在 IE 9 中，对 audio 元素的支持。
- <audio controls="controls" autoplay="autoplay">
- <source src="http://www.w3school.com.cn/i/song.ogg" type="audio/ogg">
- <source src="http://www.w3school.com.cn/i/song.mp3" type="audio/mpeg">
- 你的浏览器不支持html5的audio标签
- </audio>
- </body>
- </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视音频小结的更多相关文章
- HTML5视音频标签参考
本文将介绍HTML5中的视音频标签和对应的DOM对象.是相关资料的中文化版本,可以作为编写相关应用的简易中文参考手册. 一些约定 所有浏览器:指支持HTML5的常见桌面浏览器,包括IE9+.Firef ...
- 视音频编解码基本术语及解释&MediaInfo
MEDIA INFO 下载: https://mediaarea.net/en/MediaInfo/Download/Windows 摘要: 整理了一些基本视音频术语,用于入门和查询 ...
- FFmpeg学习6：视音频同步
在上一篇文章中,视频和音频是各自独立播放的,并不同步.本文主要描述了如何以音频的播放时长为基准,将视频同步到音频上以实现视音频的同步播放的.主要有以下几个方面的内容 视音频同步的简单介绍 DTS 和 ...
- FFmpeg学习5：多线程播放视音频
在前面的学习中,视频和音频的播放是分开进行的.这主要是为了学习的方便,经过一段时间的学习,对FFmpeg的也有了一定的了解,本文就介绍了 如何使用多线程同时播放音频和视频(未实现同步),并对前面的学习 ...
- html5 audio音频播放全解析
序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...
- [转]FFMPEG视音频编解码零基础学习方法
在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...
- [总结]FFMPEG视音频编解码零基础学习方法--转
ffmpeg编解码学习 目录(?)[-] ffmpeg程序的使用ffmpegexeffplayexeffprobeexe 1 ffmpegexe 2 ffplayexe 3 ffprobeexe ...
- FFMPEG视音频编解码零基础学习方法
在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...
- 最简单的视音频播放示例9：SDL2播放PCM
本文记录SDL播放音频的技术.在这里使用的版本是SDL2.实际上SDL本身并不提供视音频播放的功能,它只是封装了视音频播放的底层API.在Windows平台下,SDL封装了Direct3D这类的API ...
随机推荐
- 转:修改类不重启tomcat 自动加载项目
可以修改类不用重启Tomcat加载整个项目(手工启动) 配置reloadable=true(自动重载) 使用Debug模式,前提是仅限于局部修改.(修改类不用重启--热加载) (rel ...
- 【转】 树莓派学习笔记——I2C设备载入和速率设置
原文网址:http://blog.csdn.net/xukai871105/article/details/18234075 1.载入设备 方法1——临时载入设备 sudo modprobe -r i ...
- opencart修改后台文件夹名
在使用opencart进行二次开发时,若需要修改后台目录的文件夹名是可以操作的.具体步骤如下: 1.将网站后台文件夹名字改成opencartadmin 2.在该文件夹下找到config.php文件如图 ...
- ios delegate 和 block
//委托的协议定义 @protocol UpdateDelegate <NSObject> - (void)update; @end @interface Test : NSObject ...
- R6010 -abort() has been called错误分析及其解决方法
近期使用vs2010编程出现下面问题.在网上收集了大家的意见之后,整理了一下 导致出现这种原因有: 1.非法指针訪问和内存泄漏 2.大家再查查吧.一定是指针出现故障了.设置的指针范围跟你执行的不正确 ...
- SQL Server无法打开用户默认数据库，登录失败，用户‘sa’登录失败，错误：4064的解决方法
用windows验证方式进入Management Studio, 安全性 > 用户名 > 右击sa > 属性 > 把默认数据库选“master”
- PHP学习笔记二十八【抽象类】
<?php //定义一个抽象类.主要用来被继承 //如果一个类继承了抽象类,则它必须实现该抽象类的所有抽象方法(除非它自己也是抽象类) // abstract class Animal{ pub ...
- Ext.net GridPanel获取选中行的数据
1.前台页面 在button中添加ExtraParams <DirectEvents> <Click> <ExtraParams> <ext:Pramet ...
- POJ 1723 SOLDIERS (中位数)
题目大意: 平面上有N(N<=10000)个点,求这些点变成一条水平线的最小移动步数. 算法讨论: 表示自己太弱弱了,打算从今天开始提高一下智商. 我们考虑,既然是要成一条水平线,那么这条直线的 ...
- JVM学习积累
1. Java代码编译和执行的整个过程包含了三个重要的机制: Java源码编译机制 类加载机制 类执行机制 2. 关于Java源码编译机制 Java源码编译由以下三个过程组成: 分析和输入符号表 注解 ...