html5 video标签
html5 video标签
html5 video标签Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性,以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能播放时,返回的内容。
一、Video标签支持的部分属性列举
属性 | 值 | 描述 |
---|---|---|
autoplay | autoplay | 如果出现该属性,则视频在就绪后马上播放。 |
controls | controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 |
height | pixels | 设置视频播放器的高度。 |
loop | loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 |
preload | preload |
如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 |
src | url | 要播放的视频的 URL。 |
width | pixels | 设置视频播放器的宽度。 |
autobuffer | Autobuffer | 在网页显示时,该二进制属性表示是由用户代理(浏览器)自动缓冲的内容,还是由用户使用相关API进行内容缓冲。 |
poster | url图片地址 | 当视频未响应或缓冲不足时,该属性值链接到一个图像。该图像将以一定比例被显示出来。 |
二、Video标签属性的详细介绍
1、src属性和poster属性
你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。
2、preload属性
(1)、这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。
(2)、属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。
None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。
Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。
Auto:全部预加载。
3、autoplay属性
又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。
注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字(此处,自动播放为<video autoplay />或者<video autoplay=”autoplay” />);而在标签中不使用此属性表示false(此处不进行自动播放为<video />)。
4、loop属性
loop属性用于指定视频是否循环播放,同样是一个布尔属性。
5、controls属性
(1)、Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。
(2)、控制栏须包括播放暂停控制,播放进度控制,音量控制等等。
(3)、每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。
三、video标签的内部source标签
1、Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。
2、浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。
3、video标签包含src、type、media三个属性
(1)、src属性:用于指定媒体的地址,和video标签的一样。
(2)、Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。
(3)、Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。
四、html5 video标签实例
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="movie.ogg">
<source src="movie.mp4" type="movie.mp4">
你的浏览器不支持html5的video标签
</video>
</body>
</html>
实例说明
1、control 属性供添加播放、暂停和音量控件。
2、<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
3、video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
- html5的新特性
- html5清除浮动的方法(HTML5实现移动端点击翻牌功能)
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- html5 拍照上传(Html5在手机端调用相机的方法实现)
- html5基本标签详解(详解HTML5布局和HTML5标签)
- html5加入图片(HTML5 图片预加载的示例代码)
- html5列表与布局(HTML5逐步分析实现拖放功能的方法)
- html5新的表单元素新的特性(HTML5表单验证特性知识点小结)
- html5 固定图片(HTML5拖放API实现自动生成相框功能)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- HTML5 <abbr>标签
- html5复制修改(HTML5实现无刷新修改URL的方法)
- HTML5<q> 与 <blockquote> 的区别
- html5div怎样居中(HTML5+CSS设置浮动却没有动反而在中间且错行的问题)
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- 营养餐是什么(学校营养餐是什么)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
- 中秋节买啤酒,预算超过7元试试这8种啤酒,麦香浓郁都是真啤酒(预算超过7元试试这8种啤酒)
- CellPress旗下的6 期刊,国人友刊来了解一下吧(CellPress旗下的6期刊国人友刊来了解一下吧)
- ()
热门推荐
- aws提供了哪些云服务(AWS与阿里云服务器在国内使用的简单对比评测)
- connectionStrings数据库连接字符串的介绍
- serv-u突然不允许上传(Serv-U 密匙冲突,Serv-U无法启动处于离线状态解决方法)
- docker 容器移植(Docker构建kubectl镜像的实现步骤)
- laravel框架两表联查(Laravel 使用查询构造器配合原生sql语句查询的例子)
- 移动端文字过多显示省略号
- JavaScript实现网页版贪吃蛇游戏(JavaScript实现网页版贪吃蛇游戏)
- 免备案云服务器快吗?使用海外云服务器好不好(免备案云服务器快吗?使用海外云服务器好不好)
- vue中的定时函数(vue计时器的实现方法)
- jquery中使用detach 移除元素