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. Java Static Import的用法

    在头部使用的imoirt static ***方式叫做静态引入,在Java SE 1.5.0(JDK 5)引入的特性. 官方文档的介绍: 为了访问静态成员,有必要限定它们来自的类的引用.例如,必须这样 ...

  2. [转] 常用SQL查询语句

    sunada  的原文地址 常用SQL查询语句 一.简单查询语句 1. 查看表结构 SQL>DESC emp; 2. 查询所有列 SQL>SELECT * FROM emp; 3. 查询指 ...

  3. iOS开发 CGBitmapContextCreate

    最近项目中,需要对图片进行各种操作. 使用CGBitmapContextCreate 创建位图上下文. CG_EXTERN CGContextRefCGBitmapContextCreate(void ...

  4. Mysql导出大量数据

    outfile 导出文件   select name from t1 into outfile "/tmp/test.txt"   infile 导入文件 导入到表t1中的name ...

  5. MOS管驱动详解

    1.常用的几种电平转换方案 2.三极管的电平转换及驱动电路分析 3.三级管老怀 4.关于MOSFET管驱动电路总结 5.一个IIC的5V和3.3V电平转换的经典电路分享 6.mos 7.mos应用 8 ...

  6. 笔记03 wpf 在MVVM模式下怎样在Viewmodel里面获得view的控件对象

     转自http://blog.csdn.net/qing2005/article/details/6601199http://blog.csdn.net/qing2005/article/detail ...

  7. Something about cache

    http://www.tyut.edu.cn/kecheng1/2008/site04/courseware/chapter5/5.5.htm 5.5 高速缓冲存储器cache 随着CPU时钟速率的不 ...

  8. IOS 为UILabel添加长按复制功能

    IOS 为UILabel添加长按复制功能 在iOS中下面三个控件,自身就有复制-粘贴的功能: 1.UITextView 2.UITextField 3.UIWebView UIKit framewor ...

  9. jquery+easyui主界面布局一例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="workbench.aspx ...

  10. MongoDB资料汇总专题(转)

    原文地址:http://blog.nosqlfan.com/html/3548.html 1.MongoDB是什么 MongoDB介绍PPT分享 MongoDB GridFS介绍PPT两则 初识 Mo ...