js获取video的时长_HTML5标签之<video>二次开发（一） — 为什么（后跟重要知识点！）...

说起video，相信大家对其还是挺熟悉了，HTML5新增标签。这个标签的作用讲就是一个视频播放器。而在它出来之前，网页千篇一律的使用flash播放器（因为没得选）。但是讲道理，原生的video已经不能用丑字来形容了，那怎么办呢？加工！改造！本期专栏将会分为若干章来分别讲解video自定义中常用的属性、操作方法以及各种坑。希望可以给大家带来帮助。

那么首先为什么要用h5播放器呢？首先一个就是一众主流浏览器宣布要“休掉”flash（谷歌从2020年12月起将不再支持flash任何插件）；再其次从apple发布iPhone的时候，flash就已经开始走下坡路，h5播放器在油管等网站开始兴起，再加上h5在流畅度、稳定性上都比flash要好一点，这就注定h5终将走上历史的舞台。

图1 - 原生video播放器

图1是原生的video标签，中未加任何修饰，包括原生属性（但是这里浏览器自动带上了controls，因此可以看到自带的控制台）。可以看到除了播放/暂停、进度/时长、调节音量、全屏以及没什么用的菜单以外没有任何功能，而且菜单中仅有的两个功能就是“画中画”和“下载”，试问你用到的画中画功能多吗？还是你作为网站创始人or视频发布者希望任何人可以随便下载视频？（也不知道咋想的会出这功能）；而且！这时的video想要播放视频就要指定src，但是你不能让用户F12或者给个input去填写吧？最重要的是它的功能实在是太简单了，根本不能满足视频网站的需求。什么是需求？来看看B站的功能。

图2 - B站播放器

可以看到B站的播放器除了最基本的播放视频以外，还有自定义的进度条（看到开那个小电视了吗？圣诞节的时候变成了一顶帽子）；自定义的控制台，能够控制播放/暂停，音量、弹幕、设置菜单等等个性化功能，这些都是原生video没有的功能。

图3 - 自己开发的video，带有弹出式播放列表

当然，我们也可以根据自己的需求来进行相应的开发，如图3在右侧增加了播放列表，可以通过点击唤出/隐藏，并实现点击相应的视频进行加载播放。

最后还有一个右键点击事件，细心的小伙伴应该发现了，在原生的video标签和B站的播放器上右键菜单是不一样的，这就是默认右键事件。从图4、5可以看到两者是完全不一样的。那么这就是另一个有趣的知识点了——默认事件。

图4 - 原生video的右键事件

图5 - B站的播放器右键事件

看完以上这些，小伙伴们是不是迫不及待的想要开发一款属于自己的播放器了呢？别急，这里需要给大家回顾一些知识点：

一、此次系列专栏将基于jQuery/3.4.1进行开发，很少提及原生js，有些地方我会使用原生js进行标注，后边会慢慢放弃；此系列涉及HTML5、CSS3、JavaScript、jQuery（DOM操作、事件操作及AJAX等）。

二：jQuery中的prop()和attr() !很重要!

区别：

·对于HTML元素本身就带有的属性，在处理时使用prop方法；

·对于HTML我们自己定义的DOM属性，在处理时使用attr方法。

什么时候用attr()，什么时候用prop()

根据官方的建议：具有true和false两个属性的（如checked）使用prop，其余则使用attr

注意

对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

更多请关注：微博@概念云工作室

B站：概念云工作室