25.6k star！一款開源、簡單、輕量級的視頻播

25.6k star！一款開源、簡單、輕量級的視頻播放插件

天給大家介紹一款非常好用的開源視頻播放器插件——plyr。它因為簡單、輕量級、可訪問和可定制化，受到了廣大開發(fā)者的喜愛，已經在GitHub上標星25.6k。

特征

無障礙- 全面支持 VTT 字幕和屏幕閱讀器
可定制- 使用您想要的標記使播放器看起來如您所愿
干凈的 HTML - 使用正確的元素。
響應式- 適用于任何屏幕尺寸
流媒體- 支持 hls.js、Shaka 和 dash.js 流媒體播放
API - 通過標準化 API 切換播放、音量、搜索等
全屏- 支持原生全屏，并可恢復至“全窗口”模式
快捷方式- 支持鍵盤快捷鍵
畫中畫- 支持畫中畫模式
Playsinline-支持playsinline屬性
速度控制——隨時調整速度
多字幕- 支持多字幕軌道
i18n 支持- 支持控件的國際化
預覽縮略圖- 支持顯示預覽縮略圖
無需框架- 使用“原始”ES6 JavaScript 編寫，無需 jQuery

使用

先需要引入plyr的CDN文件：

<script src="https://cdn.plyr.io/3.6.12/plyr.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.12/plyr.css" />

然后，在HTML頁面中添加如下的視頻標簽，即可使用plyr進行視頻播放：

<video id="player" playsinline controls data-poster="/path/to/poster.jpg">
  <source src="/path/to/video.mp4" type="video/mp4" />
  <source src="/path/to/video.webm" type="video/webm" />

  <!-- Captions are optional -->
  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
</video>

除此之外，還可以根據自己的需求進行額外的配置。下面是一些常用的配置項：

settings: ['captions', 'quality', 'speed', 'loop'], // 配置顯示的設置項
i18n: {...}, // 用于UI的國際化
volume: 1, // 播放器初始音量，范圍是0-1
speed: {
  selected: 1,
  options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
}, // 播放速度的配置
quality: {
  default: 576,
  options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
}, // 分辨率的配置

更多的配置項和使用方法可以參考plyr的官方文檔。

界面截圖

預進度

畫中畫

開源地址

https://github.com/sampotts/plyr

eat Video是一款專業(yè)降噪插件，它可以幫助用戶輕松實現(xiàn)視頻轉場效果的編輯和優(yōu)化。

該插件可通過消除視頻中的噪點和雜質，提高畫質的清晰度和細節(jié)，使轉場效果更加流暢和自然。Neat Video提供了強大的噪聲分析和降噪算法，可智能檢測并減少視頻中的各種噪點類型，包括高ISO噪點、攝像機噪點、色彩噪點等，從而提供更好的視頻品質。此外，Neat Video還提供了豐富的參數(shù)設置和預設，用戶可以根據自己的需要調整和優(yōu)化轉場效果，使其更符合個人的創(chuàng)意和審美。無論是制作專業(yè)的電影、廣告還是個人的視頻作品，Neat Video都是一個強大而實用的PR轉場插件，它可以大大提高視頻的質量和觀看體驗。

Neat Video 是一款視頻降噪插件，可以幫助用戶去除視頻中的噪點和顆粒。

Neat Video下載：//shipinzhizuodashu.com/5995.html

以下是使用 Neat Video 插件的步驟：

安裝插件：將 Neat Video 插件文件復制到適當?shù)牟寮夸浿校ɡ?Adobe Premiere 的插件文件夾）。
打開視頻編輯軟件：啟動您的視頻編輯軟件，例如 Adobe Premiere Pro。
導入視頻：將需要降噪的視頻文件導入到您的項目中。
創(chuàng)建 Neat Video 特效：在編輯軟件的特效面板中，找到 Neat Video 插件，并將其拖放到視頻剪輯上。
打開 Neat Video 控制面板：在編輯軟件中選擇 Neat Video 特效，并打開其控制面板。
分析噪點：在 Neat Video 控制面板中，點擊“Auto Profile”按鈕，插件將自動分析視頻幀來確定噪點的特征。
調整設置：根據您的需要，您可以在 Neat Video 控制面板中調整降噪的強度、細節(jié)保留以及其他參數(shù)。
渲染視頻：點擊應用或渲染按鈕，Neat Video 將開始在視頻上應用降噪效果。
預覽效果：您可以在編輯軟件中預覽 Neat Video 的降噪效果，以確保滿意。
導出視頻：完成編輯后，導出您的視頻文件，Neat Video 的降噪效果將被應用到最終輸出中。

