html5--4-2 video元素的属性

学习要点

  • 掌握video元素的基本用法

直到现在,在网页中的大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法，这样播放视频就不必依赖外部插件

在本套课程中我们不会讲解音/视频的的发展史和编码解码的相关知识，有兴趣的朋友可以去查阅相关资料。我们重点学习video和audio两个元素的使用。

目前由于专利、商业竞争等原因各个浏览器对视频的支持格式各不相同，但是这个支持是动态变化的。

当前，video 元素支持三种视频格式：

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

　　　　　　支持的浏览器有：Firefox、Opera、Chrome

  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

　　　　　　支持的浏览器有：IE9+、Chrome、Safari

　　　　　　虽然目前应用较广，单有专利保护，是收费在

  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

　　　　　　支持的浏览器有：Chrome、Opera、Safari

　　　　　　专门为网页传播而设计在，清晰度高，压缩率也很高，并且开源免费，未来可能会成为主流。目前国外大在视频网站很多采用

video元素的属性

属性 属性值 描述
src url 要播放的视频的 URL地址。
width 正整数/百分比 设置视频播放器的宽度。
height 正整数/百分比 设置视频播放器的高度。
poster URL 视频播放前的预览图片
autoplay 空值/autoplay 视频在就绪后自动播放。一般不设置该属性。
loop 空值/loop 循环播放。
preload auto/none/metadata 视频在页面加载时是否进行加载，并预备播放。一般不需要设置，使用默认值即可。
control 空值/controls 向用户显示控件，比如播放按钮

实例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <video src="res/video.mp4" controls="" width="500px" height="300px" poster="res/秦.jpg" loop="">

         你的浏览器暂不支持HTML5的vedio元素！

     </video><br><br>

     <video src="res/video.webm" controls="">

         你的浏览器暂不支持HTML5的vedio元素！

     </video>

 </body>

 </html>

html5--4-2 video元素的属性的更多相关文章

  1. HTML5 Audio and Video 的新属性简介

    前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  4. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  5. Html5中的video元素

    最近在做门户的时候遇到要显示企业的视频介绍,需要找到一个在aspx页面播放视频的html,最后找到了是一段HTML5最新的html代码,如下: /// <summary> /// 播放视频 ...

  6. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  7. HTML5 表单新增元素与属性

    1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...

  8. HTM5新增结构化元素&非结构化元素&新增属性详解

    (1)HTML5 新增的主体结构元素 (2)HTML5 新增的的非主体结构元素 (3)HTML5 表单新增元素与属性 (4)HTML5 改良的 input 元素的种类

  9. HTML5之video元素

    一.video元素支持的视频格式 HTML5中的video标签支持3种常用的视频格式: 1.Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件: 2.MPEG4 = 带有H ...

随机推荐

  1. List遍历时删除遇到的问题

    这周在开发中遇到了一个以前没遇到的小Bug,在这里记录下来. List集合,我们平时都经常使用.但是,我在遍历List集合时,调用了List集合的remove方法来删除集合中的元素,简单的代码结构是这 ...

  2. mac 当前位置打开终端

    做开发时经常会遇到在当前目录打开终端的情况,一直都是先启动终端,然后再切换到当前目录,今天发现了一个新的方法,虽然不是一步到位,但比以前快多了.   工具/原料   mac系统 苹果电脑 方法/步骤 ...

  3. php程序调试: xdebug的配置

    怎样在phpeclipse中像调试Java程序一样调试php呢? XDebug的版本号非常多,打开http://xdebug.org/index.php.把站点细致看一下,你会发现有句"If ...

  4. [ACM] hdu 1217 Arbitrage (bellman_ford最短路，推断是否有正权回路或Floyed）

    Arbitrage Problem Description Arbitrage is the use of discrepancies in currency exchange rates to tr ...

  5. APP公布到应用市场（苹果APP STORE+安卓各大应用市场）

    注意事项 1.应用要签名,为了以后可以顺利更新应用.要保持每次的签名一致,所以要妥善保管好签名数据. 2.进行公布測试,最好有个检查表,每次公布的时候进行核查. 苹果APP STORE 一.证书的导出 ...

  6. 如何去掉Google搜索的跳转 让你的Google搜索不被reset掉

    http://www.nowamagic.net/librarys/veda/detail/389 在点击google搜索结果时,google会在结果的URL前做个跳转,且有时这个跳转地址会被墙,这样 ...

  7. Google Chrome浏览器之删除Goolge搜索结果重定向插件Remove Google Redirects

    https://chrome.google.com/webstore/detail/remove-google-redirects/ccenmflbeofaceccfhhggbagkblihpoh?h ...

  8. 关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法

    关于ASP.NET MVC中Response.Redirect和RedirectToAction的BUG (跳转后继续执行后面代码而不结束进程)以及处理方法   在传统的ASP.NET中,使用Resp ...

  9. nodejs如何使用mongo数据库

    nodejs如何使用mongo数据库 首先,请参考下面两个链接,配置并运行express和mongodb. 1.使用express生成一个空白网站http://cnodejs.org/topic/50 ...

  10. iOS设计模式 - (2)UML类间关系精解

    在正式讲设计模式之前, 介绍一下UML类图之间的关系还是非常有必要的, 由于一些教程, 书籍, 包含我之后的文章, 都会大量使用类图, 去描写叙述各个类之间的关系.这是一种非常直观, 简约的方式. 当 ...