与音频一样,在过去,我们如果想在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
视频类型

  1. <h1>请看视频,视频来自搜狗浏览器首页的实验室:</h1>
  2. <video width="600" height="400" controls="controls" autoplay="true">
  3. <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.mp4" type="video/mp4"/>
  4. <source src="http://ie.sogou.com/lab/inc/BigBuckBunny.ogv" type="video/ogg"/>
  5. </video>

HTML5每日一练之视频标签的应用的更多相关文章

  1. HTML5每日一练之progress标签的应用

    progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_pr ...

  2. HTML5每日一练之figure新标签的应用

    igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例 ...

  3. HTML5每日一练之details展开收缩标签的应用

    details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击su ...

  4. HTML5每日一练之input新增加的5种其他类型1种标签应用

    今天介绍input在HTML5中的最后5种类型,分别是:number,range,search,tel和color 注意:此种类型的input在Opera10+中效果为佳,Chrome中效果不是十分好 ...

  5. HTML5每日一练之OL列表的改良

    在HTML5中的OL被改良了,为它增加了两个新属性. start属性:start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&qu ...

  6. HTML5每日一练之input新增加的六种时间类型应用

    今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...

  7. HTML5每日一练之input新增加的URL类型与email类型应用

    1.URL类型: <form> <input name="urls" type="url" value="http://www.w3 ...

  8. HTML5笔记2——HTML5音/视频标签详解

    音视频的发展史 早期:<embed>+<object>+文件 问题:不是所有浏览器都支持,而且embed不是标准. 现状:Realplay.window media.Quick ...

  9. html5音频和视频标签

    在html5之前的版本中如果想要在网页中插入音频和视频必须要安装插件才可以,比如最常见的flash插件.很多人在刚安装一款浏览器的时候都会遇到浏览器建议安装flash插件,在移动端也是如此.如果想要在 ...

随机推荐

  1. JSON 之 SuperObject(2): 构建方式与 AsJSon

    SuperObject 构建一个 JSON 的常用方法: 从字符串.从文件.从流. unit Unit1; interface uses   Windows, Messages, SysUtils, ...

  2. 听说noip2015有幻方

    终于可以说一句:pascal大法好了 magic.pp是写好的算幻方哦…… 虽然这种水题大家都会,也没什么卵用……

  3. LA 4794 Sharing Chocolate

    大白书中的题感觉一般都比较难,能理解书上代码就已经很不错了 按照经验,一般数据较小的题目,都有可能是用状态压缩来解决的 题意:问一个面积为x×y的巧克力,能否切若干刀,将其切成n块面积为A1,A2,, ...

  4. 如何向hadoop集群定时提交一个jar作业?

    除了使用Hive,Pig来执行一个MapReduce任务,不需要专门的把项目打成jar包,提交执行,或者定时执行,因为Hive,Pig这些开源框架已经,帮我们自动打包上传了. 而有些时候,我们自己手写 ...

  5. asp.net下通过泛解析和伪静态实现二级域名的实现方法

    在net中微软已经为我们留下了接口,让我们为所欲为了. 首先我们可以通过一张图大概了解下.net的生命周期. 从 上图可以看出来,针对每个不同用户的请求,服务器都会创建一个新的HttpContext实 ...

  6. [Swift系列]001-入门准备

    [引子] 最新的苹果发布会上公布了新的苹果编程语言Swift,并且演示了Xcode 6 Beta的一些新功能. 据苹果公司称,这个新语言开放的API更多,实用起来更方便,总之是值得学习.使用,比C/o ...

  7. 原创:无错版!让DEDE只生成一个RSS文件,不分栏目

    DEDE为每一个栏目都独立创建一个rss文件, 如果用户要整站订阅相当不方便.  所以需要修改让dede只生成一个rss. 网上大部分帖子要么是抄, 要么是有问题少了步骤. 今天特意整理下. 分享.. ...

  8. UVA 11354 Bond 邦德 (RMQ,最小瓶颈MST)

    题意: n个城市,m条路,每条路有个危险值,要使得从s走到t的危险值最小.回答q个询问,每个询问有s和t,要求输出从s到t最小的危险值.(5万个点,10万条边) 思路: 其实要求的是任意点对之间的最小 ...

  9. LeetCode Count Primes 求素数个数(埃拉托色尼筛选法)

    题意:给一个数n,返回小于n的素数个数. 思路:设数字 k =from 2 to sqrt(n),那么对于每个k,从k2开始,在[2,n)范围内只要是k的倍数的都删掉(也就是说[k,k2)是不用理的, ...

  10. 【django】django学得好迷茫啊 来个学习规划吧

    http://www.zhihu.com/question/26235428