一個(gè)優(yōu)秀的 HTML5 視頻播放器插件，支持字幕、彈幕、直播

開源精選》是我們分享Github、Gitee等開源社區(qū)中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)開源的 HTML5 視頻播放器插件——MuiPlayer。

MuiPlayer 是一個(gè)開源的HTML5視頻播放插件，其默認(rèn)配置了精美可操作的的播放控件，涉及了常用的播放場景，例如全屏播放、播放快進(jìn)、循環(huán)播放、音量調(diào)節(jié)等功能。支持 mp4、m3u8、flv 等多種媒體格式播放，解決大部分兼容問題，同時(shí)適應(yīng)在PC、手機(jī)端播放。

特點(diǎn)

各瀏覽器平臺(tái)播放 ui 不能統(tǒng)一
ui 擴(kuò)展之間以及狀態(tài)處理容易產(chǎn)生沖突
在不同環(huán)境下（android、ios、pc）針對 h5 video api 可能觸發(fā)事件的時(shí)機(jī)盡不相同
媒體格式存在各種兼容問題，muiplayer 處理了大多數(shù)在不同環(huán)境下播放的兼容問題
具有豐富的參數(shù)可以自定義播放器實(shí)例，通過輕松的配置即可完成自定義場景的視頻播放

快速開始

安裝

使用 npm 安裝：

npm i mui-player --save

使用 yarn 安裝：

yarn add mui-player

使用

1 使用 script 標(biāo)簽引入：

<!-- 引入基礎(chǔ)樣式文件 mui-player.min.css -->
<link rel="stylesheet" type="text/css" href="css/mui-player.min.css"/>

<!-- 引入基礎(chǔ)腳本 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 初始化構(gòu)建播放器

// 初始化 MuiPlayer 插件，MuiPlayer 方法傳遞一個(gè)對象，該對象包括所有插件的配置
var mp = new MuiPlayer({
    container:'#mui-player',
    title:'標(biāo)題',
    src:'./static/media/media.mp4',
})

以上就能為初始化構(gòu)建一個(gè)具有默認(rèn)配置控件的視頻播放器。

更多API基礎(chǔ)配置： https://muiplayer.js.org/zh/guide/api.html#%E4%B8%BB%E8%A6%81%E9%85%8D%E7%BD%AE

效果演示

基礎(chǔ)效果

直播模式

播放字幕

播放彈幕

多窗口播放

更多內(nèi)容大家可自行前往閱讀。

開源地址：https://gitee.com/muiplayer/hello-muiplayer

天我來談?wù)勎覍鹘y(tǒng)HTML與VUE的區(qū)別理解(不談太深的區(qū)別，查了一下網(wǎng)上那些說的都一樣，我只談很多人最關(guān)心的不一樣的，說不對請理解,對不太了解或想了解VUE的人)。

1、什么是vue

官網(wǎng)介紹：vue是一套構(gòu)建用戶界面的漸進(jìn)式框架。它與其他重量級框架不同的是，vue采用自下而上增量開發(fā)的設(shè)計(jì)。Vue的核心庫只關(guān)注視圖層，非常容易學(xué)習(xí)，非常容易與其他庫或已有項(xiàng)目整合。

Vue的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖層組件。

2、什么是HTML(HTML5)

HTML5是Web中核心語言HTML的規(guī)范，用戶使用任何手段進(jìn)行網(wǎng)頁瀏覽時(shí)看到的內(nèi)容原本都是HTML格式的，在瀏覽器中通過一些技術(shù)處理將其轉(zhuǎn)換成為了可識別的信息。

總結(jié)：它們相同的地方就一句話:用途和結(jié)果都是一樣的，不管是VUE還是HTML，最終都是將數(shù)據(jù)使用各種UI及方式展現(xiàn)給用戶，也就是都是視圖層頁面的。

有人會(huì)說使用HTML和VUE開發(fā)有什么區(qū)別呢？許多人覺得結(jié)果都是視圖層表達(dá)，而且VUE打包發(fā)布后不還是HTML+一堆JS文件，而且還要引入導(dǎo)入編譯感覺特麻煩，感覺VUE好難，為什么要學(xué)VUE？

1、開發(fā)和部署

