HTML5每日一练之视频标签的应用
与音频一样,在过去,我们如果想在Web上播放视频,也是都是通过Flash来播放,同样并不是所有的浏览器都安装了Flash播放器插件,而现在我们在HTML5中,就能完全脱离Flash或其他的插件来播放视频了。
video标签:
|
IE9
|
FireFox 5.0
|
Safari 5.5
|
Chrome 12
|
Opera 11.5
|
|
|
Mpeg4
|
√
|
×
|
√
|
√
|
×
|
|
Ogg
|
×
|
√
|
×
|
√
|
√
|
|
WebM
|
×
|
√
|
×
|
√
|
√
|
Ogg:带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4:带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM:带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
video标签的属性有:
|
属性
|
值(可省略)
|
描述
|
|
src
|
url
|
要播放的视频的 URL,路径可为网络路径或相对路径。
|
|
controls
|
controls
|
向用户显示控件,比如播放按钮。
|
|
loop
|
loop
|
每当视频结束时重新开始播放。
|
|
preload
|
preload
|
视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
|
|
autoplay
|
autoplay
|
则视频在就绪后马上播放。
|
|
width
|
autoplay
|
则视频的宽度。
|
|
height
|
autoplay
|
则视频的高度。
|
注:video的属性与audio的属性基本一致,只不过多出了Width和height属性。
source子标签
此标签是用来指定视频的路径,一般存在此子标签的时候则不能再video中出现src属性,在不同的浏览器下对video标签有不同的视频支持,那么我们为了让其能够在不同的浏览器下播放,可以有多种视频格式,那么我们只需要加入此标签,来指定视频即可,浏览器则会是video播放所支持的视频格式。Source有两个属性,分别是:
|
属性
|
描述
|
|
src
|
要播放的视频的 URL,路径可为网络路径或相对路径。
|
|
type
|
视频类型
|
- <h1>请看视频,视频来自搜狗浏览器首页的实验室:</h1>
- <video width="600" height="400" controls="controls" autoplay="true">
- <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4" type="video/mp4"/>
- <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv" type="video/ogg"/>
- </video>
HTML5每日一练之视频标签的应用的更多相关文章
- HTML5每日一练之progress标签的应用
progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...
- HTML5每日一练之figure新标签的应用
igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...
- HTML5每日一练之details展开收缩标签的应用
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...
- HTML5每日一练之input新增加的5种其他类型1种标签应用
今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...
- HTML5每日一练之OL列表的改良
在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...
- HTML5每日一练之input新增加的六种时间类型应用
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...
- HTML5每日一练之input新增加的URL类型与email类型应用
1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...
- HTML5笔记2——HTML5音/视频标签详解
音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...
- html5音频和视频标签
在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...
随机推荐
- JS function的定义方法,及function对象的理解。
废话篇: 今天看到了Function的内容,各种晕,各种混淆有木有.简直是挑战个人脑经急转弯的极限啊.不过,最终这一难题还是被我攻克了,哇咔咔.现在就把这东西记下来,免得到时候又忘了就悲催了.... ...
- JS 点击事件学习总结
废话篇: 在我们编写无论什么网页内容的时候我们总是或多或少的要接触到点击事件这一范畴的,写过几个简短的demo和网页之后,感觉自己对电机事件一类的东西了解也更为的清楚了,之前写过很多零零散散的东西现在 ...
- Qt之QLabel
简述 QLabel提供了一个文本或图像的显示,没有提供用户交互功能. 一个QLabel可以包含以下任意内容类型: 内容 设置 纯文本 使用setText()设置一个QString 富文本 使用setT ...
- [原创] - C#编程大幅提高OUTLOOK的邮件搜索能力!
使用OUTLOOK, 你有没有遇到过上图的问题? 多达18419封邮件! 太多了, 每次想找一个邮件都非常耗时, 想办法解决这个问题成了一件非常紧迫的事情. 利用MS Search当然可以, 但是它太 ...
- 【同行说技术】iOS程序员从小白到大神必读资料汇总
在文章<iOS程序员从小白到大神必读资料汇总(一)>里面介绍了很多iOS入门学习的资料,今天小编就发几篇技术进阶的文章,快来看看吧! 一.iOS后台模式开发指南 这个教程会教你在什么时候怎 ...
- c#Winform程序,让pictureBox显示图像(包含GIF),并且不被占用,能即时删除图片。
最近在做一个图片浏览的工具, 需要在PictureBox中显示图像文件, 包括gif播放. 且不能被程序独占, 就算winform的程序正在显示这张图, 也能在资源管理器里delete它. 看了看网 ...
- 【英语】Bingo口语笔记(24) - L的发音技巧
舌头往上跑
- 2016第20周四java基础概念
简单的说JDK=JRE+Java编译器.调试器.工具类库等:JRE=JVM(类似于jre目录下的bin)+必要运行的类库(类似于jre目录下的lib) JVM:Java Virtual Mechina ...
- MySQL与Oracle 差异比较之七用户权限
用户权限 编号 类别 ORACLE MYSQL 注释 1 创建用户 Create user user_name identified by user_password default tablespa ...
- Windows 和 Linux 的IPC API对应表
原文出处:http://blog.csdn.net/zhengdy/article/details/5485472 ...