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. SVG动画实践篇-音量变化效果

    git 地址:https://github.com/rainnaZR/svg-animations/tree/master/src/pages/step2/volumn 说明 这个动画的效果就是多个线 ...

  2. SharePreferences使用

    获取数据: @SuppressLint("InlinedApi") private String getFromSharePreference(String key) { if ( ...

  3. mac升级系统自带numpy失败解决方案

    sudo pip install -U numpy 后抛出 OSError: [Errno 1] Operation not permitted: '/tmp/pip-o2xinZ-uninstall ...

  4. Mac下安装和使用GunPG（GPG）

    GPG是加解密的工具,亦可以用于签名.非对称加解密.需要公钥和私钥. mac下安装:brew install gpg 使用gpg工具校验下载文件的完整性,从官网下载KEYS和asc文件:gpg --i ...

  5. SSH错误：packet_write_wait: Connection to 10.57.19.250 port 22: Broken pipe

    现象:ssh连接以后,服务器会主动断开连接,wireshark抓包,发线服务器会tcp rst,断开ssh连接 解决尝试:1.修改会话超时时间:2.客户端主动间隔性向服务器发送保活报文:3.服务端主动 ...

  6. SharpSSH

    SharpSSH sharpssh is a pure .NET implementation of the SSH2 client protocol suite. It provides an AP ...

  7. thrift的使用及遇到的问题

    centos 系统安装官方文档:http://thrift.apache.org/docs/install/centos 一.按该文档安装出现了一系列的问题,记录如下: 1.安装thrift时./bo ...

  8. HDU 4403 A very hard Aoshu problem （DFS暴力）

    题意:给你一个数字字符串.问在字符串中间加'='.'+'使得'='左右两边相等. 1212  : 1+2=1+2,   12=12. 12345666 : 12+3+45+6=66.  1+2+3+4 ...

  9. XSS过滤

    XSS过滤封装用法 封装到app01/form.py文件中进行验证 from django.forms import Form,widgets,fields class ArticleForm(For ...

  10. 【转载】C#中的==、Equal、ReferenceEqual

    1. ReferenceEquals, == , Equals Equals , == , ReferenceEquals都可以用于判断两个对象的个体是不是相等. a) ReferenceEquals ...