請注意，Neat Video 插件可能在不同的視頻編輯軟件中使用方法有所不同，上述步驟僅作為基本指導。

言

相信很多人都在使用 Chrome 瀏覽器，其流暢的瀏覽體驗得到了不少用戶的偏愛，但流暢只是一方面， Chrome 最大的優(yōu)勢還是其支持眾多強大好用的擴展程序（Extensions）。

最近為了更好的利用谷歌瀏覽器，博主整理了一些常用的谷歌插件，分享給大家，考慮到一些無法翻墻的童鞋，給力的博主當然是順便給出離線安裝文件。

正文

閑話不多說，直接上推薦的插件，可以翻墻的直接點擊標題跳轉谷歌商店下載，不信的我下面也給出離線安裝文件。

通用類插件

1、OneTab：將無數(shù) Tab 合并在一個頁面

很多時候我們在一個窗口打開太多的tab，每一個tab太小不容易管理，這時候使用OneTab能夠把所有tab收起放在一個頁面，點擊就可打開該tab，非常方便。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237428194

2、Momentum：美到爆表的新標簽頁

受夠了新建頁面時候的空白頁的話可以試試，Momentum每天都會提供一張高清大圖，都很好看。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237426016

3、markdown here

超好用的一款插件，強烈推薦！！有個它再也不用擔心編輯器不支持markdown語法了，寫好以后直接一鍵轉換。而且也是一個跨平臺神器，比如我們可以把簡書寫好的文章（帶md語法）直接復制到微信公眾號，然后一鍵轉換，格式幾乎無變化！

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237430000

4、Adblock Plus：免除廣告困擾

只要是使用 Chrome 的人都應該安裝的一款擴展應用，可以幫助你屏蔽幾乎大部分網頁廣告，如果存在漏網之魚，還可以手動添加到屏蔽列。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237412331

5、LastPass：密碼管理軟件

LastPass，全球知名在線密碼管理工具之一，采用軍事級加密算法，支持自動填充網站用戶名和密碼，與朋友分享登錄信息等實用功能，且在全平臺同步免費，無需訂閱 Premium，即可在手機、網頁、電腦端同步你的所有 LastPass 信息。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429060

6、關燈看視頻

有時候網速太差，全屏以后分辨率很低，可以試試這個，可以讓周圍頁面變暗從而達到最好的視覺效果。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237427954

7、二維碼(QR碼)生成器

在線的二維碼生成器。可以把當前的網頁直接生成二維碼，進行編輯。還可以把文字生成二維碼，這個很重要！

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237430273

8、下載+

Chrome的下載管理在二級菜單里，進去很不方便。裝了這個插件就可以直接看和管理，很好用。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237427303

9、一鍵管理所有擴展

Chrome其實很占內存，尤其當插件裝多了以后會卡頓。不過有個這個就不用擔心，用不到的時候把插件關掉就行了，隨時開隨時關。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237427408

10、購物黨

在線的比價工具，網購的時候可以看價格歷史記錄，以及各大網站的價格對比，也有查快遞的快捷方式。經常剁手的童鞋要注意了~~

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237427693

11、右鍵搜

Chrome默認的搜索是谷歌搜索，沒有翻墻的童鞋可能用起來不方便，但有這個這個就不用擔心了。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237427843

12、印象筆記剪藏

大象官方的一個插件，可以直接把當前網頁直接保存的evernote，非常方便。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429322

13、AlloyDesigner

AlloyDesigner是來自Tencent AlloyTeam的前端開發(fā)工具，其只出現(xiàn)開發(fā)階段的一定時期，可以在制作時期，也可以在開發(fā)測試期，旨在提高前端開發(fā)的效率，獲得更加便捷的開發(fā)體驗。AlloyDesigner的主要功能是加載Web頁面的視覺稿，結合開發(fā)者工具(F12)進行頁面的開發(fā)和調整。使用AlloyDesigner進行頁面開發(fā)，基本上可以舍棄Photoshop進行頁面的測量，以視覺稿做為背景藍本進行開發(fā)，可以使開發(fā)體驗更加便捷、高效，其結果頁面也更高。AlloyDesigner也可以做為頁面開發(fā)完成后，對頁面進行細微調整，達到更加貼近視覺稿的目的。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237430320

14、新浪微博圖床