VUE 開發(fā)過程確實(shí)挺麻煩的，要安裝依賴，要npm一堆包(還經(jīng)常失敗)。而HTML就簡單多了，直接就拿來主意，下載下來，改改就用。

部署的話都差不多，都是在任何服務(wù)上都可以直接使用，而且都沒有什么依賴。

但是我覺得VUE的開發(fā)類似于開發(fā)一個(gè)APP，所以他的打包結(jié)果是比純HTML+JS更安全的，相當(dāng)于做過混淆，因而他發(fā)布后的體積更小。

2、數(shù)據(jù)通訊

HTML+JS 數(shù)據(jù)POST,GET 等基本訪問方式，但是如果直接在HTML中使用數(shù)據(jù)判斷，或數(shù)據(jù)循環(huán)輸出必須借助js,jquery等通過前端處理然后對id進(jìn)行賦值操作，所以一般只能借助動(dòng)態(tài)語言如php,java,.net等語言環(huán)境進(jìn)行轉(zhuǎn)化，但這樣使得web對動(dòng)態(tài)語言環(huán)境依賴性過強(qiáng)，造成后端遷移時(shí)太過于復(fù)雜，而且這樣的Web一般要求前端和后端部署在一起。

VUE則不依賴于動(dòng)態(tài)語言輸出環(huán)境，只要是雙方約定了數(shù)據(jù)傳輸接口，服務(wù)器放在哪里，不管使用什么后臺(tái)語言都沒關(guān)系，因而他的靈活性更強(qiáng)。

3、安全性

有些產(chǎn)品有些公司對語言是有選擇的，主要是不想讓代碼暴露太多，而HTML+JS的方式往往是達(dá)不到要求的，因而現(xiàn)在許多企業(yè)還是在使用桌面軟件的形式，又或者是要你使用對方的云服務(wù)，而私有云部署則要貴的很多，而且比較貴的軟件還要安裝秘鑰軟件，加密狗等方式，無非就是防止你將軟件轉(zhuǎn)移或無限使用或獲取他的核心算法（雖然js也是有混淆方法的，但很少有人會(huì)這么做，我也沒試過但是很影響效率）。

以前我在一個(gè)公司就是加班寫了一個(gè)WEB程序里邊有一個(gè)算法是分析公司產(chǎn)品結(jié)構(gòu)的（那時(shí)VUE還不盛行），正好呢又遇到一個(gè)懂點(diǎn)的老板(居然會(huì)用F12)，結(jié)果看到核心代碼了，當(dāng)時(shí)就否定了，改用了WinForm 重寫，那個(gè)辛苦你懂的。

VUE的打包的話，其實(shí)就是根據(jù)在頁面中所使用到的組件然后根據(jù)你的邏輯關(guān)系等進(jìn)行混淆打包，然后在用戶加載時(shí)按需進(jìn)行加載解析，從某種意義上來說做WEB是一種保護(hù)。我覺得這與桌面程序及APP打包效果是一樣的(軟件和APP也是可以反編譯嘛，反編譯后的結(jié)果就是混淆)，當(dāng)然不說加密混淆了。

現(xiàn)在國內(nèi)出現(xiàn)了像DCloud、APICloud（雖然這二家經(jīng)常打架，畢竟相似度很高，我不做評論，但不可否認(rèn)對一個(gè)只會(huì)寫HTML+JS的人轉(zhuǎn)寫APP是一個(gè)不錯(cuò)的選擇）這些由HTML5開始的跨平臺(tái)軟件也開始支持VUE了。

最后附上VUE打包后的調(diào)試預(yù)覽圖，純HTML的就不多說了，自己F12吧。

eXt-UI是什么？

NeXt UI 工具包是一個(gè)基于 HTML5/JavaScript 的網(wǎng)絡(luò) Web 應(yīng)用程序工具包。它提供了一個(gè)以網(wǎng)絡(luò)為中心的拓?fù)?UI 組件，具有高性能和豐富的功能。NeXt 可以顯示大型復(fù)雜網(wǎng)絡(luò)拓?fù)洹⒕酆暇W(wǎng)絡(luò)節(jié)點(diǎn)、流量/路徑/隧道/組可視化，它包括不同的布局算法、地圖疊加和預(yù)設(shè)的用戶友好交互。

---轉(zhuǎn)載自NeXt-UI的GItHub地址簡介https://github.com/NeXt-UI/next-bower

