開源精選》是我們分享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

歡迎點贊+轉發+關注！大家的支持是我分享最大的動力！！！