簡單好用的新浪微博圖床,支持選擇/拖拽/粘貼上傳圖片,并生成圖片地址,HTML,UBB和Markdown等格式,支持瀏覽和刪除歷史記錄。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237430064

15、Cloudbleed Bookmark Checker：檢測書簽是否有死鏈

對于書簽收藏的狂魔同志，收藏夾里的網頁肯定有很多都無法訪問了吧！這款擴展就是來檢測書簽是否有死鏈的。因為不怎么常用，所以才三顆星。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429807

16、Infinity：功能強大的新建標簽頁擴展

功能強大的新建標簽頁擴展！做的界面很美，每日壁紙質量也很高！有同步筆記、代辦事項等，同時，喜歡它的網頁圖標，提供了很多常用網站的圖標，自定義書簽時很好看~唯一的缺點，就是感覺啟動比較慢~

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429572

17、crxMouse Chrome Gestures

對于國產瀏覽器自帶鼠標手勢的功能，真覺得很方便！這款擴展也是必裝啊！

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429513

18、Imagus

圖片放大鏡的功能！在體驗了360瀏覽器、獵豹瀏覽器之后，特地去找的擴展！微博黨的利器！這個不管能鼠標懸停放大圖片，同時，對鏈接等也有預覽。提供很多功能選項進行設置。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429468

19、Save to Pocket

看到感興趣的先收藏著，然后走哪兒都能看，因為它提供了全平臺的APP，方便管理。Pocket也是手機端我必裝的APP之一。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429417

20、網頁截圖:注釋&批注

在安裝了一堆截圖擴展之后，最后剩下了它，滿足了截圖所有的需求，截取可見網頁，選擇區(qū)域，整個網頁，另外，還有對截圖的標記

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429237

21、眼不見心不煩（新浪微博）

Chrome就是滿分評價，可見這擴展真是良心擴展啊！微博黨的福音！在瀏覽器端，自己通過這個插件進行設置，可以將熱門微博、會員推廣等等內容窗口都給屏蔽了！還我們一個干凈、舒服的微博環(huán)境！推薦！！！

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237428838

22、Image Downloader Chrome

下載頁面圖片的工具，很棒

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237421737

23、WhatRuns

WhatRuns是一款用于了解網站技術的chrome網站技術分析工具，主要能通過分析網站頁面所使用的框架、代碼等技術以及頁面所使用的樣式等方面，讓使用者能直觀的了解網站的整體技術信息。在安裝了這款插件后，使用者可以通過點擊WhatRuns圖標來打開插件窗口，通過該窗口使用者可以輕松了解網站的技術信息

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237421488

24、Google翻譯

Google翻譯是一款由谷歌公司提供的網頁劃詞翻譯插件，是Google Chrome的翻譯擴展工具，由Google官方發(fā)布。安裝后，會在Chrome瀏覽器菜單欄中添加一個按鈕，可以方便的在任何時候點擊翻譯你當前正在訪問的頁面。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237419781

25、FireShot 任意方式截取網頁的截圖插件

捕捉網頁截圖，編輯并將它們保存為PDF，JPEG，GIF，PNG或BMP；上傳，打印，在Photoshop中打開，復制到剪貼板或電子郵件

離線版下載地址：

https://u14797164.pipipan.com/dir/14797164-26887957-b5742f/

26、Lucidchart Diagrams - Desktop：在線繪制多種圖表

這個擴展程序是一款多功能繪制程序，支持繪制流程圖，思維導圖，版面設計等，并且有在線和離線兩種模式，可謂功能強大。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238588636

27、Trackr：追蹤你的上網習慣

這個擴展程序做的事情就是記錄你使用 Chrome 上網的習慣，包括上了哪些網站、每個網站呆多長時間，并且還用圖表的形式反饋出來，總之裝了這個擴展程序就不要上奇奇怪怪的網站了。

離線版下載地址：https://u14797164.pipipan.com/fs/14797164-238588363

28、Reader View：Chrome 也有 Safari 的閱讀模式

將網頁轉換成 Safari 閱讀模式的樣式，讓你更方便舒適的閱讀網頁文字，當你訪問文章網頁的時候，擴展程序的按鈕會顯示在地址欄末端，點擊就能輕松享受更好的閱讀模式。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238588468

29、DrumUp：個性化的瀏覽推薦

當你打開一個網頁的時候，為您推薦與現(xiàn)在瀏覽的網頁內容相似或者相關的內容，對于英文的支持比較好，每天閱讀很多的人能找到很多關聯(lián)的感興趣內容。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238588751

