一个优秀的 HTML5 视频播放器插件，支持字幕、弹幕、直播

开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件——MuiPlayer。

MuiPlayer 是一个开源的HTML5视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节等功能。支持 mp4、m3u8、flv 等多种媒体格式播放，解决大部分兼容问题，同时适应在PC、手机端播放。

特点

各浏览器平台播放 ui 不能统一
ui 扩展之间以及状态处理容易产生冲突
在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同
媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题
具有丰富的参数可以自定义播放器实例，通过轻松的配置即可完成自定义场景的视频播放

快速开始

安装

使用 npm 安装：

npm i mui-player --save

使用 yarn 安装：

yarn add mui-player

使用

1 使用 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

天我来谈谈我对传统HTML与VUE的区别理解(不谈太深的区别，查了一下网上那些说的都一样，我只谈很多人最关心的不一样的，说不对请理解,对不太了解或想了解VUE的人)。

1、什么是vue

官网介绍：vue是一套构建用户界面的渐进式框架。它与其他重量级框架不同的是，vue采用自下而上增量开发的设计。Vue的核心库只关注视图层，非常容易学习，非常容易与其他库或已有项目整合。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图层组件。

2、什么是HTML(HTML5)

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

总结：它们相同的地方就一句话:用途和结果都是一样的，不管是VUE还是HTML，最终都是将数据使用各种UI及方式展现给用户，也就是都是视图层页面的。

有人会说使用HTML和VUE开发有什么区别呢？许多人觉得结果都是视图层表达，而且VUE打包发布后不还是HTML+一堆JS文件，而且还要引入导入编译感觉特麻烦，感觉VUE好难，为什么要学VUE？

1、开发和部署

VUE 开发过程确实挺麻烦的，要安装依赖，要npm一堆包(还经常失败)。而HTML就简单多了，直接就拿来主意，下载下来，改改就用。

部署的话都差不多，都是在任何服务上都可以直接使用，而且都没有什么依赖。

但是我觉得VUE的开发类似于开发一个APP，所以他的打包结果是比纯HTML+JS更安全的，相当于做过混淆，因而他发布后的体积更小。

2、数据通讯

HTML+JS 数据POST,GET 等基本访问方式，但是如果直接在HTML中使用数据判断，或数据循环输出必须借助js,jquery等通过前端处理然后对id进行赋值操作，所以一般只能借助动态语言如php,java,.net等语言环境进行转化，但这样使得web对动态语言环境依赖性过强，造成后端迁移时太过于复杂，而且这样的Web一般要求前端和后端部署在一起。

VUE则不依赖于动态语言输出环境，只要是双方约定了数据传输接口，服务器放在哪里，不管使用什么后台语言都没关系，因而他的灵活性更强。

3、安全性

有些产品有些公司对语言是有选择的，主要是不想让代码暴露太多，而HTML+JS的方式往往是达不到要求的，因而现在许多企业还是在使用桌面软件的形式，又或者是要你使用对方的云服务，而私有云部署则要贵的很多，而且比较贵的软件还要安装秘钥软件，加密狗等方式，无非就是防止你将软件转移或无限使用或获取他的核心算法（虽然js也是有混淆方法的，但很少有人会这么做，我也没试过但是很影响效率）。

以前我在一个公司就是加班写了一个WEB程序里边有一个算法是分析公司产品结构的（那时VUE还不盛行），正好呢又遇到一个懂点的老板(居然会用F12)，结果看到核心代码了，当时就否定了，改用了WinForm 重写，那个辛苦你懂的。

VUE的打包的话，其实就是根据在页面中所使用到的组件然后根据你的逻辑关系等进行混淆打包，然后在用户加载时按需进行加载解析，从某种意义上来说做WEB是一种保护。我觉得这与桌面程序及APP打包效果是一样的(软件和APP也是可以反编译嘛，反编译后的结果就是混淆)，当然不说加密混淆了。

现在国内出现了像DCloud、APICloud（虽然这二家经常打架，毕竟相似度很高，我不做评论，但不可否认对一个只会写HTML+JS的人转写APP是一个不错的选择）这些由HTML5开始的跨平台软件也开始支持VUE了。

最后附上VUE打包后的调试预览图，纯HTML的就不多说了，自己F12吧。

eXt-UI是什么？

NeXt UI 工具包是一个基于 HTML5/JavaScript 的网络 Web 应用程序工具包。它提供了一个以网络为中心的拓扑 UI 组件，具有高性能和丰富的功能。NeXt 可以显示大型复杂网络拓扑、聚合网络节点、流量/路径/隧道/组可视化，它包括不同的布局算法、地图叠加和预设的用户友好交互。

---转载自NeXt-UI的GItHub地址简介https://github.com/NeXt-UI/next-bower

虽然NeXt-UI已经停止更新了，但是思科仍然在官网上花了很大篇幅展示这个模块，这也正是我们要学习这个模块的理由.

好了，话不多说，开始正文部分吧。

首先我们需要在cisco网页上down下NeXt-UI的文件包 https://d1nmyq4gcgsfi5.cloudfront.net/fileMedia/025dc509-8f2a-474a-b6d8-75e73ecbd6ac/NeXt_trial.zip

下载好软件后解压
新增APP文件
APP内写入app.js以及data.js

文件的架构大概就是上面的那个类型，然后我们开始构建拓扑所需要的文件

一、新建一个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>
这是一个新的NeXt-UI文件

</body>
</html>

二、更改app.js的配置，这个是调用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的路径，这边就是写的设备的一些信息，主要分为三个部分nodes、links、nodeSet

ndoes:代表某一个设备，里面的内容都是设备的相关信息。

links：代表哪几个设备相关联，分为source和target

nodeSet；代表哪几个设备为一个分组。一个分组可以在页面展示为一个设备，需要时可以展开

配置如下

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]
}
],
};

现在我们只需要打开index.html文件即可看到网络拓扑图了

后面我们可以讲一下如何使用nornir+NeXt-UI来自动绘制拓扑

在线咨询

上一篇：CSS实用技能：去除inline-block元素间间距的7种方法
下一篇：配色小白必看！这四个超经典的在线色彩网站，每个都好用到爆

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

一个优秀的 HTML5 视频播放器插件，支持字幕、弹幕、直播

特点

快速开始

效果演示

您的项目需求