第五节:video标签的特性,你全都掌握了吗?
最近太忙,没及时更新教程,加了私人微信号的同学也问,下一章节讲什么,怎么不更新了,不好意思,让大家久等了。
还有同学反馈:上两章节的篇幅太长了。我也觉得确实有点长了,不适合碎片化时间去阅读。以后我会控制一下文章内容量,非常感谢大家的反馈。
让我们继续投入到学习吧!
今天的章节也不难,我们要讲video元素,相信大家对它不会陌生。
以前的网页视频
过去还没有HTML5的时候,我们处理网页视频的时候,都是通过Flash插件来实现的,然而,并非所有浏览器都有同样的插件。
现在有了HTML5带来的video元素,开发者能够很方便地将视频资源嵌入到HTML文档中。
video标签的用法
<video>标签:定义视频,比如电影片段或其他视频。
<video src="movie.mp4"></video>
就这么简单的一行代码,你就可以将你的视频文件引入到了HTML文档中。其中属性src跟img标签的src作用一致:指定资源的文件路径。
不支持video标签的浏览器
也许你会问,<video> 标签怎么说也是HTML5的新特性,老的浏览器不支持的情况下要怎么处理?也很简单:
<video src="movie.mp4"> 浏览器太老啦,该换了! </video>
可以在标签之间放置一句话,这样老的浏览器就可以显示出不支持该标签的信息。
(IE8就不支持video)
当然,除了可以是文本内容,也可以是其他的html代码。
如何处理3种视频格式
<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。但是,不同的浏览器对视频格式的支持也不一致。如何能更好地处理这种情况呢?看:
<video> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 浏览器太老啦,该换了! </video>
我们利用<source>标签为<video>标签定义视频文件资源,这样浏览器会自动选择一个它所支持的视频格式类型来展示,忽略其他类型,是不是觉得浏览器相当的机智。
而<source>标签的type属性是用于规定媒体资源的 MIME 类型。它的值有:
video/ogg
video/mp4
video/webm
video标签的属性
接下来,我们继续学习<video>标签几个很实用的属性。
autoplay 属性:规定视频加载完毕后就开始播放。
<video autoplay></video>
给<video>标签添加autoplay属性即可,这种写法是简写。你可以这样写:
<video autoplay="autoplay"></video>
但是我们建议用简写,更加简洁,下面的属性介绍,我们都会用简写的形式表示。
controls属性:向用户显示控件,比如播放按钮。
<video controls></video>
加上了controls属性,我们看看效果:
可以看到,视频下方出来了一些控件栏,点击控件可以对视频进行操作:播放/暂停、进度、声音、全屏显示等,十分方便。
loop 属性: 使视频自动重复播放。
<video loop></video>
这个好理解,视频播放结束后会自动重新播放。
muted属性:规定视频静音播放。
<video muted></video>
poster 属性:视频播放之前显示的图片。
<video poster="poster.png"></video>
poster属性的值是该图片的所在路径。我们来看看效果:
(我是个gif图,加载慢,怪我咯)
在视频加载和播放之前,我们显示的都是poster图片(我放了“web前端教程”公众号的logo)的内容。直到用户点击播放的时候,才会显示视频的内容。
preload 属性:规定是否在页面加载后载入视频。
<video preload="auto"></video>
它的值有:
auto - 当页面加载后载入整个视频
metadata - 当页面加载后只载入元数据
none - 当页面加载后不载入视频
height属性:设置视频播放器的高度。
<video height="100"></video>
width属性:设置视频播放器的宽度。
<video width="100"></video>
利用height和width属性,可以模拟全屏展示效果。
JavaScript中的video对象
除了通过标签属性来控制视频文件以外, HTML5的 video 对象提供可以用于通过JavaScript 控制播放的方法、属性以及事件。
播放 / 暂停
video 对象提供了paused属性、play( )方法和pause()方法供我们使用。
paused属性可以获取当前视频是否处于暂停状态,如果是,返回true。如果正在播放,则返回false。
var v = document.getElementById('video'); //当前是否暂停 v.paused;
调用pause( )方法,会使视频立即处于暂停状态。
//暂停 v.pause();
调用play( )方法,视频则会继续播放,十分简单。
//播放 v.play();
音量控制
通过video对象的volume属性来控制音量。
v.volume += 0.1;
volume的值范围在0~1之间,值越大,声音越大,反之,声音越小。
seekable 属性
video对象还有一个seekable 属性,它会返回用户在视频中可寻址的时间范围。什么意思呢?我们来试一下看。
获取视频开始播放的时间位置,默认是0秒位置。
v.seekable.start(0);
获取视频播放结束的时间点,一般来说也就是这个视频的播放时长。
v.seekable.end(0);
利用这两个特性,就可以计算出视频的总播放时长是多少了。也就是上面说的可寻址的时间范围(很简单的一个概念,硬是说成可寻址时间范围这么陌生抽象)。
获取和控制播放时间
获取视频已播放了的时间长度。
v.played.end(0)
如果视频从0秒处开始播放,播放了4秒,那么上面得到的结果就是:4 。
设置视频当前的播放时间。
v.currentTime = 5;
这样,视频的播放时间就会跳至5秒的位置,然后继续播放。倘若你设置的时间大于视频的总时长,就会被跳到视频的最后位置。
URL控制播放范围
除了通过属性和JavaScript来控制视频之外,我们还有一种方式来操控视频。是什么呢?比较有趣。
在<video>指定视频文件的URI的时候,可以选择性地加入一些额外信息来指定视频播放的起始时间和结束时间。比如:我们要设置视频的播放开始时间在3秒的位置,结束时间在7秒的位置,那么,我们可以这样做:
<video src="movie.mp4#t=3,7"></video>
格式为: #t=startTime,endTime。这样,视频就会在3秒的位置开始播放,播放至7秒处就会停止。
<audio>标签和<video>标签很相似,本来想在这一章节一并讲解,但是这样做的话篇幅太长,只好留在下一章节再一起学习。
本节收获
使用<video>实现网页视频播放
旧版浏览器不支持<video>标签的处理方式
自定义一个视频的控件,实现播放/暂停、重播、静音、音量调节、播放进度调节、全屏显示等。
第五节:video标签的特性,你全都掌握了吗?相关推荐
- Web前端开发笔记——第二章 HTML语言 第五节 图像标签
目录 前言 一.图像标签的属性 (一)src属性和alt属性 (二)width属性和height属性 (三)borde属性 二.绝对路径和相对路径 三.图像映射 例题 结语 前言 本节介绍图像标签即i ...
- 第五节 面向对象相关特性
第五节 面向对象相关特性 1.命名空间 namespace xueyuan; 2.创建类 class Hello {public function sayHello(){echo "hel ...
- 第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签...
第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签 标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象 ...
- HTML5---新标签与特性
1.HTML5新标签与特性 HTML5 是对 HTML 标准的第五次修订,目前仍未完工.2014年10月由万维网联盟(W3C)完成标准制定,其设计目的是为了在移动设备上支持多媒体.HTML5的出现,对 ...
- HTML5新标签与特性(笔记)
HTML5新标签与特性 前言 新增语义化标签 新增标签属性 新增的input的type属性值 多媒体标签 embed audio video 字体图标 前言 HTML5 : HTML 标准的最新版 ...
- 浅谈HTML5+css3新标签和特性
HTML5新标签与特性 什么是H5 H5并不是新的语言,而是html语言的第五次重大修改–版本 支持:所有的主流浏览器都支持h5.(chrome,firefox,safari...).IE9及以上支持 ...
- 前端学习(五)HTML5部分新特性
什么是HTML5 定义:HTML5定义了HTML标准的最新版本,是对HTML的第五次重大修改,是下一代的HTML 概念: 它是一个新版本的HTML语言,定义了新的标签.特性和属性 拥有一个强大的技术集 ...
- HTML5新标签及特性
HTML5 html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 1.新特性 新增语义化元素 新增表单相 ...
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
最新文章
- intellij idea的out目录下为什么会有与src名字相同的.class文件呢?
- UVA1411 Ants(带权二分图的最大完美匹配、zkw费用流)
- 递归删除N天前的文件夹及子文件夹下的特定文件
- Flink SQL 在网易云音乐的产品化实践
- JavaScript中的String substring()方法和示例
- 及cp含义_新媒体运营炒CP,既好用,又好玩(第327回)
- supsplk 服务器被植入木马 挖矿 cpu使用 700%
- Struts2的声明式异常处理
- android 3.0 m3u8,在Android中播放m3u8视频
- 银行工作中有哪些需要注意的事?
- 数据结构之究竟什么是树
- 《mysql必知必会》学习_第八章_20180730_欢
- 摩拜单车微信小程序开发技术总结
- 【PTA】 统计素数并求和
- 二代测序方法:DNA测序之靶向重测序
- ORACLE的jdbc驱动包版本
- 2014,念念不忘 必有回响
- 计算机专业国考录取比例,国考招录中,报考人数近18万,有3类专业成功几率高...
- java 东八区日期转换_JavaScript日期转换为东八区的日期
- 柱状图中最大的矩形多种解法
热门文章
- 作者:​冯景华(1984-),男,国家超级计算天津中心主任助理、系统管理部部长。...
- 作者:李明,男,中兴通讯股份有限公司产品经理。
- 找准多变量迭代过程的每一次变量转化(洛谷P1150题题解,Java语言描述)
- 【Python】IDLE工具
- python3基础知识一
- 杭州一高中推刷脸吃饭:8秒搞定;乌海市与上海荷福签署合作协议 进入人工智能矿业安全领域...
- [转]CSS浏览器兼容问题总结
- ASP.NET MVC5使用AjaxHelp
- zabbix监控之Centos基于LNMP环境安装
- Android的移动存储解决方案“.NET研究”之SharedPreferences