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. GO -- socket读取内容

    func handleRead(conn net.Conn, done chan string) { for { buf := make([]) reqLen, err := conn.Read(bu ...

  2. SilverLight-DataControls:四、The PagedCollectionView(分页的集合视图) 对象

    ylbtech-SilverLight-DataControls-PagedCollectionView:The PagedCollectionView(分页的集合视图) 对象 1.A, Buildi ...

  3. linux mysql-server can't find mysql_config

    linux mysql-server can't find mysql_config Ask Question up vote7down votefavorite 3 I have a running ...

  4. eclipse下的ssh框架整合过程及測试

    最近在搭建Stuts2+hibernate+spring的框架,网上看的教程,大部分都是非常easy的步骤.没有比較具体的步骤以及每一个步骤完毕之后怎样检查是否配置成功.下面是笔者依据自己搭建的过程进 ...

  5. Debian Customer PPA RFC (by quqi99)

    作者:张华  发表于:2016-01-13版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) Pre ...

  6. PS 如何用PS制作GIF图像

    首先我们准备好要依次播放的图片(这里使用的是CS的光标缩放,只有两张图) 然后在窗口中打开动画,则下方会出现动画的面板. 点击图层按钮可以添加一帧,我们让第一帧显示为大图片,第二帧为小图片.还可以设置 ...

  7. hdu5340 Three Palindromes（manacher算法）

    题目描写叙述: 推断能否将字符串S分成三段非空回文串. 解题思路: 源码: #include <cstdio> #include <algorithm> #define MAX ...

  8. matplotlib简易新手教程及动画

    做数据分析,首先是要熟悉和理解数据.所以掌握一个趁手的可视化工具是很重要的,否则对数据连个主要的感性认识都没有,怎样进行下一步的design 点击打开链接 还有一个非常棒的资料  Matplotlib ...

  9. Jenkins 的安装与简单使用

    一.安装 项目中接触到了jenkins感觉是一个不错的项目发布构建工具,自己就简单的学习了一下,记录一下方便以后使用 jenkin下载地址:https://jenkins-ci.org/   我直接使 ...

  10. 【每日Scrum】第七天（4.28）Sprint2总结性会议

    本次会议主要是演示了一下本组项目的各项功能,每个人负责那一块儿功能由本人来负责说明和演示,确定alpha版本的发布时间,并且分派了各组员的文档负责情况,上图是会议记录,下面我详细介绍一下我组分派情况: ...