整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
開源精選》是我們分享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
近日，第四屆HTML5峰會在北京國際會議中心拉開序幕，云適配攜其“HTML5跨屏前端框架Amaze UI”高調亮相，并在大會上了做了《組件化-Web前端開發的未來趨勢》的重要演講。
HTML5跨屏前端框架Amaze UI受到了廣大程序員喜愛
組件化是Web開發的未來趨勢
Web組件化（WebComponents）理念，自Google在2013年的I/O大會上提及起，一直都有開發者關注這一開發技術的發展，只是總處于不慍不火的狀態。直至去年HTML5規范的正式定稿，Web開發也隨之異常火爆，讓Web組件化的關注度也隨之水漲船高，從今年的HTML5峰會吸引了8000多HTML5的愛好者、開發者來參會就能略見一斑。
據云適配創始人兼CEO陳本峰介紹，組件的技術標準在前端一直都是缺失的，直到Google提出以后，才有了Web Components標準。在此之前，大家都不知道怎么去封裝一個組件。Web組件化其實一直都被國外互聯網公司看好，因為從軟件架構上、開發效率上、代碼可維護性上都是一個更好的選擇。但因為Web Component標準還未正式定稿，所以Amaze UI 選擇Facebook React 作為 Web組件封裝標準，并遵循React所推崇的“一切皆組件”的組件化理念，實現從小到一個按鈕，大到一個頁面，甚至一個完整App都可以組件化。
Amaze UI是云適配在其開發過程中把積累的包括菜單、輪播圖等在內的大量針對手機端的UI控件組件化后開源出來形成的，通過拆分、封裝了一些常用的網頁組件，開發者只需復制代碼便可將這些跨屏組件寫入到自己的應用中。在過去的一年里，Amaze UI以開源的形式提供了包含16個 CSS 組件、26個 JS 組件，更有20款包含近 60 個主題的 Web 組件, 此外，針對國內主流瀏覽器及 App 內置瀏覽器提供了更好的兼容性支持并接入了更多本土化的因素幫助解決中文排版問題，使開發者不需要再花費時間精力去編寫日歷等的代碼，便可以直接引用組件。
正是因為如此，自2014年8月份正式上線后，Amaze UI就受到了眾多前端工程師的喜愛，經歷短短的1年的產品迭代，吸引了超過25萬開發者的加入，同時，Amaze UI 在 GitHub 上的星級關注突破了5000，基本上是國內開源軟件增長最快的一個了。
Amaze UI的下一步計劃
講到Amaze UI的優勢，陳本峰認為最大的優勢就是積累，第一，云適配在Web Components上積累了很多經驗，以及組件數量；第二，云適配積累了對各種設備、瀏覽器的兼容性和適配性，這點是真的要靠點滴累積的，別人很難去超越。第三，Amaze UI是一個開源框架，這也算是一個優勢，就像一個社區，開發者肯定會挑最大的框架使用，因為在使用中遇到問題的話，只要在網上搜索就能找到答案，而選擇新框架的話，碰到問題也不容易找到幫助。
從目前互聯網的大局勢發展來看，PC互聯網正在向移動互聯網急速地轉移，開發者急需能夠解決重復繁復的跨屏、適配問題，讓PC網站、新建的網站或者移動應用更好地適應移動端的前端開源技術，但限于技術門檻和開源環境的不成熟，市場上解決跨屏適配問題的開源項目卻基本上寥寥無幾。
開源的HTML5跨屏前端框架Amaze UI恰逢其時。據介紹，除了提供基于HTML5的前端跨屏組件外， Amaze UI 將在后續的開發工作中，還將陸續推出Amaze UI for App、Amaze UI組件市場等更多提高開發效率的工具；同時，隨著Amaze UI產品的不斷豐富、功能完善及開發者數量急劇增多及相應的需求增多，AmazeUI也將推出社區方式運營，從而與開發建立更高效的溝通渠道，及時獲得開發者需求及反饋，從而以更專業的方式來服務開發者。
據悉，Amaze UI for App是一個只針對移動端的版本，它的開發是為了滿足多種應用場景，讓移動應用開發者們用Amaze UI開發出接近于原生的HTML5移動應用：
1)?????? 開發原生 App，需要快速出代碼級別的交互原型。
2)?????? 移動營銷快速搭建移動站點
3)?????? 基于BaaS 或者第三方 API，做一個有趣的應用，不需要后端；
4)?????? Hybrid App，不可能把一個臃腫、低效的響應式的網站打包進 App；
著HTML5開發的火熱，如今國內各行業都開始進入HTML5領域，搶占紅利，造就了職場新貴，HTML5開發成了一輪企業熱招崗位。初學HTML5你并不需要任何的原生應用編程經驗，你只需要一些HTML、CSS和JavaScript的知識。不可否認HTML5將會越來越好，因為移動端的硬件也會越來越強，其實你手機上的很多應用已經悄悄的使用混合式開發了，這也許就是HTML5的魅力所在吧。
目前已經有很多的框架可以幫助你開發跨平臺的移動應用，在這篇文章中，千鋒武漢HTML5培訓的老師只介紹最牛的7個HTML5移動開發框架。
1、IONIC
IONIC是目前最有潛力的一款HTML5手機應用開發框架。通過SASS構建應用程序，它提供了很多UI組件來幫助開發者開發強大的應用。它使用JavaScript MVVM框架和 AngularJS來增強應用。提供數據的雙向綁定，使用它成為Web和移動開發者的共同選擇。即將發布的AngularJS 2.0將會專注于移動開發，相信IONIC一定會取得不錯的成就。
IONIC的開發團隊將盡快開發出一種通過IONIC creator提供開發者快速創建IONIC應用的方式。我們將很快就會看到一個支持拖拉功能的可視化開發工具，幾分鐘內開發一個app將成為可能。
2、Mobile Angular UI
Mobile Angular UI是使用bootstrap 3和AngularJS的響應式移動開發HTML5框架。
Mobile Angular UI的關鍵字有：
Bootstrap 3
AngularJS
Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。
AngularJS modules，比如 angular-route, angular-touch 和 angular-animate
響應式媒體查詢是將bootstrap作為單獨的文件，你只需要包含你所需要的東西。Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過一些AngularJS指令創建友好的用戶體驗。
詳細了解可以看一看the Mobile Angular UI demo page，上面有Mobile Angular UI的實踐，如果你想了解的更深入一些，我建議你讀一讀 getting started with Mobile Angular UI。
3、Intel XDK
Intel XDK 是Inter開發的一款跨平臺開發工具，我們可以很容易的通過Intel XDK開發應用，你需要做的只是下載他們的應用開發工具，有Linux、Windows和Mac版，它還提供了很多個開發框架，比如Twitter bootstrap， jQuery Mobile和Topcoat。
4、AppceleratorTitanium
Appcelerator’s Titanium不同于其它框架的是，它是一個開源的框架。
Titanium是混合式移動應用開發的一站式解決方案，你只需要下載Titanium studio就可以解決所有的事情，Titanium SDK包含了很多手機平臺的APIs和后端云服務。
Titanium使用 Alloy，Alloy是一個快速開發的手機應用MVC框架，模塊式開發可以大大減小開發時間，提高代碼復用。
Titanium studio 還提供了一些code模板。
5、Sencha Touch
Sencha Touch同樣也是HTML5手機應用跨平臺開發框架，運行iOS/Android/Blackberry。它已經誕生很多年了，現在已經成為很常用的混合式編程開發框架。
Sencha Touch可以讓你的Web App看起來像Native App。美麗的用戶界面組件和豐富的數據管理，全部基于最新的HTML5和CSS3的 WEB標準，全面兼容Android和Apple iOS設備。
下面是千鋒武漢HTML5培訓的老師總結出的幾點特性：
基于最新的WEB標準——HTML5，CSS3，JavaScript。整個庫在壓縮和gzip后大約80KB，通過禁用一些組件還會使它更小。
支持世界上最好的設備。Beta版兼容Android和iOS，Android上的開發人員還可以使用一些專為Android定制的主題。
增強的觸摸事件。在touchstart、touchend等標準事件基礎上，增加了一組自定義事件數據集成，如tap、swipe、pinch、rotate等。
數據集成。提供了強大的數據包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲。
6、Kendo UI
Telerik’s Kendo UI 是一個強大的框架用于快速HTML5 UI開發。基于最新的HTML5、CSS3和JavaScript標準。
Kendo UI包含了開發現代JavaScript開發所需要的所有一切，包括：強大的數據源，通用的拖拉(Drag-and-Drop)功能，模板，和UI控件。
7、PhoneGap
PhoneGap 恐怕是最老的一個框架了，相信很多人都已經聽說過甚至使用過它，但是PhoneGap是基于開源的 Cordova 商業版本。
第一段PhoneGap代碼是在2008年8月的iPhoneDevCamp上寫成的。創建它的一個主要動力是基于一個幾乎每一個單獨的iPhone開發新手都要面對的簡單事實：Objective-C是一個對Web開發人員來說非常陌生的環境，并且Web開發人員的數量遠遠多于Objective-C開發人員的數量。
問題是，是否有人可以開發一個框架，讓Web開發人員可以利用他們所有的HTML、CSS和JavaScript知識，而且仍舊可以同iPhone的重要本地應用程序(如攝像頭和通訊錄)交互呢？
就在那一年，PhoneGap獲了獎并開始支持Android平臺，對人數不斷增長的移動開發人員變得越來越有用，這些人員需要在更多的平臺上獲得代碼支持。
大家可以到PhoneGap documentation官方文檔開始對PhoneGap的學習。
總結
在這篇文章中，千鋒武漢HTML5培訓的老師跟大家討論了一些HTML5的移動開發框架，HTML5正式發布之后，很多開發者對HTML5又重燃了希望，相信這是個美好的時代，相信它會給我們帶來更多的驚喜。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
