first commit

2024-09-27 01:25:59 +08:00
commit 546fffb620
78 changed files with 30293 additions and 0 deletions
--- a/dist/.pydio
+++ b/dist/.pydio
@@ -0,0 +1 @@
+872f3b43-8348-47ea-a954-d7c3f09c7a21
--- a/dist/1.mp4
+++ b/dist/1.mp4
--- a/dist/2.mp4
+++ b/dist/2.mp4
--- a/dist/3.mp4
+++ b/dist/3.mp4
--- a/dist/4.mp4
+++ b/dist/4.mp4
--- a/dist/5.mp4
+++ b/dist/5.mp4
--- a/dist/6.mp4
+++ b/dist/6.mp4
--- a/dist/7.mp4
+++ b/dist/7.mp4
--- a/dist/8.mp4
+++ b/dist/8.mp4
--- a/dist/9.mp4
+++ b/dist/9.mp4
--- a/dist/AVideo.min.css
+++ b/dist/AVideo.min.css
@@ -0,0 +1,171 @@
+body,
+ul,
+li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+#app,
+html,
+body {
+  width: 100%;
+  height: 100%;
+}
+a {
+  text-decoration: none;
+}
+.active {
+  color: #61bd12 !important;
+}
+.high {
+  position: absolute;
+  width: 50px;
+  top: -96px;
+  text-align: center;
+  right: -15px;
+  height: 98px;
+  display: none;
+}
+.a_controls i,
+.a_top_menu i {
+  color: #fff;
+  font-size: 18px;
+  margin: 0 8px;
+  cursor: pointer;
+  position: relative;
+}
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  /*清除系统默认样式*/
+  height: 12px;
+  /*拖动块高度*/
+  width: 12px;
+  /*拖动块宽度*/
+  background: #fff;
+  /*拖动块背景*/
+  border-radius: 50%;
+  /*外观设置为圆形*/
+  border: solid 1px #ddd;
+  /*设置边框*/
+}
+.a_left_controls span {
+  color: #fff;
+  margin-left: 4px;
+  font-size: 14px;
+}
+.a_left_controls,
+.a_right_controls {
+  padding: 0 15px;
+}
+.a_left_controls i:first-child,
+.a_right_controls i:last-child {
+  margin: 0 !important;
+}
+.avideo {
+  position: relative;
+  width: 60%;
+  height: 600px;
+  background: #000;
+  overflow: hidden;
+}
+.avideo .a_video {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform-origin: center;
+}
+.avideo .a_side_menu {
+  width: 250px;
+  position: absolute;
+  height: calc(100% - 37px - 45px);
+  right: 0;
+  top: 37px;
+  background: #202020;
+  overflow-y: scroll;
+}
+.avideo .a_side_menu .list_item {
+  display: block;
+  width: 100%;
+  height: 40px;
+  color: #909090;
+  line-height: 40px;
+  padding-left: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #303030;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.avideo .a_side_menu .list_item:hover {
+  color: #61bd12;
+}
+.avideo .a_top_menu {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 0;
+  height: 37px;
+  background: rgba(75, 75, 75, 0.15);
+  z-index: 3;
+}
+.avideo .a_top_menu .a_left_menu {
+  float: left;
+  display: flex;
+  height: 100%;
+  color: #fff;
+  align-items: center;
+  padding-left: 15px;
+}
+.avideo .a_top_menu .a_right_menu {
+  float: right;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.avideo .a_top_menu .a_right_menu i {
+  width: 25px;
+  height: 25px;
+  line-height: 25px;
+  background: #000;
+  border-radius: 100%;
+  text-align: center;
+}
+.avideo .a_controls {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 45px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 3;
+}
+.avideo .a_controls .a_progress {
+  -webkit-appearance: none;
+  position: absolute;
+  top: -4px;
+  outline: none;
+  width: 100% !important;
+  background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ffffff78;
+  background-size: 0% 100%;
+  /*设置左右宽度比例*/
+  height: 3px;
+  /*横条的高度*/
+}
+.avideo .a_controls .a_vip {
+  position: absolute;
+  color: #fff;
+  top: -60px;
+  padding: 5px 12px;
+  font-size: 14px;
+  left: 10px;
+  background-color: #333;
+  border-radius: 15px;
+}
+.avideo .a_controls .icon-suduspeed8 {
+  font-size: 16px !important;
+}
+
--- a/dist/AVideo.min.js
+++ b/dist/AVideo.min.js
--- a/dist/App.js
+++ b/dist/App.js
@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("reflect-metadata");
+var init_1 = require("./core/init");
+require("./assets/less/index.less");
+// @ts-ignore
+window.AVideo = init_1.Init;
--- a/dist/core/.pydio
+++ b/dist/core/.pydio
@@ -0,0 +1 @@
+da927b6d-303c-4057-9486-2f534c77d640
--- a/dist/core/annotation/.pydio
+++ b/dist/core/annotation/.pydio
@@ -0,0 +1 @@
+ec7ea387-e5ec-4847-8993-3681672646eb
--- a/dist/core/annotation/Dom.annotation.js
+++ b/dist/core/annotation/Dom.annotation.js
@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dom = void 0;
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var ClassName_config_1 = require("../config/ClassName.config");
+function Dom() {
+    return function (target, propertyName) {
+        setTimeout(function () {
+            try {
+                target[propertyName] = OptionParams_model_1.default.VideoDom.querySelector("." + ClassName_config_1.ClassName[propertyName]);
+            }
+            catch (e) {
+                throw new Error("\u9519\u8BEF\u4FE1\u606F\uFF1A\u9700\u8981\u7ED1\u5B9A\u4E8B\u4EF6\u7684\u7C7B\u540D\uFF1A" + ClassName_config_1.ClassName[propertyName] + "\u4E0D\u5B58\u5728\n                        1\uFF1A\u8BF7\u68C0\u67E5\u7C7B\u540D\u662F\u5426\u5B58\u5728\n                        2\uFF1A\u5220\u9664 ui/*.ui.ts \u4EE3\u7801\u4E2D\u5BF9\u5E94\u7684 Dom() \u88C5\u9970\u5668 \u548C \u65B9\u6CD5\n                        ");
+            }
+        }, 300);
+    };
+}
+exports.Dom = Dom;
--- a/dist/core/annotation/Ioc.annotation.js
+++ b/dist/core/annotation/Ioc.annotation.js
@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Inject = exports.Injectable = void 0;
+var Ioc_model_1 = require("../model/Ioc.model");
+/**
+ * 收集类依赖
+ * @constructor
+ */
+function Injectable() {
+    return function (_constructor) {
+        if (Ioc_model_1.default.classPool.indexOf(_constructor) !== -1) {
+            throw new Error('无需重复收集类');
+        }
+        else {
+            //注册
+            Ioc_model_1.default.classPool = [_constructor];
+        }
+    };
+}
+exports.Injectable = Injectable;
+/**
+ * 将类依赖实例化然后注入到被装饰的属性中
+ * @constructor
+ */
+function Inject() {
+    return function (target, propertyName) {
+        /**
+         * 使用 reflect-metadata 提供的内置 类型元数据键 design:type 通过反射拿到被装饰属性的类型
+         * 也就是 类属性要实例化 的 service 类
+         */
+        var propertyType = Reflect.getMetadata('design:type', target, propertyName);
+        if (Ioc_model_1.default.classPool.indexOf(propertyType) == -1) {
+            throw new Error('被装饰的属性所属的变量类型类，没有被装饰器@Injectable()注入，请检查！');
+        }
+        else {
+            // 从存取器的数组中通过下标取出被装饰属性对应的service类，然后实例化这个类，在放入被装饰的属性中
+            target[propertyName] = new (Ioc_model_1.default.classPool[Ioc_model_1.default.classPool.indexOf(propertyType)])();
+        }
+    };
+}
+exports.Inject = Inject;
--- a/dist/core/config/.pydio
+++ b/dist/core/config/.pydio
@@ -0,0 +1 @@
+cf028485-f491-4537-bc8b-ccecb6619660
--- a/dist/core/config/ClassName.config.js
+++ b/dist/core/config/ClassName.config.js
@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassName = void 0;
+var ClassName;
+(function (ClassName) {
+    // 播放按钮的div class 名称
+    ClassName["Play"] = "icon-bofang";
+    ClassName["Video"] = "a_video";
+    ClassName["Pause"] = "icon-tingzhi1";
+    ClassName["Loop"] = "icon-xunhuan";
+    ClassName["Stop"] = "icon-tingzhi1";
+    ClassName["Active"] = "active";
+    ClassName["High"] = "icon-huaban-";
+    ClassName["PictureInPicture"] = "icon-ai223";
+    ClassName["Rotate"] = "icon-xuanzhuan1";
+    ClassName["Image"] = "icon-jingxiang2";
+    ClassName["ScreenShot"] = "icon-jietu_huaban";
+    ClassName["VideoProgress"] = "a_progress";
+    ClassName["VideoTime"] = "a_videotime";
+    ClassName["Speed"] = "icon-suduspeed8";
+    ClassName["FullScreen"] = "icon-quanping_huaban";
+    ClassName["playList"] = "icon-liebiao";
+    ClassName["SideMenu"] = "a_side_menu";
+})(ClassName = exports.ClassName || (exports.ClassName = {}));
--- a/dist/core/config/VideoMimeType.config.js
+++ b/dist/core/config/VideoMimeType.config.js
@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoMimeType = void 0;
+var VideoMimeType;
+(function (VideoMimeType) {
+    VideoMimeType["HLS"] = "application/x-mpegurl";
+    VideoMimeType["TS"] = "video/MP2T";
+    VideoMimeType["MP4"] = "video/mp4";
+    VideoMimeType["STREA"] = "application/octet-stream";
+    VideoMimeType["FLV"] = "video/x-flv";
+    VideoMimeType["MOV"] = "video/quicktime";
+    VideoMimeType["AVI"] = "video/x-msvideo";
+})(VideoMimeType = exports.VideoMimeType || (exports.VideoMimeType = {}));
--- a/dist/core/config/index.config.js
+++ b/dist/core/config/index.config.js
@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Config = void 0;
+var Config = /** @class */ (function () {
+    function Config() {
+    }
+    Config.DefalutOptionParams = {
+        el: '#app',
+        url: 'http://demo-videos.qnsdk.com/movies/qiniu.mp4',
+        title: '欢迎使用 AVideo 播放器！',
+        layout: 'DefaultLayout',
+        width: '100%',
+        height: '400px',
+        autoplay: false,
+        muted: false,
+        volume: 1,
+        poster: '',
+        playList: [{ title: '1', url: '222' }],
+        controls: {
+            image: true,
+            setting: true,
+            rotate: true,
+            play: true,
+            loop: true,
+            speed: true,
+            FullScreen: true,
+            down: true,
+            PictureInPicture: true,
+            memory: true,
+            ScreenShot: true,
+            theme: true,
+            progressMarkers: [],
+            vip: {},
+        },
+        paused: function (video) { },
+        play: function (video) { },
+        finish: function (video) { },
+        error: function (video) { },
+        timeupdate: function (video) { },
+    };
+    Config.IconConfig = {
+        topIcon: [
+            { title: '下载', icon: 'icon-down1', key: 'down' },
+            { title: '列表', icon: 'icon-liebiao', key: 'playList' },
+            { title: '设置', icon: 'icon-setting', key: 'setting' },
+        ],
+        leftIcon: [
+            { title: '播放', icon: 'icon-bofang', key: 'play' },
+            { title: '循环播放', icon: 'icon-xunhuan', key: 'loop' },
+        ],
+        rightIcon: [
+            { title: '皮肤', icon: 'icon-jingzi', key: 'theme' },
+            { title: '高清', icon: 'icon-huaban-', key: 'high' },
+            { title: '旋转', icon: 'icon-xuanzhuan1', key: 'rotate' },
+            { title: '镜像', icon: 'icon-jingxiang2', key: 'image' },
+            { title: '截图', icon: 'icon-jietu_huaban', key: 'ScreenShot' },
+            { title: '倍速', icon: 'icon-suduspeed8', key: 'speed' },
+            { title: '画中画', icon: 'icon-ai223', key: 'PictureInPicture' },
+            { title: '全屏', icon: 'icon-quanping_huaban', key: 'FullScreen' },
+        ]
+    };
+    return Config;
+}());
+exports.Config = Config;
--- a/dist/core/init.js
+++ b/dist/core/init.js
@@ -0,0 +1,49 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Init = void 0;
+var OptionParams_model_1 = require("./model/OptionParams.model");
+var index_config_1 = require("./config/index.config");
+var index_ui_1 = require("./ui/index.ui");
+var Ioc_annotation_1 = require("./annotation/Ioc.annotation");
+/**
+ * 核心必传参数的校验
+ */
+var Init = /** @class */ (function () {
+    function Init(OptionParams) {
+        this.OptionParams = OptionParams;
+        this.checkParams();
+    }
+    Init.prototype.checkParams = function () {
+        if (this.OptionParams.hasOwnProperty("el") && this.OptionParams.hasOwnProperty("url")) {
+            if (this.OptionParams.controls && Object.keys(this.OptionParams.controls).length == 0) {
+                throw new Error("请勿传入空controls的配置");
+            }
+            this.OptionParams.playList === undefined
+                ? delete index_config_1.Config.DefalutOptionParams.playList
+                : null;
+            // 将用户传入的参数和默认参数进行合并，如果值冲突，优先采用用户的配置来覆盖默认值
+            Object.assign(index_config_1.Config.DefalutOptionParams, this.OptionParams);
+            // 保存配置到存取器，供全局使用
+            OptionParams_model_1.default.OptionParams = index_config_1.Config.DefalutOptionParams;
+            this.ApplicationUI.GenerateDom();
+        }
+        else {
+            throw new Error("请检查必传参数：el 和 url，是否传入！");
+        }
+    };
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_ui_1.ApplicationUI)
+    ], Init.prototype, "ApplicationUI", void 0);
+    return Init;
+}());
+exports.Init = Init;
--- a/dist/core/model/.pydio
+++ b/dist/core/model/.pydio
@@ -0,0 +1 @@
+47c4d976-d8f6-4ae2-8240-a45a7c685ece
--- a/dist/core/model/Ioc.model.js
+++ b/dist/core/model/Ioc.model.js
@@ -0,0 +1,26 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var IocModel = /** @class */ (function () {
+    function IocModel() {
+        this._classPool = [];
+    }
+    Object.defineProperty(IocModel.prototype, "classPool", {
+        get: function () {
+            return this._classPool;
+        },
+        set: function (value) {
+            this._classPool = __spreadArrays(value, this._classPool);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return IocModel;
+}());
+exports.default = new IocModel();
--- a/dist/core/model/OptionParams.model.js
+++ b/dist/core/model/OptionParams.model.js
@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var OptionParamsModel = /** @class */ (function () {
+    function OptionParamsModel() {
+    }
+    Object.defineProperty(OptionParamsModel.prototype, "VideoDom", {
+        get: function () {
+            return this._VideoDom;
+        },
+        set: function (value) {
+            this._VideoDom = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(OptionParamsModel.prototype, "OptionParams", {
+        get: function () {
+            return this._OptionParams;
+        },
+        set: function (value) {
+            this._OptionParams = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    return OptionParamsModel;
+}());
+exports.default = new OptionParamsModel();
--- a/dist/core/types/.pydio
+++ b/dist/core/types/.pydio
@@ -0,0 +1 @@
+b1d18617-233a-490c-a87f-28dd4b26d70e
--- a/dist/core/types/OptionParams.types.js
+++ b/dist/core/types/OptionParams.types.js
@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
--- a/dist/core/ui/.pydio
+++ b/dist/core/ui/.pydio
@@ -0,0 +1 @@
+900aa138-dace-4080-ac1c-261135bfcb71
--- a/dist/core/ui/controls.ui.js
+++ b/dist/core/ui/controls.ui.js
@@ -0,0 +1,307 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlsUi = void 0;
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var index_utils_1 = require("../utils/index.utils");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var ClassName_config_1 = require("../config/ClassName.config");
+/**
+ * 底部控件条的基础功能设置
+ */
+var ControlsUi = /** @class */ (function () {
+    function ControlsUi() {
+    }
+    /**
+     * 播放按钮被点击，播放视频
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventPlay = function () {
+        var _this = this;
+        this.Play.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.Video.paused) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.Video.play()];
+                    case 1:
+                        _a = _b.sent();
+                        return [3 /*break*/, 4];
+                    case 2: return [4 /*yield*/, this.Video.pause()];
+                    case 3:
+                        _a = _b.sent();
+                        _b.label = 4;
+                    case 4:
+                        _a;
+                        this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+    };
+    ControlsUi.prototype.BindEventPlayList = function () {
+        var _this = this;
+        var SideMenu = this.Utils.$("." + ClassName_config_1.ClassName.SideMenu);
+        this.playList.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (SideMenu.style.right == "0px") {
+                    this.Utils.$("." + ClassName_config_1.ClassName.SideMenu).style.right = '-250px';
+                }
+                else {
+                    this.Utils.$("." + ClassName_config_1.ClassName.SideMenu).style.right = '0';
+                }
+                return [2 /*return*/];
+            });
+        }); };
+    };
+    /**
+     * 视频全屏
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventFullScreen = function () {
+        var _this = this;
+        this.FullScreen.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!!document.fullscreenElement) return [3 /*break*/, 2];
+                        this.Video.parentElement.style.width = '100%';
+                        this.Video.parentElement.style.height = '100%';
+                        return [4 /*yield*/, document.documentElement.requestFullscreen()];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 2:
+                        if (!document.exitFullscreen) return [3 /*break*/, 4];
+                        this.Video.parentElement.style.width = OptionParams_model_1.default.OptionParams.width;
+                        this.Video.parentElement.style.height = OptionParams_model_1.default.OptionParams.height;
+                        return [4 /*yield*/, document.exitFullscreen()];
+                    case 3:
+                        _a.sent();
+                        _a.label = 4;
+                    case 4:
+                        this.FullScreen.classList.toggle(ClassName_config_1.ClassName.Active);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+    };
+    /**
+     * 截图按钮
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventScreenShot = function () {
+        var _this = this;
+        var scale = 0.65;
+        this.ScreenShot.onclick = function () {
+            var canvas = document.createElement("canvas");
+            canvas.width = _this.Video.videoWidth * scale;
+            canvas.height = _this.Video.videoHeight * scale;
+            canvas.getContext('2d')
+                .drawImage(_this.Video, 0, 0, canvas.width, canvas.height);
+            _this.Utils.downLoadFile(canvas.toDataURL('image/jpeg', 1.0), 'image/jpeg');
+        };
+    };
+    /**
+     * 循环播放的开关
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventLoop = function () {
+        var _this = this;
+        this.Loop.onclick = function () {
+            _this.Video.loop ? _this.Video.loop = false : _this.Video.loop = true;
+            _this.Loop.classList.toggle(ClassName_config_1.ClassName.Active);
+        };
+    };
+    /**
+     * 视频镜像功能
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventImage = function () {
+        var _this = this;
+        // 延迟解决 ondblclick 时候会触发 onclick 的问题
+        var ImageStatus = true, timeId = null; // true rotateY 镜像，false rotateX 镜像
+        // 双击视频恢复
+        this.Image.ondblclick = function () {
+            clearTimeout(timeId);
+            ImageStatus = true;
+            _this.Video.style.cssText = "\n                transform: rotateY(0deg); \n            ";
+        };
+        // 单击镜像
+        this.Image.onclick = function () {
+            clearTimeout(timeId);
+            timeId = setTimeout(function () {
+                if (ImageStatus) {
+                    ImageStatus = false;
+                    _this.Video.style.cssText = "\n                        transform: rotateY(180deg); \n                    ";
+                }
+                else {
+                    ImageStatus = true;
+                    _this.Video.style.cssText = "\n                        transform: rotateX(180deg); \n                    ";
+                }
+            }, 250);
+        };
+    };
+    /**
+     *  TODO 视频倍速的功能 实现中...
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventSpeed = function () {
+        // 默认视频倍速
+        var defaultSpeed = [0.5, 1.0, 1.25, 1.5, 2.0];
+        this.Speed.onclick = function () {
+            // 如果传入的是数组
+            if (Array.isArray(OptionParams_model_1.default.OptionParams.controls.speed)) {
+                defaultSpeed = OptionParams_model_1.default.OptionParams.controls.speed;
+                console.log("如果传入的是数组");
+                // 如果传入的是true，表示开启默认的倍速播放功能
+            }
+            else if (OptionParams_model_1.default.OptionParams.controls.speed == true) {
+                console.log("表示开启默认的倍速播放功能");
+            }
+        };
+    };
+    /**
+     * 画中画
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventPictureInPicture = function () {
+        var _this = this;
+        this.PictureInPicture.onclick = function () {
+            if (document.pictureInPictureElement == null) {
+                _this.Video.requestPictureInPicture();
+                _this.PictureInPicture.classList.add(ClassName_config_1.ClassName.Active);
+            }
+            else {
+                document.exitPictureInPicture();
+                _this.PictureInPicture.classList.remove(ClassName_config_1.ClassName.Active);
+            }
+        };
+        /**
+         * 监听退出画中画功能
+         */
+        this.Video.addEventListener('leavepictureinpicture', function () {
+            _this.PictureInPicture.classList.remove(ClassName_config_1.ClassName.Active);
+            _this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+        });
+    };
+    /**
+     * 视频旋转
+     * @constructor
+     */
+    ControlsUi.prototype.BindEventRotate = function () {
+        var _this = this;
+        var currentRotate = 0, RotateNumber = 0;
+        this.Rotate.onclick = function () {
+            if (RotateNumber >= 4) {
+                currentRotate = 0;
+                RotateNumber = 0;
+            }
+            currentRotate += OptionParams_model_1.default.OptionParams.controls.rotate == true
+                ? 90
+                : OptionParams_model_1.default.OptionParams.controls.rotate;
+            RotateNumber++;
+            if (currentRotate == 180 || currentRotate == 360 ||
+                currentRotate == -180 || currentRotate == -360) {
+                _this.Video.style.cssText = "\n                        width: 100%;\n                        left: 50%;\n                        top: 50%;\n                        transform: translate(-50%, -50%) rotate(" + currentRotate + "deg);\n                    ";
+                return false;
+            }
+            else {
+                // 视频旋转 90°，270°后，视频的宽度 等于 父元素的高度
+                _this.Video.style.cssText = "\n                        width: " + OptionParams_model_1.default.OptionParams.height + ";\n                        left: 50%;\n                        top: 50%;\n                        transform: translate(-50%, -50%) rotate(" + currentRotate + "deg);\n                ";
+            }
+        };
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "Play", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", Object)
+    ], ControlsUi.prototype, "Video", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "Loop", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "PictureInPicture", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], ControlsUi.prototype, "Rotate", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "Image", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "ScreenShot", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "Speed", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "FullScreen", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLLIElement)
+    ], ControlsUi.prototype, "playList", void 0);
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], ControlsUi.prototype, "Utils", void 0);
+    return ControlsUi;
+}());
+exports.ControlsUi = ControlsUi;
--- a/dist/core/ui/coreSettings.ui.js
+++ b/dist/core/ui/coreSettings.ui.js
@@ -0,0 +1,191 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CoreSettingsUi = void 0;
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var ClassName_config_1 = require("../config/ClassName.config");
+var index_utils_1 = require("../utils/index.utils");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+/**
+ * 视频核心功能设置
+ */
+var CoreSettingsUi = /** @class */ (function () {
+    function CoreSettingsUi() {
+    }
+    /**
+     * 设置视频预览图地址
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventVideoPoster = function () {
+        this.Video.poster = OptionParams_model_1.default.OptionParams.poster;
+    };
+    /**
+     * 渲染视频播放列表
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventPlayVideoList = function () {
+        var _this = this;
+        var SideMenu = document.querySelectorAll("." + ClassName_config_1.ClassName.SideMenu + " .list_item");
+        SideMenu.forEach(function (v, index) {
+            v.onclick = function () {
+                _this.VideoProgress.style.backgroundSize = "0% 100%";
+                setTimeout(function () { return _this.VideoProgress.value = String(0); }, 1);
+                _this.VideoProgress.step = '0.000000000000000001';
+                _this.Video.src = OptionParams_model_1.default.OptionParams.playList[index].url;
+                _this.Play.classList.remove(ClassName_config_1.ClassName.Stop);
+                _this.Play.classList.add(ClassName_config_1.ClassName.Play);
+            };
+        });
+    };
+    /**
+     * 设置视频宽高
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventVideoSize = function () {
+        this.Video.parentElement.style.width = OptionParams_model_1.default.OptionParams.width;
+        this.Video.parentElement.style.height = OptionParams_model_1.default.OptionParams.height;
+    };
+    /**
+     * 设置视频的自动播放 和 是否静音
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventVideoAutoPlayAndMuted = function () {
+        this.Video.autoplay = OptionParams_model_1.default.OptionParams.autoplay;
+        this.Video.muted = OptionParams_model_1.default.OptionParams.muted;
+        // 谷歌等众多浏览器禁止video标签有声的自动播放，所以这里如果想实现有声而且自动播放视频那么需要特殊处理
+        // 前端用户需要开启 autoplay true 自动播放，muted true 静音
+        if (OptionParams_model_1.default.OptionParams.autoplay && OptionParams_model_1.default.OptionParams.muted) {
+            console.log("无声，自动播放");
+            this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+        }
+    };
+    /**
+     * 配置单个视频地址 & 多个清晰度视频地址
+     * @constructor
+     */
+    CoreSettingsUi.prototype.BindEventEndedVideoSetUrl = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var UL_1;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!(typeof OptionParams_model_1.default.OptionParams.url === "string")) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.Utils.CheckVideoType(OptionParams_model_1.default.OptionParams.url)
+                            // 多清晰度视频的数组
+                        ];
+                    case 1:
+                        _a.sent();
+                        return [3 /*break*/, 4];
+                    case 2: 
+                    // 数组默认第一条视频作为播放视频
+                    return [4 /*yield*/, this.Utils.CheckVideoType(OptionParams_model_1.default.OptionParams.url[0].url)];
+                    case 3:
+                        // 数组默认第一条视频作为播放视频
+                        _a.sent();
+                        UL_1 = document.createElement("ul");
+                        UL_1.className = "high";
+                        OptionParams_model_1.default.OptionParams.url.map(function (val, index) {
+                            var li = document.createElement("li");
+                            li.textContent = val.title;
+                            // 默认第一个显示激活样式
+                            index == 0 ? li.classList.toggle(ClassName_config_1.ClassName.Active) : null;
+                            li.onclick = function () { return __awaiter(_this, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0:
+                                            // 清除所有li激活类名
+                                            li.parentElement.childNodes.forEach(function (s) { return s.className = ""; });
+                                            // 为点击的里高亮激活
+                                            li.className = ClassName_config_1.ClassName.Active;
+                                            // 切换视频地址
+                                            return [4 /*yield*/, this.Utils.CheckVideoType(val.url)];
+                                        case 1:
+                                            // 切换视频地址
+                                            _a.sent();
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); };
+                            // 填充li到ul中
+                            UL_1.appendChild(li);
+                        });
+                        // 鼠标悬浮 显示清晰度选择菜单
+                        this.High.onmouseover = function () { return UL_1.style.display = "block"; };
+                        this.High.onmouseout = function () { return UL_1.style.display = "none"; };
+                        // 填充ul到清晰度选择的图标中
+                        this.High.appendChild(UL_1);
+                        _a.label = 4;
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], CoreSettingsUi.prototype, "Play", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLVideoElement)
+    ], CoreSettingsUi.prototype, "Video", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], CoreSettingsUi.prototype, "High", void 0);
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], CoreSettingsUi.prototype, "Utils", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLInputElement)
+    ], CoreSettingsUi.prototype, "VideoProgress", void 0);
+    return CoreSettingsUi;
+}());
+exports.CoreSettingsUi = CoreSettingsUi;
--- a/dist/core/ui/eventListeners.ui.js
+++ b/dist/core/ui/eventListeners.ui.js
@@ -0,0 +1,114 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventListenersUi = void 0;
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var ClassName_config_1 = require("../config/ClassName.config");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var index_utils_1 = require("../utils/index.utils");
+/**
+ * 视频播放的各种事件监听和处理
+ */
+var EventListenersUi = /** @class */ (function () {
+    function EventListenersUi() {
+    }
+    /**
+     * 监听 视频数据长度发生改变的时候去获取视频的总时间，
+     * 并设置到页面上显示出来
+     * @constructor
+     */
+    EventListenersUi.prototype.BindEventDurationchange = function () {
+        var _this = this;
+        this.Video.addEventListener('durationchange', function () {
+            _this.setVideoTime(_this.Video.duration);
+        });
+    };
+    // 播放按钮被点击，播放视频
+    EventListenersUi.prototype.BindEventEnded = function () {
+        var _this = this;
+        this.Video.addEventListener('ended', function () {
+            // 视频播放完成后，将暂停按钮样式改为播放状态
+            _this.Play.classList.toggle(ClassName_config_1.ClassName.Stop);
+            // 回调用户的事件
+            OptionParams_model_1.default.OptionParams.finish(_this.Video);
+        });
+    };
+    /**
+     * 视频播放过程中时间发生改变设置进度条进度
+     * @constructor
+     */
+    EventListenersUi.prototype.BindEventVideoTimeUpdate = function () {
+        var _this = this;
+        this.Video.ontimeupdate = function () {
+            // 进度条前进值 = 当前时间 / 总视频时间 * 100
+            var w = _this.Video.currentTime / _this.Video.duration * 100;
+            // 设置进度条已播放过的颜色
+            _this.VideoProgress.style.backgroundSize = w + "% 100%";
+            // 设置进度条方块前进值
+            _this.VideoProgress.value = String(w);
+            // 进度条步进值
+            _this.VideoProgress.step = '0.000000000000000001';
+            _this.setVideoTime();
+        };
+    };
+    /**
+     * 进度条被拖动的时候
+     * @constructor
+     */
+    EventListenersUi.prototype.BindEventVideoOnProgress = function () {
+        var _this = this;
+        this.VideoProgress.oninput = function () {
+            // 拿到被拖动滑块的滑动距离
+            var offsetX = _this.VideoProgress.value;
+            // 滑动后对应的视频播放时间  = 滑动距离 / 总距离 * 时间总时间
+            _this.Video.currentTime = offsetX / 100 * _this.Video.duration;
+            // 设置进度条已播放过的颜色
+            _this.VideoProgress.style.backgroundSize = offsetX + "% 100%";
+            // 拖动的时候自动播放了，所以把播放按钮改成暂停按钮
+            _this.Play.classList.add(ClassName_config_1.ClassName.Stop);
+            _this.setVideoTime();
+        };
+    };
+    /**
+     * 设置视频的 当前播放时间 / 视频总时间
+     */
+    EventListenersUi.prototype.setVideoTime = function (time) {
+        if (time === undefined) {
+            this.VideoTime.innerText = this.Utils.formatTime(this.Video.currentTime) + "/" + this.Utils.formatTime(this.Video.duration);
+        }
+        else {
+            this.VideoTime.innerText = this.Utils.formatTime(this.Video.currentTime) + "/" + this.Utils.formatTime(time);
+        }
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], EventListenersUi.prototype, "Play", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLMediaElement)
+    ], EventListenersUi.prototype, "Video", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLInputElement)
+    ], EventListenersUi.prototype, "VideoProgress", void 0);
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLElement)
+    ], EventListenersUi.prototype, "VideoTime", void 0);
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], EventListenersUi.prototype, "Utils", void 0);
+    return EventListenersUi;
+}());
+exports.EventListenersUi = EventListenersUi;
--- a/dist/core/ui/index.ui.js
+++ b/dist/core/ui/index.ui.js
@@ -0,0 +1,49 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApplicationUI = void 0;
+/// <reference path = "../../types/index.d.ts" />
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var index_utils_1 = require("../utils/index.utils");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var controls_ui_1 = require("./controls.ui");
+var eventListeners_ui_1 = require("./eventListeners.ui");
+var coreSettings_ui_1 = require("./coreSettings.ui");
+/**
+ * 生成播放器的Dom树，绑定各种事件处理
+ */
+var ApplicationUI = /** @class */ (function () {
+    function ApplicationUI() {
+    }
+    ApplicationUI.prototype.GenerateDom = function () {
+        // 获取用户传入的最外层父节点
+        this.el = this.Utils.$(OptionParams_model_1.default.OptionParams.el);
+        // 保存视频播放器的DOM树，后面需要操作DOM树，为各个按钮绑定事件处理
+        OptionParams_model_1.default.VideoDom = this.Utils.ParseDom(this.Utils.getLayout());
+        // 自动调用传入类中方法名包含 'BindEventxxx' 的方法
+        // 实现各种点击事件的自动绑定
+        this.Utils.callMethods([
+            coreSettings_ui_1.CoreSettingsUi, controls_ui_1.ControlsUi, eventListeners_ui_1.EventListenersUi
+        ]);
+        // 将模板pug和参数配置渲染后得到html string，转换为dom树，
+        // 然后将已经绑定好各种事件的dom注入到用户传入的 div 中给用户使用！！
+        this.el.appendChild(OptionParams_model_1.default.VideoDom);
+    };
+    __decorate([
+        Ioc_annotation_1.Inject(),
+        __metadata("design:type", index_utils_1.Utils)
+    ], ApplicationUI.prototype, "Utils", void 0);
+    ApplicationUI = __decorate([
+        Ioc_annotation_1.Injectable()
+    ], ApplicationUI);
+    return ApplicationUI;
+}());
+exports.ApplicationUI = ApplicationUI;
--- a/dist/core/utils/.pydio
+++ b/dist/core/utils/.pydio
@@ -0,0 +1 @@
+3aa64d68-ed8b-496e-8cb2-6ad35dab223c
--- a/dist/core/utils/index.utils.js
+++ b/dist/core/utils/index.utils.js
@@ -0,0 +1,206 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Utils = void 0;
+var OptionParams_model_1 = require("../model/OptionParams.model");
+var index_config_1 = require("../config/index.config");
+var Ioc_annotation_1 = require("../annotation/Ioc.annotation");
+var Hls = require("hls.js");
+var VideoMimeType_config_1 = require("../config/VideoMimeType.config");
+var Dom_annotation_1 = require("../annotation/Dom.annotation");
+var Utils = /** @class */ (function () {
+    function Utils() {
+    }
+    Utils.prototype.$ = function (el) {
+        return document.querySelector(el);
+    };
+    /**
+     * 自动调用类中的事件绑定方法
+     * @param params 类数组
+     */
+    Utils.prototype.callMethods = function (params) {
+        setTimeout(function () {
+            return params.forEach(function (val) {
+                return Object.getOwnPropertyNames(val.prototype).splice(1).filter(function (f) {
+                    return f.includes("BindEvent");
+                }).forEach(function (v) {
+                    return (new val())[v]();
+                });
+            });
+        }, 400);
+    };
+    /**
+     * 修改元素类名
+     * @param dom
+     * @param className
+     */
+    Utils.prototype.addClassName = function (dom, className) {
+        dom.classList.toggle(className);
+    };
+    /**
+     * 视同用户填入的模板，传入配置，渲染输出HTML
+     */
+    Utils.prototype.getLayout = function () {
+        var render = require("../../assets/tpl/" + OptionParams_model_1.default.OptionParams.layout + ".pug");
+        return render({ params: Object.assign(OptionParams_model_1.default.OptionParams, index_config_1.Config.IconConfig) });
+    };
+    /**
+     * 将 string 转换为 dom 元素
+     * @param arg
+     * @constructor
+     */
+    Utils.prototype.ParseDom = function (arg) {
+        var objE = document.createElement("div");
+        objE.innerHTML = arg;
+        return objE.childNodes[0];
+    };
+    Utils.prototype.Render = function () {
+        // // 获取dom树中最后一个child也就是 script
+        // let oldScript = father.lastChild;
+        // // 从dom树中删除 script 代码，因为不管是innerHTML还是appendChild dom中的script都不执行
+        // // 所以需要特殊处理
+        // father.removeChild(father.childNodes[father.childNodes.length-1])
+        // // 将去除 script 后的dom树插入到网页中
+        // el.appendChild(father);
+        //
+        // // 生成 script，写入 js，插入 到网页中，这时候js可以执行！
+        // let newScript = document.createElement('script');
+        // newScript.type = 'text/javascript';
+        // newScript.innerHTML = (oldScript as HTMLElement).innerHTML;
+        // el.appendChild(newScript);
+    };
+    /**
+     * 使用fetch 获取视频地址的编码类型，
+     * 然后采用不同的播放方式
+     * @constructor
+     */
+    Utils.prototype.CheckVideoType = function (URL) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, fetch("http://localhost:9000/check/url?url=" + URL)
+                            .then(function (res) {
+                            return res.json();
+                        })
+                            .then(function (res) {
+                            switch (res.result) {
+                                // HLS 播放支持
+                                case VideoMimeType_config_1.VideoMimeType.HLS:
+                                    _this.PlayHls(_this.Video, URL);
+                                    break;
+                                // MP4播放支持
+                                case VideoMimeType_config_1.VideoMimeType.MP4:
+                                    _this.Video.src = URL;
+                                    break;
+                                // MP4不同编码的播放支持
+                                case VideoMimeType_config_1.VideoMimeType.STREA:
+                                    _this.Video.src = URL;
+                                    break;
+                                default:
+                                    throw new Error("不支持播放的视频地址");
+                            }
+                        })];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * 下载文件
+     * @param href 文件地址
+     * @param fileType 文件类型
+     */
+    Utils.prototype.downLoadFile = function (href, fileType) {
+        if (fileType === void 0) { fileType = 'image/png'; }
+        var dlLink = document.createElement('a');
+        dlLink.download = "AVideo_" + (new Date()).valueOf().toString();
+        dlLink.href = href;
+        dlLink.dataset.downloadurl = [fileType, dlLink.download, dlLink.href].join(':');
+        document.body.appendChild(dlLink);
+        dlLink.click();
+        document.body.removeChild(dlLink);
+    };
+    /**
+     * 格式化时间
+     * @param t
+     */
+    Utils.prototype.formatTime = function (t) {
+        if (isNaN(t)) {
+            return "00:00:00";
+        }
+        var h = parseInt(String(t / 3600));
+        h = h < 10 ? '0' + h : h;
+        var m = parseInt(String(t % 3600 / 60));
+        m = m < 10 ? '0' + m : m;
+        var s = parseInt(String(t % 60));
+        s = s < 10 ? '0' + s : s;
+        return h + ':' + m + ':' + s;
+    };
+    /**
+     * 使用插件 hls.js 播放视频
+     * @param Video
+     * @param url
+     * @constructor
+     */
+    Utils.prototype.PlayHls = function (Video, url) {
+        var hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(Video);
+    };
+    __decorate([
+        Dom_annotation_1.Dom(),
+        __metadata("design:type", HTMLVideoElement)
+    ], Utils.prototype, "Video", void 0);
+    Utils = __decorate([
+        Ioc_annotation_1.Injectable()
+    ], Utils);
+    return Utils;
+}());
+exports.Utils = Utils;
--- a/dist/hls.js
+++ b/dist/hls.js
--- a/dist/index.html
+++ b/dist/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title></title>
+    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1980004_lnqny5kta9g.css">
+    <style>
+        .vip_join {
+            color: #61bd12;
+        }
+    </style>
+    <link href="AVideo.min.css" rel="stylesheet">
+</head>
+
+<body>
+
+    <div id="app"></div>
+    <script src="AVideo.min.js"></script>
+
+</body>
+
+<script>
+    // 阿里云视频 https://player.alicdn.com/video/editor.mp4
+    // 七牛云视频 http://demo-videos.qnsdk.com/movies/qiniu.mp4
+    // m3u8 地址 http://video.geekhelp.cn/vue33
+    new AVideo({
+        el: '#app',
+        // url: 'http://video.geekhelp.cn/vue33',
+        url: [
+            { title: '高清', url: '1.mp4' },
+            { title: '标清', url: '2.mp4' },
+            { title: '低清', url: '3.mp4' },
+        ],
+        title: '测试传入视频播放标题',
+        width: '60%',  // 播放器高度
+        height: '600px', // 播放器宽度
+        autoplay: false, // 是否开启自动播放
+        muted: false, // 是否静音 true 静音，false 不静音
+        // 需要什么控件就把对应的值设为 true，不需要就false或者不填key
+        controls: {
+            speed: true,  // 倍速播放
+            rotate: true, // 需要视频旋转按钮
+            image: true, // 需要视频镜像按钮
+            play: true,  // 需要视频播放按钮
+            loop: true,  // 需要视频循环播放按钮
+            PictureInPicture: true, // 需要视频的画中画功能
+            ScreenShot: true, // 是否需要截图按钮
+        },
+        finish: (video) => {
+            console.log("视频播放完成：", video)
+        },
+        // 播放列表
+        playList: [
+            { title: '传入视频播放列表测试1', url: '1.mp4' },
+            { title: '传入视频播放列表测试2', url: '2.mp4' },
+            { title: '传入视频播放列表测试3', url: '3.mp4' },
+            { title: '传入视频播放列表测试4', url: '4.mp4' },
+            { title: '传入视频播放列表测试5', url: '5.mp4' },
+        ],
+        // 预览图地址
+        poster: 'http://5b0988e595225.cdn.sohucs.com/images/20190705/52ea928741394f959974ec4e34860bcf.jpeg'
+    });
+</script>
+
+</html>