开源精选》是我们分享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

mui.plusReady(function () {
 plus.uploader... 
});

/** 
 * @description 创建上传任务
 * @param url 服务器文件管理系统地址
 * @param {options} 上传任务的参数，如请求类型，上传优先级等
 * @param {completedCB} 上传任务完成后回调函数，成功或失败都会触发
 * @return Upload 管理一个上传任务的Upload对象
 */ 
Upload plus.uploader.createUpload( url, options, completedCB );

var task = plus.uploader.createUpload(url, {
	method: 'POST',//网络请求类型,仅支持http协议的"POST"请求
	blocksize: 102400,//上传任务每次上传的文件块大小,单位为Byte(字节),默认102400
	priority: 0,//上传任务的优先级,数值越大优先级越高,默认为0
	timeout: 120s,//上传任务超时时间,单位为秒(s),默认120s,设置为0则表示永远不超时
	retry: 3,//上传任务重试次数,默认重试3次
	retryInterval: 30,//上传任务重试时间间隔,单位为秒(s),默认30s
}, function(t, status) {
	/**
	 * t是上传任务对象upload,可以通过t.*的方式来获取对象信息
	 * status上传结果状态码,未获取传值状态则其值为0,上传成功其值为200
	 * 可以在这儿进行上传完成后的相关跳转等操作
	 */
	console.log("上传任务的标识：" + t.id);
	console.log("上传文件的服务器地址：" + t.url);
	console.log("任务状态：" + t.state);
});

/**
 * @description 向上传任务中添加文件，必须在上传任务开始上传前调用
 * @param {path} 添加上传文件的路径，仅支持本地路径
 * @param {options} 要添加上传文件的参数
 * @return {Boolean} 添加文件成功返回true，失败返回false 
 */
var addFileFlag = task.addFile('_www/demo.jpg', {
	key: 'file',//文件键名,默认为文件名称,唯一的,若存在相同的key则导致添加失败
	name: 'test',//文件名称,默认值为上传文件路径中的名称
	mime: 'image/jpeg'//上传文件的类型,默认值自动根据文件后缀名称生成
});
/**
 * @description 添加上传数据
 * @param {key} 添加上传数据的键名
 * @param {value} 添加上传数据的键值
 * @return {Boolean} 添加成功返回true，否则false
 */
var addDataFlag = task.addData('name', 'test');

//一般我们会对添加文件/数据进行判断是否成功,若不成功则提示,成功后开始上传任务
if(addFileFlag) {
	task.start();
} else {
	plus.nativeUI.alert('添加上传文件失败！');
}
});

今天给大家分享一款基于Quartz的UI可视化操作组件，她就是：GZY.Quartz.MUI。这个组件主要想做的就是:像swaggerUI一样,项目入侵量小,仅需要在Startup中注入的UI组件

目前完成了第二个版本,

1.增加本地json持久化调度任务,无需数据库

2.增加直接调用本地类方法,无需通过WebAPI接口.

本篇主要是介绍一下这两个新增的功能.

一.增加本地json持久化调度任务,无需数据库

　　1.首先,我们创建一个空白的ASP.NET Core 项目(MVC、Razor和WebAPI都行),如图:

2.通过nuget引用最新版本的GZY.Quartz.MUI组件,如图:

　　3.修改一下Startup.cs

　　在ConfigureServices添加一行代码如下:

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddQuartzUI();
        }

　　在Configure添加一行代码如下:　　

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
 {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseRouting();
            app.UseQuartz(); //添加这行代码
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapGet("/", async context =>
                {
                    await context.Response.WriteAsync("Hello World!");
                });
            });
   }

4.运行并启动项目,在弹出来的地址中,输入后缀 /QuartzUI,如图:

我们就可以愉快的开始添加自己的定时调度任务啦~(PS:新添加的任务,默认是暂停状态,需要启动后才能立即执行哦)

二.增加直接调用本地类方法,无需通过WebAPI接口.

上一个版本发布之后,有小伙伴反映,调度任务只能通过webapi去调用,在一些小型项目中难应用,比如纯MVC的项目

这次我添加了通过继承接口,就可以直接调用本地方法的方式~ 我们来一步步介绍.

1.我们创建一个测试类,继承IJobService如下:

    public class TestJob : IJobService
    {
        public string ExecuteService(string parameter)
        {
            return "定时任务已执行成功!";
        }
    }

2.在Startup的ConfigureServices方法中,添加如下代码:

        public void ConfigureServices(IServiceCollection services)
        {
            services.AddQuartzUI();
            services.AddQuartzClassJobs(); //添加本地调度任务访问
        }

3.运行项目,并添加测试调度任务,如图:

4.启动任务,并立即执行,如动图所示:

这样,我们就完成了本地定时任务的调用啦~

**********************************************************************************

简易步骤: 本地文件存储版本:
1.注入QuartzUI
services.AddQuartzUI();
2.如需开启ClassJob则注入以下内容
services.AddQuartzClassJobs();

数据库版本 1.注入QuartzUI
var optionsBuilder = new DbContextOptionsBuilder();
optionsBuilder.UseMysql("server=xxxxxxx;database=xxx;User Id=xxxx;PWD=xxxx", b => b.MaxBatchSize(1));//创建数据库连接
services.AddQuartzUI(optionsBuilder.Options); //注入UI组件

2.在Startup的Configure方法中添加以下内容:
app.UseQuartz();

运行项目即可

原文链接：https://www.cnblogs.com/GuZhenYin/p/15745002.html

欢迎点赞+转发+关注！大家的支持是我分享最大的动力！！！