說起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站：概念云工作室

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。