30、Mainichi：學習日語，每頁一詞

學習日語的新方式，每當你打開一個新標簽頁對會顯示一個日文單詞，并且配有一張簡潔的圖片、假名及其讀音，不知道有多少朋友在學習日語呢？

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238589647

31、New Tab Startup Quotes：學習成功人士的格言

想學習成功人士的精神和智慧，這個擴展程序可以幫到你

，每當你打開一個標簽頁，它都會顯示一位成功人士的格言，不得不說熬得一鍋好雞湯。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238590300

32、Unsplash Instant

每次打開一個新標簽頁都會顯示一張來自 Unsplash 的攝影作品，全高清的分辨率和專業(yè)的攝影元素，Unsplash 的作品都是滿滿的文藝范兒，非常適合文藝青年。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238590385

33、Search by Image：強大的以圖搜圖

Chrome 又一神器，結合 Google 以圖搜圖，可以快速讓你找到一張圖片的來源、其他尺寸、或者尋找到相似的圖片，畢竟在搜索方面，還是 Google 做的最好。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238590409

33、Instapaper：稍后閱讀神器

全球兩大稍后閱讀神器之一 (另外一款為 Pocket)，自從被 Pinterest 收購后，Instapaper 所有高級訂閱功能完全免費，令人稱道！

當你對某個網頁內容感興趣，卻沒時間馬上閱讀，點擊 Instapaper 圖標或使用快捷鍵 (Cmd+Shift+S)，一鍵保存至 Instapaper，方便你隨時隨地進行查看。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238590481

34、為什么你們就是不能加個空格呢

每次看到文章中的英文、數(shù)字、中文寫在一起，你知道我的內心是什么樣嗎？

你們能不能在它們之間加個空格呢？！不過自從裝上了「為什么你們就是不能加個空格呢？」，插件會自動把網頁中所有中文、英文、數(shù)字、符號之間插入一個空格，從此告別此痛苦，又能和大家好好玩耍啦。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238590634

35、Clear Cache

點擊圖標即可清除緩存、cookie等，開發(fā)必備！

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429862

開發(fā)類插件

36、JSON Viewer

JSONView 是一個方便查看 Json 結構的插件，展開，折疊，可以非常方便的查看接口返回數(shù)據。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238591310

37、Postman

相信開發(fā)者朋友一定知道這款插件，這是一款強大的 API & HTTP 請求調試工具，它不僅可以調試簡單的 HTML、CSS 以及腳本等簡單的網頁基本信息，這款 Chrome 插件甚至還能發(fā)送幾乎所有的 HTTP 請求，可謂是 Web 開發(fā)者的一大利器。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237420917

38、Octotree

github上查看代碼的時候總是一層層進入再出來，有點麻煩，沒關系，有Octotree。安裝Octotree之后，瀏覽托管在Github上的項目，可看到左側的樹形結構，更方便查看代碼。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238591356

39、Vimium

Vimium 這個名字其實是 Vim 和 Chromium 的合體。可能很多童鞋已經猜到她是干嘛的了，她繼承了Vim的常用操作，完全脫離鼠標來控制瀏覽器，是一款黑客級別的Chrome插件。對熟悉linux的同學來說，簡直是神器。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237429953

40、Tampermonkey

俗稱‘油猴子’，是一款功能非常強大的插件，他包含：方便的腳本管理、腳本概覽、設置多樣性、腳本自動更新、安全、兼容性、Chrome 同步、CodeMirror 編輯器、JSHint 語法檢查、快速開發(fā)、卸載等功能。其官方描述只一句 The world’s most popular userscript manager。足見其優(yōu)秀。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-238591505

41、Code Cola

Code Cola是一個可視化編輯在線頁面css樣式的chrome插件。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237430108

42、WEB前端助手

FE助手：包括字符串編解碼、圖片base64編碼、代碼壓縮、美化、JSON格式化、正則表達式、時間轉換工具、二維碼生成器、編碼規(guī)范檢測、頁面性能檢測、柵格檢測、JS運行效率分析等。

離線版下載地址：

https://u14797164.pipipan.com/fs/14797164-237430197

來源：http://tengj.top/2018/02/17/ggcj/

在線咨詢

上一篇：JavaScript學習 - Hex編碼
下一篇：基于Springboot+freemarker+My

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

25.6k star！一款開源、簡單、輕量級的視頻播

特征

使用

界面截圖

開源地址

言

正文

您的項目需求