雖然NeXt-UI已經(jīng)停止更新了，但是思科仍然在官網(wǎng)上花了很大篇幅展示這個(gè)模塊，這也正是我們要學(xué)習(xí)這個(gè)模塊的理由.

好了，話不多說，開始正文部分吧。

首先我們需要在cisco網(wǎng)頁上down下NeXt-UI的文件包 https://d1nmyq4gcgsfi5.cloudfront.net/fileMedia/025dc509-8f2a-474a-b6d8-75e73ecbd6ac/NeXt_trial.zip

下載好軟件后解壓
新增APP文件
APP內(nèi)寫入app.js以及data.js

文件的架構(gòu)大概就是上面的那個(gè)類型，然后我們開始構(gòu)建拓?fù)渌枰奈募?/p>

一、新建一個(gè)index.html文件***/NEXTUI/js/next/css/next.css 這一塊地址可以寫相對路徑也可以寫絕對路徑

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="***/NEXTUI/js/next/css/next.css">
<script type="text/javascript" src="***/NEXTUI/js/next/js/next.js"></script>
</head>
<body>
這是一個(gè)新的NeXt-UI文件

</body>
</html>

二、更改app.js的配置，這個(gè)是調(diào)用data.js的文件，一般無需更改

(function(nx){
// instantiate NeXt app
var app = new nx.ui.Application();
// configuration object for next
var topologyConfig = {
// special configuration for nodes
"nodeConfig": {
"label": "model.name",
"iconType": "router"
},
// special configuration for links
"linkConfig": {
"linkType": "curve",
},
// if true, the nodes' icons are shown, otherwise a user sees a dot instead
"showIcon": true,
// automatically compute the position of nodes
"dataProcessor": "force",
"width": 1920,
"height": 1080,
};
// instantiate Topology class
var topology = new nx.graphic.Topology(topologyConfig);
// load topology data from app/data.js
topology.data(topologyData);
// bind the topology object to the app
topology.attach(app);
// app must run inside a specific container. In our case this is the one with id="topology-container"
app.container(document.getElementById("topology-container"));
})(nx);

三、更改data.js的路徑，這邊就是寫的設(shè)備的一些信息，主要分為三個(gè)部分nodes、links、nodeSet

ndoes:代表某一個(gè)設(shè)備，里面的內(nèi)容都是設(shè)備的相關(guān)信息。

links：代表哪幾個(gè)設(shè)備相關(guān)聯(lián)，分為source和target

nodeSet；代表哪幾個(gè)設(shè)備為一個(gè)分組。一個(gè)分組可以在頁面展示為一個(gè)設(shè)備，需要時(shí)可以展開

配置如下

var topologyData = {
nodes: [
{
"id": 0,
"name": "New York",
"mgmt_ip": "1.1.1.1",
"icon": "switch"
},
{
"id": 1,
"name": "Los Angeles",
"mgmt_ip": "1.1.1.2",
"icon": "router"
},
{
"id": 2,
"name": "Houston",
"mgmt_ip": "1.1.1.3"
},
{
"id": 3,
"name": "Beijing",
"mgmt_ip": "1.1.1.4"
}
],
links: [
{
"source": 0,
"target": 1
},
{
"source": 0,
"target": 2
},
{
"source": 0,
"target": 3
},
{
"source": 3,
"target": 2
}
],
nodeSet: [
{
"id": 4,
"nodes": [1,2]
}
],
};

現(xiàn)在我們只需要打開index.html文件即可看到網(wǎng)絡(luò)拓?fù)鋱D了

后面我們可以講一下如何使用nornir+NeXt-UI來自動(dòng)繪制拓?fù)?/p>

在線咨詢

上一篇：CSS實(shí)用技能：去除inline-block元素間間距的7種方法
下一篇：配色小白必看！這四個(gè)超經(jīng)典的在線色彩網(wǎng)站，每個(gè)都好用到爆

您的項(xiàng)目需求

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

整合營銷服務(wù)商

一個(gè)優(yōu)秀的 HTML5 視頻播放器插件，支持字幕、彈幕、直播

特點(diǎn)

快速開始

效果演示

您的項(xiàng)目需求

一個(gè)優(yōu)秀的 HTML5 視頻播放器插件，支持字幕、彈幕、直播