整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一個開源的 HTML5 視頻播放器插件——MuiPlayer。
MuiPlayer 是一個開源的HTML5視頻播放插件，其默認配置了精美可操作的的播放控件，涉及了常用的播放場景，例如全屏播放、播放快進、循環播放、音量調節等功能。支持 mp4、m3u8、flv 等多種媒體格式播放，解決大部分兼容問題，同時適應在PC、手機端播放。
使用 npm 安裝：
npm i mui-player --save使用 yarn 安裝：
yarn add mui-player1 使用 script 標簽引入：
<!-- 引入基礎樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>
<!-- 引入基礎腳本 mui-player.min.js -->
<script type="text/javascript" src="js/mui-player.min.js"></script>
<!-- 指定播放器容器 -->
<div id="mui-player"></div>或者使用模塊管理器引入：
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'2 定義播放器容器
<div id="mui-player"></div>3 初始化構建播放器
// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個對象，該對象包括所有插件的配置
var mp = new MuiPlayer({
container:'#mui-player',
title:'標題',
src:'./static/media/media.mp4',
})以上就能為初始化構建一個具有默認配置控件的視頻播放器。
更多API基礎配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE
更多內容大家可自行前往閱讀。
開源地址：https://gitee.com/muiplayer/hello-muiplayer
第一步， 先關注我】
大家好， 我是胡侃侃。
相信絕大部分人心中最好用的瀏覽器是谷歌Chrome瀏覽器，它簡潔、快速、穩定、而且有著豐富的拓展插件。 然后我這里用了十幾年的Chrome吐血推薦Microsoft Edge 瀏覽器。
而且Microsoft Edge 瀏覽器本身是基于基于谷歌 Chromium 內核的全新瀏覽器，具有像Chrome 瀏覽器一樣的高效穩定的特點。 Microsoft Edge瀏覽器， 最大的優勢在于和系統深度整合， 還實現了Chrome賬號輕松同步。 Edge內置的網頁休眠功能同樣也是好用到起飛。 當然用Edge來替換掉手上的國產瀏覽器也是一個不錯的決定。
傳送門>>
本篇是基于Chrome和Edge瀏覽器的插件， 通過使用這些插件來提高瀏覽器的效率， 讓本身已經非常方便的瀏覽器， 更加強大和增加效率。 本文瀏覽器插件下載是以Edge瀏覽器為準， 在Chrome下面有同名的插件， 需要大家自己去搜索一下。 但Chrome因為Google被關閉訪問的問題， 所以有些插件獲得并沒有那么容易。
在Edge外接程序界面直接搜索和下載， 傳送門>>
下面我們來點評一下有哪些神級插件， 可以讓我們的工作效率得到翻倍提升吧。
一句話點評， ublock origin，比adblock功能更強，資源占用更低。
來自值友的@GN-001的點評，
ublock現在已經非吳下阿蒙了，adblock已經老已了，ublock的元素抓取比較麻煩，adblock方便點，但是adblock太臃腫了，大家打開第一個頁面ublock而可以，但adblock無法攔截!而且占用很高！我用adblock很久了后來出現這個問題，我就在群里問了下他們，他們叫我試試ublock后面就再也沒有換回去了！ublock的抓取元素是有問題的，多個元素在一起他不能一起抓只能一個一個，但他有個問題，他一次只能抓一個，你重新抓的時候他之前抓的就失效，不知道是我不會操作還是本來就有這個問題！adblock就完全沒有這個問題，adblock交互好點！易用點！
傳送門>>
傳送門>>
老牌廣告攔截器， 一款被稱為最佳廣告攔截的工具，在谷歌開發者商店有著破十億的下載量，可想而知它是多受歡迎的呢！Adblock的強項就是攔截過濾網頁廣告，無論是視頻廣告、橫幅廣告，還是彈窗廣告，它都能有效攔截。
AdBlock 是最好的廣告攔截工具，擁有超過 6500 萬用戶，同時也是最受歡迎的擴展程序之一，下載量已突破 3.5 億！
傳送門>>
Infinity New Tab Pro 讓你可以自定義你的新標簽頁. Infinity新標簽頁 (Pro) 將原生新標簽頁替換為您保存的書簽，并提供了多種快捷實用的功能。 自定義標簽頁，可以將網頁裝扮成類似安卓的應用，支持多種搜索引擎切換，支持切換各種精美壁紙，具有 數據備份同步功能。
谷歌很多功能現在都已經無法使用了， 我過去很多信息都保留在Gmail里面， 這里使用這個可以訪問google搜索，gmail，谷歌學術搜索等谷歌產品， 不包含Youtube 谷歌Drive。 傳送門>>
有人說： 如果一個瀏覽器沒有安裝油猴，那可以說是沒有靈魂的。油猴腳本與擴展的功能大致相同，都是賦予瀏覽器更多實用功能，但相比之下更加輕便。
在Microsoft Edge上面， 油猴叫做Tampermonkey。 最早是Mozilla Firefox的一個附加組件， 在FF上面叫Greasemonkey。它讓用戶安裝一些腳本使大部分HTML為主的網頁于用戶端直接改變得更方便易用。Greasemonkey可替網頁加入些新功能、修正網頁錯誤、組合來自不同網頁的數據、或者數繁不及備載的其他功能。寫的好的Greasemonkey腳本甚至可讓其輸出與被修改的頁面集成得天衣無縫，像是原本網頁里的一部分。
現在油猴也是一個跨瀏覽器的用戶腳本插件， 支持Edge，Chrome，FF等多種主流瀏覽器。
傳送門>>
安裝完成油猴以后， 可以看到瀏覽器右上角有一個油猴的圖標， 點擊圖標， 點擊獲得新腳本， 即來到了油猴的安裝腳本頁面。
我這里舉個例子， 我看微博， 只想看我關注過的人， 去除一些不需要的微博推薦， 這樣的過濾腳本， 在油猴里面叫做， Yet Another Weibo Filter。
我們來到了油猴腳本安裝頁面Greasy Fork， 可以直接點擊， 安裝此腳本。 也可以查看這個腳本被下載過多少次。
如上圖， 搜索， Yet Another Weibo Filter。
其實很多用戶， 和我一樣并不希望進入 GreasyFork，去手動查找用戶腳本，或者我根本就不知道這個網站是不是有可以優化的腳本。 那么下載這個Userscript+, 這個腳本可以自動發現適合當前網站的腳本。
暴力猴是一個開源的腳本管理器， 暴力猴是一款非常強大瀏覽器腳本的管理工具。暴力猴的使用要更加方便，而且同樣強大，通過安裝相應站點的腳本信息，我們可以更加方便的進行各類操作。例如：電影站點的解析、網盤的高速下載、資源搜索與下載、廣告屏蔽等等。 回頭我會仔細說說暴力猴和油猴。
值友點評：violent monkey易用性比tamper高多了。
傳送門>>
傳送門>>
值友@娜娜奇推薦： 目前用的crxMouse,也不知道是不是最優解。這個還支持超級拖拽。目前發現這個插件，如果在新建空白tab中和加載失敗的頁面中會鼠標手勢失效
也有值友推薦了smartUp手勢， 這個我沒有用過， 我也展現出來供大家參考。
傳送門>>
值友點評： lastpass安全性不如keepassxc，多機同步可以用網盤中轉，手機也一樣用
傳送門>>
傳送門>>
這個擴展可以讓你上網只記住一個密碼，便可以登錄所有需要密碼的網站。在安裝該擴展之后首次登錄需要密碼的網站時，擴展會自動記錄下你的密碼，下一次就不需要輸入了。雖然會記錄你的密碼，但這個擴展一定是安全的，所以不必擔心安全問題。
LastPass是免費的密碼管理器，跨平臺同步，自動登錄， 只需要記住一個賬戶密碼， 就可以管理所有賬戶密碼。 解決了密碼難記的問題。
風險提示： 銀行密碼重要信息密碼不要交給他管理， 另外這個只有密碼提示， 無法找回密碼。
同樣的一個密碼管理器
傳送門>>
工具很強大，支持的筆記很多，支持ervernote, onenote, 語雀，為知等所有主流筆記，支持markdown，支持圖床，體驗絕對比原版的好。傳送門>>
傳送門>>
印象筆記·剪藏(Evernote Web Clipper)， 使用印象筆記·剪藏擴展程序一鍵保存精彩網頁內容到印象筆記帳戶，不用復制粘貼編輯再整理，信息收集快人一步。看見什么，「剪」什么。 調研好幫手，剪藏任意文章或網頁， 保存到指定筆記本，并添加網頁， 用印象筆記同步到任意設備， 搭建個人知識庫。
傳送門>>
免費的筆記管理軟件和印象筆記·剪藏一樣的功能，可以保持網頁內容至OneNote，OneNote為Win10系統自帶office軟件。
官方出品的瀏覽器主題皮膚， 使用全新瀏覽器主題個性化設置 Microsoft Edge，此主題的靈感源自 Master Chief 在神秘的外星人環形世界(稱為 Halo)中的歷險經歷。此主題更改了瀏覽器和新標簽頁的外觀，營造出靈感源自游戲的精美而又引入入勝的視覺體驗。你還可以將不同主題應用至各個個人資料，以便輕松區分家庭、學校或工作。傳送門>>
傳送門>>
該插件可以幫助用戶在打印網頁或者PDF文件之前對打印的內容進行調整，比如調節打印的字體大小、去除打印頁面中的所有圖片、刪除網頁中的廣告、刪除多余的文字等方便的自定義打印的功能。
傳送門>>
優秀的截圖插件, 可以捕獲任何網頁的全部或部分。添加注釋，評論，模糊敏感信息，以及一鍵上傳。
傳送門>>
圖片助手(ImageAssistant)是一款運行于chromium(chrome環境下開發)及其衍生瀏覽器(如：360安全瀏覽器、360極速瀏覽器、獵豹瀏覽器、百度瀏覽器、UC瀏覽器等)提供分析、提取網頁中的圖片并以多種篩選方式輔助用戶選取下載等功能的瀏覽器擴展軟件。
傳送門>>
是否看到網頁、微博上的視頻很想保存留念或使用， 這個插件一鍵下載網頁中的視頻
傳送門>>
使用更純凈的百度 1.屏蔽百度廣告推廣 2.阻止百度追蹤 3.去除百度資訊與熱榜。
這篇文章總結了前面幾篇關于Edge瀏覽器經驗的合集， 每一個都是本人自己嘗試過無數次以后的經驗總結，分享給大家，
收藏不等于會了。
收藏不等于會了。
收藏不等于會了。
收藏是點贊的十倍， 為什么， 同學們！
這么養眼的文章難道不點贊嗎？ 點贊美三代， 關注富一生！
更多的內容歡迎關注我的個人號來查找，這樣也方便交流。
全文完~~
里云播放器SDK（ApsaraVideo for Player SDK）是阿里視頻云端到云到端服務的重要一環，除了支持點播和直播的基礎播放功能外，還深度融合視頻云業務，支持視頻的加密播放、安全下載、首屏秒開、低延時等業務場景，為用戶提供簡單、快速、安全、穩定的視頻播放服務。本文銜接上文，詳細介紹web播放器的功能及實現。
播放器架構
Aliplayer Web播放器分為H5和Flash兩個，Flash播放器隨著技術的發展會逐漸被邊緣化，所以我們以后只做維護，不會更新功能了，重點會放在H5播放器上。H5播放器架構主要分四層，底層H5 Video，播放能力和H5原生Video緊密相關。第二層是基礎播放器，它不依賴于具體業務，通過URL的方式來播放。第三層是為各種業務場景準備的不同的播放器，可以很容易的擴展，相互隔離不依賴。最上面一層是適配的播放器，會根據終端類型、瀏覽器類型、播放格式和用戶指定來進行智能適配。
播放器功能
最近，我們在播放器端上也實現了截圖、國際化、變速、UI自定義、微信同層播放、自適應播放、加密播放、H5播放flv、自定義插件等功能。后續，我們還會通過插件的形式實現彈幕、廣告等功能，并會開源到github上，也會支持用戶根據自己業務需求來自定義SDK包。
播放器支持視頻格式
適配播放
我們整個視頻播放的基本原則是H5優先，能用H5播放的肯定不用Flash去播放。所以在移動端，我們肯定是用H5來播放的，PC端也依照這個原則盡量使用H5。同時，我們會判斷瀏覽器類型支持哪種播放格式，比如m3u8在PC端IE11以上的瀏覽器才能播放，如果遇到IE11以下的瀏覽器，我們自動會選擇Flash播放。在視頻格式方面，假設視頻是rtmp和flv，我們會自動選擇Flash播放。另外，如果用戶自主設置useH5Prism和useFlashPrism屬性，那我們也會依照用戶的選擇。
瀏覽器支持情況
FLASH支持IE8以上，在瀏覽器上啟動允許FLASH運行即可；H5支持IE9以上，m3u8需要在IE11以上才可以運行；其他瀏覽器都也都是可以支持的。
兩種播放方式
source，通過url 去播放
通過點播vid+playauth去播放，第二種方式和視頻云結合比較緊密
點播播放格式的選擇
點播服務中轉碼生成的視頻格式有很多，包括m3u8、flv、mp4等。播放器有自己的一套邏輯去選擇播放格式。對于H5來說，默認播放低清版本來節省流量，如果用戶使用了切換清晰度的功能，那我們會默認打開他選擇的版本。格式方面，則默認播放mp4，用戶也可以設置qualitySort來優先播放高清的的版本。對于Flash來說，默認格式順序是m3u8、flv、mp4。
創建播放器
引用正確的JS和CSS文件
添加播放器容器 需要設置容器的id屬性，另外2.0.1之前的版本要添加prism-player類型。
New Aliplayer創建播放
在線配置，用戶可以預先體驗下播放器的情況
Aliplayer-Cli創建演示例子
用戶需要演示例子的時候，不需要寫很多代碼，通過這個命令，就可以創建例子，直接體驗AliPlayer。
PC端支持m3u8
播放域名啟用允許跨域訪問
訂閱和取消事件
清晰度切換
H5 1.9.9以后的版本和id+playauth播放方式才支持清晰度切換；支持記憶選擇的清晰度，當選擇的清晰度不能播放時，自動選擇下一個清晰度播放。
手動切換視頻-H5
這個功能播放器內比較常見。我們把它分成兩種情況去處理，如果是地址播放，我們通過loadByUrl來播放；如果是vid+playauth播放，我們通過replayByVidAndPlayAuth的方法來播放。
手動切換視頻-flash
地址播放方法與H5的方法一樣，vid+playauth播放則需要先銷毀播放器，再重新創建播放。
不同地址格式的切換
只能先銷毀播放器，再重新選擇正確的播放器播放。Github地址看simple demo：https://github.com/alilmq/aliplayer-simple-demo
![b_3_7]
UI自定義
很多用戶有這個需求，所以我們的UI是可以隱藏掉的。提供了一個skinLayout的屬性，當這個屬性沒有指定值的時候，UI組件是全部顯示。如果是空數組的時候，UI組件全部不顯示。并且可以自定義組件的顯示和位置，在默認UI基礎上去裁剪，2.3.0版本以后，用戶也可以通過自定義插件的方式自定義自己的UI。
截屏
H5啟用:
FLASH啟用：snapshot:true
H5播放器，播放域名需添加允許跨域訪問的header
支持訂閱snapshoted事件，獲取截屏的時間點和數據：
支持設置截圖的大小和質量：
支持添加文字水印：
邊轉變播功能
邊轉邊播是MTS的功能，播放器可以支持這種場景的播放。第一次觀看的時候調用MTS API啟動轉碼，邊轉碼邊播放，而且可以設置延遲播放。轉碼中使用直播播放器，轉碼完成后使用點播方式播放。
H5 android微信同層播放
因為H5在android端微信打開時，會自動全屏播放，覆蓋Dom元素。
同層播放一般有兩種業務場景，一種是點播的，視頻在某個地方播放，下面的評論、播放列表等,demo地址：https://github.com/alilmq/h5demo
還要一種場景是直播場景，視頻需要全屏。可以通過設置x5_type:h5啟用同層播放。Demo 地址：https://github.com/alilmq/h5livedemo
另外H5微信同層播放，有兩篇文章可以參考:
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
http://player.alicdn.com/aliplayer/docs/blogs/how-to-handle-h5-same-layer.html
國際化
提供language屬性，用于啟用各種語言，默認為zh-cn，可選值為zh-cn or en-us。
倍速播放
提供UI的版本，只提供了0.5、1、1.5、2四種倍速播放；而setspeed方法，可以隨意設置倍速播放。這個可能會有一些限制，移動端有的瀏覽器會不支持，比如android微信。
對于直播播放失敗的處理
在播放失敗時候，會嘗試重新播放，觸發onM3u8Retry事件，事件里可以做一些提示，比如主播離開請稍等；如果幾次嘗試后還是失敗，會出發livestreamstop事件，事件里做一些直播失敗或結束的提示。
我們也做了一些輔助工具，方便用戶去接入和排查問題。
診斷工具
通過錯誤碼描述的映射關系，大概能知道用戶的錯誤所在；
通過vid知道用戶播放的是哪個視頻；
通過uuid這個唯一標識，可以在日志系統中查到用戶的播放狀態；
通過requestid和播放時間，可以定位到用戶的錯誤是哪次播放的錯誤和具體的播放時間。
這里還有一個診斷的功能，可以知道用戶環境的具體信息，省去手工獲取視頻的繁瑣，可以快速診斷問題。
地址：http://player.alicdn.com/detection.html
檢測工具
關于視頻播放失敗，我們提供了三種方式，原生H5、阿里云H5、阿里云Flash。我們把播放的日志調出來，通過日志來情況來判斷播放失敗的原因。舉個例子，如果用戶剛開始請求數據時就失敗的話，那我們會猜測存在鑒權失敗的情況；如果加載數據出錯，那可能是用戶的網絡的原因；如果是開始播放后出錯，可能就問題就出在解析或播放器不支持等方面。
ffmpeg查看視頻信息
有的用戶只有畫面，沒有聲音。我們可以通過ffmpeg可以看下視頻的格式、流的情況、碼率、幀率等。
最后，阿里云播放器的所有情況都聚合在以下的網站上：
http://player.alicdn.com/detection.html，其中包括幫助文檔、在線配置、診斷工具、產品demo等，大家可以登錄了解詳情。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
