html5--4-2 video元素的属性
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元素的属性的更多相关文章
- HTML5 Audio and Video 的新属性简介
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对Audio a ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5表单新增元素与属性
form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...
- html5表单新增元素与属性2
1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...
- Html5中的video元素
最近在做门户的时候遇到要显示企业的视频介绍,需要找到一个在aspx页面播放视频的html,最后找到了是一段HTML5最新的html代码,如下: /// <summary> /// 播放视频 ...
- 疯狂的表单-html5新增表单元素和属性
疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...
- HTML5 表单新增元素与属性
1 form 属性和 formaction 属性 本课时讲解在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form ...
- HTM5新增结构化元素&非结构化元素&新增属性详解
(1)HTML5 新增的主体结构元素 (2)HTML5 新增的的非主体结构元素 (3)HTML5 表单新增元素与属性 (4)HTML5 改良的 input 元素的种类
- HTML5之video元素
一.video元素支持的视频格式 HTML5中的video标签支持3种常用的视频格式: 1.Ogg = 带有Theora 视频编码和Vorbis 音频编码的 Ogg 文件: 2.MPEG4 = 带有H ...
随机推荐
- mac 安装opencv-python
Mac下安装opencv-python 项目中使用的是opencv 2的版本,因此下面说一下opencv2的一些安装流程. 安装方法 1:如果没有homebrew的话,需要先安装 安装命令: ruby ...
- Openlayers3 编辑要素
参考文章 Openlayers之编辑要素 MAPZONE GIS SDK接入Openlayers3之五——图形编辑工具 [学习笔记之Openlayers3]要素保存篇(第四篇) openlayers实 ...
- 四个很好的开源app项目
Open Source and the iOS App Store Today, we are open-sourcing 4 iOS apps: ThatInbox, an email client ...
- 【Spark】RDD操作具体解释4——Action算子
本质上在Actions算子中通过SparkContext运行提交作业的runJob操作,触发了RDD DAG的运行. 依据Action算子的输出空间将Action算子进行分类:无输出. HDFS. S ...
- nload 命令
网卡 流量监控命令 // 安装 yum intall nload nload 上下page 键 切换网卡查看
- 用Visual C++ 2010 载入动态链接库三部曲(使用第三方库的一般方法)
以下以载入编译好的ACE动态链接库为例说明:这里如果你已经设置了环境变量ACE_ROOT ACE在VS2010下高速配置载入动态链接库三部曲:(这里如果你的ACE文件夹为E:\ACE_wrappers ...
- FTPClient listFiles 阻塞问题
Android端使用 FTPClient 实现上传文件到到filezilla server(filezilla server部署在阿里云服务器)出现 listFiles阻塞.具体的现象是 Ftp Cl ...
- codeforces 557 C
由于期末.非常久没刷题了,CF一直掉-- 这个题事实上非常简单. .由于做法非常easy想到嘛.. 就是枚举max=x时,最大能保留多少价值.不断更新ans, 结果就是全部价值和减去ans就好 因为最 ...
- socketserver模块的使用
import socketserver class MyTCPhandler(socketserver.BaseRequestHandler): def handle(self): # print(s ...
- HDU 5384 Danganronpa (2015年多校比赛第8场)
1.题目描写叙述:点击打开链接 2.解题思路:本题利用字典树解决.本题要求查找全部的B[j]在A[i]中出现的总次数.那么我们能够建立一颗字典树,将全部的B[j]插入字典树,因为一个串的全部字串相当于 ...