說起video，相信大家對其還是挺熟悉了，HTML5新增標(biāo)簽。這個標(biāo)簽的作用講就是一個視頻播放器。而在它出來之前，網(wǎng)頁千篇一律的使用flash播放器（因為沒得選）。但是講道理，原生的video已經(jīng)不能用丑字來形容了，那怎么辦呢？加工！改造！本期專欄將會分為若干章來分別講解video自定義中常用的屬性、操作方法以及各種坑。希望可以給大家?guī)韼椭?

那么首先為什么要用h5播放器呢？首先一個就是一眾主流瀏覽器宣布要“休掉”flash（谷歌從2020年12月起將不再支持flash任何插件）；再其次從apple發(fā)布iPhone的時候，flash就已經(jīng)開始走下坡路，h5播放器在油管等網(wǎng)站開始興起，再加上h5在流暢度、穩(wěn)定性上都比flash要好一點，這就注定h5終將走上歷史的舞臺。

圖1 - 原生video播放器

圖1是原生的video標(biāo)簽，中未加任何修飾，包括原生屬性（但是這里瀏覽器自動帶上了controls，因此可以看到自帶的控制臺）。可以看到除了播放/暫停、進度/時長、調(diào)節(jié)音量、全屏以及沒什么用的菜單以外沒有任何功能，而且菜單中僅有的兩個功能就是“畫中畫”和“下載”，試問你用到的畫中畫功能多嗎？還是你作為網(wǎng)站創(chuàng)始人or視頻發(fā)布者希望任何人可以隨便下載視頻？（也不知道咋想的會出這功能）；而且！這時的video想要播放視頻就要指定src，但是你不能讓用戶F12或者給個input去填寫吧？最重要的是它的功能實在是太簡單了，根本不能滿足視頻網(wǎng)站的需求。什么是需求？來看看B站的功能。

圖2 - B站播放器

可以看到B站的播放器除了最基本的播放視頻以外，還有自定義的進度條（看到開那個小電視了嗎？圣誕節(jié)的時候變成了一頂帽子）；自定義的控制臺，能夠控制播放/暫停，音量、彈幕、設(shè)置菜單等等個性化功能，這些都是原生video沒有的功能。

圖3 - 自己開發(fā)的video，帶有彈出式播放列表

當(dāng)然，我們也可以根據(jù)自己的需求來進行相應(yīng)的開發(fā)，如圖3在右側(cè)增加了播放列表，可以通過點擊喚出/隱藏，并實現(xiàn)點擊相應(yīng)的視頻進行加載播放。

最后還有一個右鍵點擊事件，細(xì)心的小伙伴應(yīng)該發(fā)現(xiàn)了，在原生的video標(biāo)簽和B站的播放器上右鍵菜單是不一樣的，這就是默認(rèn)右鍵事件。從圖4、5可以看到兩者是完全不一樣的。那么這就是另一個有趣的知識點了——默認(rèn)事件。

圖4 - 原生video的右鍵事件

圖5 - B站的播放器右鍵事件

看完以上這些，小伙伴們是不是迫不及待的想要開發(fā)一款屬于自己的播放器了呢？別急，這里需要給大家回顧一些知識點：

一、此次系列專欄將基于jQuery/3.4.1進行開發(fā)，很少提及原生js，有些地方我會使用原生js進行標(biāo)注，后邊會慢慢放棄；此系列涉及HTML5、CSS3、JavaScript、jQuery（DOM操作、事件操作及AJAX等）。

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

區(qū)別：

·對于HTML元素本身就帶有的屬性，在處理時使用prop方法；

·對于HTML我們自己定義的DOM屬性，在處理時使用attr方法。

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

根據(jù)官方的建議：具有true和false兩個屬性的（如checked）使用prop，其余則使用attr

注意

對于表單元素的checked、selected、disabled等屬性，在jQuery 1.6之前，attr()獲取這些屬性的返回值為Boolean類型：如果被選中(或禁用)就返回true，否則返回false。但是從1.6開始，使用attr()獲取這些屬性的返回值為String類型，如果被選中(或禁用)就返回checked、selected或disabled，否則(即元素節(jié)點沒有該屬性)返回undefined。并且，在某些版本中，這些屬性值表示文檔加載時的初始狀態(tài)值，即使之后更改了這些元素的選中(或禁用)狀態(tài)，對應(yīng)的屬性值也不會發(fā)生改變。因此，在jQuery 1.6及以后版本中，請使用prop()函數(shù)來設(shè)置或獲取checked、selected、disabled等屬性。對于其它能夠用prop()實現(xiàn)的操作，也盡量使用prop()函數(shù)。

更多請關(guān)注：微博@概念云工作室

B站：概念云工作室

總結(jié)

以上是生活随笔為你收集整理的js获取video的时长_HTML5标签之lt;videogt;二次开发（一） — 为什么（后跟重要知识点！）...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。