開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目,包括技術、學習、實用與各種有趣的內容。本期推薦的是一個開源的 HTML5 視頻播放器插件——MuiPlayer。
MuiPlayer 是一個開源的HTML5視頻播放插件,其默認配置了精美可操作的的播放控件,涉及了常用的播放場景,例如全屏播放、播放快進、循環播放、音量調節等功能。支持 mp4、m3u8、flv 等多種媒體格式播放,解決大部分兼容問題,同時適應在PC、手機端播放。
使用 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
大多數APP應用中,我們會發現其都有上傳修改頭像的功能,本次項目中我們使用了MUI框架進行開發APP,其中我們在上傳頭像等功能時,使用了H5+ API提供的Uploader進行文件上傳。
Uploader模塊管理網絡上傳任務,用于從本地上傳各種文件到服務器,并支持跨域訪問操作。通過plus.uploader可獲取上傳管理對象。Uploader上傳使用HTTP的POST方式提交數據,數據格式符合Multipart/form-data規范,即rfc1867(Form-based File Upload in HTML)協議。——摘自官網
開發者設定從圖庫或拍照兩種方式選擇需要上傳的圖片,然后,前端代碼中,首先需要新建上傳任務,而擴展API需要在onPlusReady回調函數之后,在MUI中,我們將調用的擴展API放置在mui.plusReady()中。
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); });
創建完上傳任務后,我們需要對Upload對象進行相關參數的設置,如添加上傳文件,添加上傳數據等等。
/** * @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');
這樣一個簡單的MUI創建上傳任務,添加上傳文件、數據已經完成,接著我們就要開始上傳任務。
//一般我們會對添加文件/數據進行判斷是否成功,若不成功則提示,成功后開始上傳任務 if(addFileFlag) { task.start(); } else { plus.nativeUI.alert('添加上傳文件失敗!'); } });
當然我們在實際項目中,上傳文件是比較復雜的,比如我們需要能夠中途暫停上傳任務、恢復暫停的上傳任務、取消上傳任務等等。而本次項目中,我們上傳頭像僅僅是一個簡單的功能,所以我們不需要復雜的控制,僅使用以上代碼即可實現(服務器代碼此處不做贅述)。
今天給大家分享一款基于Quartz的UI可視化操作組件,她就是:GZY.Quartz.MUI。這個組件主要想做的就是:像swaggerUI一樣,項目入侵量小,僅需要在Startup中注入的UI組件
目前完成了第二個版本,
1.增加本地json持久化調度任務,無需數據庫
2.增加直接調用本地類方法,無需通過WebAPI接口.
本篇主要是介紹一下這兩個新增的功能.
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去調用,在一些小型項目中難應用,比如純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
歡迎點贊+轉發+關注!大家的支持是我分享最大的動力!!!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。