html5+css3学习笔记音频和视频
| 格式 | 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学习笔记音频和视频的更多相关文章
- HTML5+CSS3学习笔记(一)
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
- HTML5+CSS3学习笔记(一) 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- html5+css3学习笔记-prefixfree前缀补全插件
虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.一些牛逼且执着于web技术且乐于分享的仁兄(Lea Verou)就搞了个名叫prefixfree.js的插 ...
- HTML5 CSS3学习
HTML5 CSS3学习 :http://www.1000zhu.com/course/css3/ HTML5 相关书籍: http://www.html5cn.com.cn/news/gdt/2 ...
- CSS3学习笔记(3)-CSS3边框
p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...
- html5页面怎么播放音频和视频
html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...
- HTML5学习笔记 音频
HTML5提供了播放音频的标准. Web上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件比如flash来播放的.然而,并非所有的浏览器都拥有同样的插件. hmt ...
- HTML5+CSS3学习目录
目录 第YI章 Web开发新时代 第2章 从HTML.XHTML到HTML5 第3章 创建HTML5文档 第4章 实战HTML5表单 第5章 实战HTML5画布 第6章 HTML5音频与视频 第 ...
随机推荐
- Android中Activity全局共享方法AppContext
在 android 的所有 activity 中共享同一个对象实例的方法 1. 新建 AppContext.java 文件(名称可自定义) public class AppContext extend ...
- 整理一些css在使用中的小技巧(进行中)
1. 消除li排列display:inline-block的间隙 ul{ font-size:; } ul li{ display:inline-block; }
- ios UIImageView异步加载网络图片
方法1:在UI线程中同步加载网络图片 UIImageView *headview = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 4 ...
- webAPI---发布(IIS)--发布遇到问题(500.19,500.21,404.8,404.3)
WebAPI的内容部分直接转自官方文档,英语水平有限,不做翻译, 发布网站在本文的后半部分 HTTP is not just for serving up web pages. It is also ...
- Playmaker 基础使用与案例操作
首先是把下载好的插件导入Unity工程中. ▼导入完成后第一个动作就是检查下拉菜单里面是否已经增加了Playmaker的功能,如果在安装后没看到Playmaker的菜单,一般情况下直接点击菜单上的空白 ...
- Buffett saying
1. 人生财富就像滚雪球,最重要的是发现很湿的雪和很长的坡. 2. 雪球想滚大,必须要有最坚实的核心:一生坚持的价值投资理念 价值投资一直是巴菲特投资理念的核心,他始终认为投资企业最重要的是要看准企业 ...
- 关闭Pycharm拼写检查(Mac)
1.关闭拼写检查,preference-->Editor-->Inspections-->Spelling-->Typo,取消勾选 2.关闭代码风格检查,preference- ...
- Log4J1升级Log4J2
近期,碰到需要将项目中的Log4J1升级到Log4J2,现进行下总结.交代下技术背景:web项目,基于Java + Maven 1. 依赖 <dependency> <groupId ...
- Sublime的Package Control的安装
最近在用Sublime,我想很多人和我一样都是先要安装PackageControl吧! 可是看了网上的好多博客感觉都太繁琐了 对于像我这样的小白来说实在有很多看不懂的地方 相对来说还是官网的那种方法更 ...
- 关于python的元类
当你创建一个类时: class Foo(Bar): pass Python做了如下的操作: Foo中有__metaclass__这个属性吗?如果是,Python会在内存中通过__metaclass__ ...