├── .gitignore
├── README.md
├── babel.config.js
├── lib
    ├── canvas-player.common.js
    ├── canvas-player.common.js.map
    ├── canvas-player.umd.js
    ├── canvas-player.umd.js.map
    ├── canvas-player.umd.min.js
    ├── canvas-player.umd.min.js.map
    └── demo.html
├── package-lock.json
├── package.json
├── src
    ├── canvasPlayer.vue
    ├── data.js
    ├── index.js
    └── style
    │   └── style.css
├── vue.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 使用canvas渲染的视频混剪播放器,无缝拼接不同的视频源
 2 | 
 3 | ## ![说明文档](https://img.shields.io/badge/说明文档-v1.0.3-brightgreen.svg)
 4 | 
 5 | 预览地址：http://canvas-v.epochy.cn/
 6 | 
 7 | ![说明文档](http://canvas-v.epochy.cn/img/preview.png)
 8 | ## 安装canvas-video-player 
 9 | ```
10 | npm i canvas-video-player
11 | //or
12 | yarn add canvas-video-player
13 | ```
14 | 
15 | ## 使用方式
16 | 
17 | 在Vue2.x项目中使用，首先需要在main.js中引入、全局注册
18 | ```
19 | import canvasPlayer from "canvas-video-player"
20 | 
21 | Vue.use(canvasPlayer)
22 | ```
23 | 在要使用的组件中，采用API的方式调用
24 | 例如：
25 | ```
26 | <template>
27 |   <div id="app">
28 |     <button @click="play">我是视频播放器</button>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | 
34 | export default {
35 |   name: 'App',
36 |    data() {
37 |     return {
38 |       list: [
39 |         {
40 |           url: '**视频地址1**',
41 |           // 视频的尺寸
42 |           width: 1080,
43 |           height: 1920,
44 |           // 摆放logo的位置
45 |           logoPosition: {
46 |             x: 'left',
47 |             y: 'top',
48 |           },
49 |           // 播放截取的时段
50 |           playPoint: {
51 |             end: '3.120000',
52 |             start: '0',
53 |           },
54 |         },
55 |         {
56 |           url: '**视频地址2**',
57 |           // 视频的尺寸
58 |           width: 1080,
59 |           height: 1920,
60 |           // 摆放logo的位置
61 |           logoPosition: {
62 |             x: 'left',
63 |             y: 'top',
64 |           },
65 |           // 播放截取的时段
66 |           playPoint: {
67 |             end: '3.120000',
68 |             start: '0',
69 |           },
70 |         },
71 |         //...不限制视频个数，无限多
72 |       ],
73 |     }
74 |   },
75 |   methods:{
76 |     play(){
77 |       // 不传自定义数据，可以查看播放器的默认效果
78 |       this.$canvasVideoPlayer(this.list)
79 |     }
80 |   }
81 | }
82 | </script>
83 | ```
84 | 
85 | >喜欢点个小星星 (*^▽^*)
86 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/lib/canvas-player.umd.min.js:
--------------------------------------------------------------------------------
1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define("canvas-player",[],e):"object"===typeof exports?exports["canvas-player"]=e(require("vue")):t["canvas-player"]=e(t["Vue"])})("undefined"!==typeof self?self:this,(function(t){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fb15")}({"00ee":function(t,e,n){var r=n("b622"),o=r("toStringTag"),i={};i[o]="z",t.exports="[object z]"===String(i)},"0366":function(t,e,n){var r=n("1c0b");t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 0:return function(){return t.call(e)};case 1:return function(n){return t.call(e,n)};case 2:return function(n,r){return t.call(e,n,r)};case 3:return function(n,r,o){return t.call(e,n,r,o)}}return function(){return t.apply(e,arguments)}}},"06cf":function(t,e,n){var r=n("83ab"),o=n("d1e7"),i=n("5c6c"),a=n("fc6a"),s=n("c04e"),c=n("5135"),u=n("0cfb"),f=Object.getOwnPropertyDescriptor;e.f=r?f:function(t,e){if(t=a(t),e=s(e,!0),u)try{return f(t,e)}catch(n){}if(c(t,e))return i(!o.f.call(t,e),t[e])}},"0cfb":function(t,e,n){var r=n("83ab"),o=n("d039"),i=n("cc12");t.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},1148:function(t,e,n){"use strict";var r=n("a691"),o=n("1d80");t.exports=function(t){var e=String(o(this)),n="",i=r(t);if(i<0||i==1/0)throw RangeError("Wrong number of repetitions");for(;i>0;(i>>>=1)&&(e+=e))1&i&&(n+=e);return n}},"19aa":function(t,e){t.exports=function(t,e,n){if(!(t instanceof e))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return t}},"1b7f":function(t,e,n){"use strict";n("e79a")},"1be4":function(t,e,n){var r=n("d066");t.exports=r("document","documentElement")},"1c0b":function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(String(t)+" is not a function");return t}},"1c7e":function(t,e,n){var r=n("b622"),o=r("iterator"),i=!1;try{var a=0,s={next:function(){return{done:!!a++}},return:function(){i=!0}};s[o]=function(){return this},Array.from(s,(function(){throw 2}))}catch(c){}t.exports=function(t,e){if(!e&&!i)return!1;var n=!1;try{var r={};r[o]=function(){return{next:function(){return{done:n=!0}}}},t(r)}catch(c){}return n}},"1cdc":function(t,e,n){var r=n("342f");t.exports=/(?:iphone|ipod|ipad).*applewebkit/i.test(r)},"1d80":function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},"1dde":function(t,e,n){var r=n("d039"),o=n("b622"),i=n("2d00"),a=o("species");t.exports=function(t){return i>=51||!r((function(){var e=[],n=e.constructor={};return n[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},2150:function(t,e,n){var r=n("24fb"),o=n("f7bc");e=r(!1),e.i(o),e.push([t.i,"",""]),t.exports=e},2266:function(t,e,n){var r=n("825a"),o=n("e95a"),i=n("50c4"),a=n("0366"),s=n("35a1"),c=n("2a62"),u=function(t,e){this.stopped=t,this.result=e};t.exports=function(t,e,n){var f,p,d,l,h,v,m,y=n&&n.that,g=!(!n||!n.AS_ENTRIES),x=!(!n||!n.IS_ITERATOR),b=!(!n||!n.INTERRUPTED),w=a(e,y,1+g+b),k=function(t){return f&&c(f),new u(!0,t)},j=function(t){return g?(r(t),b?w(t[0],t[1],k):w(t[0],t[1])):b?w(t,k):w(t)};if(x)f=t;else{if(p=s(t),"function"!=typeof p)throw TypeError("Target is not iterable");if(o(p)){for(d=0,l=i(t.length);l>d;d++)if(h=j(t[d]),h&&h instanceof u)return h;return new u(!1)}f=p.call(t)}v=f.next;while(!(m=v.call(f)).done){try{h=j(m.value)}catch(E){throw c(f),E}if("object"==typeof h&&h&&h instanceof u)return h}return new u(!1)}},"23cb":function(t,e,n){var r=n("a691"),o=Math.max,i=Math.min;t.exports=function(t,e){var n=r(t);return n<0?o(n+e,0):i(n,e)}},"23e7":function(t,e,n){var r=n("da84"),o=n("06cf").f,i=n("9112"),a=n("6eeb"),s=n("ce4e"),c=n("e893"),u=n("94ca");t.exports=function(t,e){var n,f,p,d,l,h,v=t.target,m=t.global,y=t.stat;if(f=m?r:y?r[v]||s(v,{}):(r[v]||{}).prototype,f)for(p in e){if(l=e[p],t.noTargetGet?(h=o(f,p),d=h&&h.value):d=f[p],n=u(m?p:v+(y?".":"#")+p,t.forced),!n&&void 0!==d){if(typeof l===typeof d)continue;c(l,d)}(t.sham||d&&d.sham)&&i(l,"sham",!0),a(f,p,l,t)}}},"241c":function(t,e,n){var r=n("ca84"),o=n("7839"),i=o.concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,i)}},"24fb":function(t,e,n){"use strict";function r(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"===typeof btoa){var i=o(r),a=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(t," */")}));return[n].concat(a).concat([i]).join("\n")}return[n].join("\n")}function o(t){var e=btoa(unescape(encodeURIComponent(JSON.stringify(t)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(e);return"/*# ".concat(n," */")}t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=r(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,r){"string"===typeof t&&(t=[[null,t,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<t.length;s++){var c=[].concat(t[s]);r&&o[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),e.push(c))}},e}},2626:function(t,e,n){"use strict";var r=n("d066"),o=n("9bf2"),i=n("b622"),a=n("83ab"),s=i("species");t.exports=function(t){var e=r(t),n=o.f;a&&e&&!e[s]&&n(e,s,{configurable:!0,get:function(){return this}})}},"2a41":function(t,e,n){var r=n("24fb");e=r(!1),e.push([t.i,".popup-layer[data-v-2177a880]{position:fixed;left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,.85);color:#fff}.popup-layer .video-player-wrapper[data-v-2177a880]{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;justify-content:center;align-items:center}.popup-layer .popup-layer-btn-close[data-v-2177a880]{position:absolute;right:20px;top:20px;width:50px;color:hsla(0,0%,100%,.8);text-align:center;font-style:normal;font-size:40px;line-height:30px;cursor:pointer;padding:6px 0 12px;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.popup-layer .popup-layer-btn-close[data-v-2177a880]:hover{background:hsla(0,0%,100%,.05);color:#fff}#VideoDom[data-v-2177a880]{font-size:0;line-height:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}#VideoDom[data-v-2177a880],#VideoDom #canvasDom[data-v-2177a880]{position:relative}#VideoDom #canvasDom #progressBar[data-v-2177a880]{position:absolute;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;bottom:0;width:100%;background:rgba(0,0,0,.521);z-index:99;opacity:0;transition:all .5s}#VideoDom #canvasDom #progressBar .left-box[data-v-2177a880]{display:flex;align-items:center;justify-content:flex-start;width:50%}#VideoDom #canvasDom #progressBar .left-box .btn[data-v-2177a880]{height:100%;color:#000;margin-right:2px;background:transparent;border:none}#VideoDom #canvasDom #progressBar .left-box .btn button[data-v-2177a880]{margin:10px;padding:0;box-sizing:border-box;border:transparent;background:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#VideoDom #canvasDom #progressBar .left-box .btn button.play[data-v-2177a880]{height:20px;border-style:solid;outline:none;border-width:10px 0 10px 18px;border-color:transparent transparent transparent #00a1d6;transition:all .1s linear}#VideoDom #canvasDom #progressBar .left-box .btn button.pause[data-v-2177a880]{border-style:double;border-width:0 0 0 18px;border-color:#00a1d6}#VideoDom #canvasDom #progressBar .left-box .total-time[data-v-2177a880]{color:#e3e3e3;font-size:15px;line-height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#VideoDom #canvasDom #progressBar .bar[data-v-2177a880]{display:flex;align-items:center;margin:10px auto 0;width:98%;height:7px;border-radius:10px;background:hsla(0,0%,44.3%,.43137254901960786);transition:all .2s;cursor:pointer}#VideoDom #canvasDom #progressBar .bar .line[data-v-2177a880]{position:relative;width:100%;height:100%;background:#00a1d6;border-radius:5px;-webkit-animation-timing-function:linear;animation-timing-function:linear}#VideoDom #canvasDom #progressBar .bar .line.trans[data-v-2177a880]{transition:all .5s}#VideoDom #canvasDom #progressBar .bar .line.play[data-v-2177a880]{-webkit-animation-play-state:running;animation-play-state:running}#VideoDom #canvasDom #progressBar .bar .line.pause[data-v-2177a880]{-webkit-animation-play-state:paused;animation-play-state:paused}#VideoDom #canvasDom #progressBar .bar #circle[data-v-2177a880]{position:relative;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:#fff;pointer-events:none}#VideoDom #canvasDom #progressBar .bar #circle.trans[data-v-2177a880]{pointer-events:auto;transition:all .5s}#VideoDom #canvasDom #progressBar:hover .bar[data-v-2177a880]{height:13px;transition:all .2s}#VideoDom #canvasDom #progressBar:hover .bar #circle[data-v-2177a880]{height:14px;width:14px}#VideoDom #canvasDom #progressBar.show[data-v-2177a880]{opacity:1}#VideoDom #canvasDom:hover #progressBar[data-v-2177a880]{opacity:1;transition:all 1s}",""]),t.exports=e},"2a62":function(t,e,n){var r=n("825a");t.exports=function(t){var e=t["return"];if(void 0!==e)return r(e.call(t)).value}},"2cf4":function(t,e,n){var r,o,i,a=n("da84"),s=n("d039"),c=n("0366"),u=n("1be4"),f=n("cc12"),p=n("1cdc"),d=n("605d"),l=a.location,h=a.setImmediate,v=a.clearImmediate,m=a.process,y=a.MessageChannel,g=a.Dispatch,x=0,b={},w="onreadystatechange",k=function(t){if(b.hasOwnProperty(t)){var e=b[t];delete b[t],e()}},j=function(t){return function(){k(t)}},E=function(t){k(t.data)},S=function(t){a.postMessage(t+"",l.protocol+"//"+l.host)};h&&v||(h=function(t){var e=[],n=1;while(arguments.length>n)e.push(arguments[n++]);return b[++x]=function(){("function"==typeof t?t:Function(t)).apply(void 0,e)},r(x),x},v=function(t){delete b[t]},d?r=function(t){m.nextTick(j(t))}:g&&g.now?r=function(t){g.now(j(t))}:y&&!p?(o=new y,i=o.port2,o.port1.onmessage=E,r=c(i.postMessage,i,1)):a.addEventListener&&"function"==typeof postMessage&&!a.importScripts&&l&&"file:"!==l.protocol&&!s(S)?(r=S,a.addEventListener("message",E,!1)):r=w in f("script")?function(t){u.appendChild(f("script"))[w]=function(){u.removeChild(this),k(t)}}:function(t){setTimeout(j(t),0)}),t.exports={set:h,clear:v}},"2d00":function(t,e,n){var r,o,i=n("da84"),a=n("342f"),s=i.process,c=s&&s.versions,u=c&&c.v8;u?(r=u.split("."),o=r[0]<4?1:r[0]+r[1]):a&&(r=a.match(/Edge\/(\d+)/),(!r||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/),r&&(o=r[1]))),t.exports=o&&+o},"342f":function(t,e,n){var r=n("d066");t.exports=r("navigator","userAgent")||""},"35a1":function(t,e,n){var r=n("f5df"),o=n("3f8c"),i=n("b622"),a=i("iterator");t.exports=function(t){if(void 0!=t)return t[a]||t["@@iterator"]||o[r(t)]}},"3bbe":function(t,e,n){var r=n("861d");t.exports=function(t){if(!r(t)&&null!==t)throw TypeError("Can't set "+String(t)+" as a prototype");return t}},"3f8c":function(t,e){t.exports={}},"408a":function(t,e,n){var r=n("c6b6");t.exports=function(t){if("number"!=typeof t&&"Number"!=r(t))throw TypeError("Incorrect invocation");return+t}},"428f":function(t,e,n){var r=n("da84");t.exports=r},"44ad":function(t,e,n){var r=n("d039"),o=n("c6b6"),i="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==o(t)?i.call(t,""):Object(t)}:Object},"44de":function(t,e,n){var r=n("da84");t.exports=function(t,e){var n=r.console;n&&n.error&&(1===arguments.length?n.error(t):n.error(t,e))}},4840:function(t,e,n){var r=n("825a"),o=n("1c0b"),i=n("b622"),a=i("species");t.exports=function(t,e){var n,i=r(t).constructor;return void 0===i||void 0==(n=r(i)[a])?e:o(n)}},4930:function(t,e,n){var r=n("2d00"),o=n("d039");t.exports=!!Object.getOwnPropertySymbols&&!o((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&r&&r<41}))},"499e":function(t,e,n){"use strict";function r(t,e){for(var n=[],r={},o=0;o<e.length;o++){var i=e[o],a=i[0],s=i[1],c=i[2],u=i[3],f={id:t+":"+o,css:s,media:c,sourceMap:u};r[a]?r[a].parts.push(f):n.push(r[a]={id:a,parts:[f]})}return n}n.r(e),n.d(e,"default",(function(){return h}));var o="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},a=o&&(document.head||document.getElementsByTagName("head")[0]),s=null,c=0,u=!1,f=function(){},p=null,d="data-vue-ssr-id",l="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function h(t,e,n,o){u=n,p=o||{};var a=r(t,e);return v(a),function(e){for(var n=[],o=0;o<a.length;o++){var s=a[o],c=i[s.id];c.refs--,n.push(c)}e?(a=r(t,e),v(a)):a=[];for(o=0;o<n.length;o++){c=n[o];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete i[c.id]}}}}function v(t){for(var e=0;e<t.length;e++){var n=t[e],r=i[n.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](n.parts[o]);for(;o<n.parts.length;o++)r.parts.push(y(n.parts[o]));r.parts.length>n.parts.length&&(r.parts.length=n.parts.length)}else{var a=[];for(o=0;o<n.parts.length;o++)a.push(y(n.parts[o]));i[n.id]={id:n.id,refs:1,parts:a}}}}function m(){var t=document.createElement("style");return t.type="text/css",a.appendChild(t),t}function y(t){var e,n,r=document.querySelector("style["+d+'~="'+t.id+'"]');if(r){if(u)return f;r.parentNode.removeChild(r)}if(l){var o=c++;r=s||(s=m()),e=x.bind(null,r,o,!1),n=x.bind(null,r,o,!0)}else r=m(),e=b.bind(null,r),n=function(){r.parentNode.removeChild(r)};return e(t),function(r){if(r){if(r.css===t.css&&r.media===t.media&&r.sourceMap===t.sourceMap)return;e(t=r)}else n()}}var g=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}();function x(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=g(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function b(t,e){var n=e.css,r=e.media,o=e.sourceMap;if(r&&t.setAttribute("media",r),p.ssrId&&t.setAttribute(d,e.id),o&&(n+="\n/*# sourceURL="+o.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),t.styleSheet)t.styleSheet.cssText=n;else{while(t.firstChild)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}},"4d16":function(t,e,n){"use strict";n("fecd")},"4d64":function(t,e,n){var r=n("fc6a"),o=n("50c4"),i=n("23cb"),a=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),f=i(a,u);if(t&&n!=n){while(u>f)if(s=c[f++],s!=s)return!0}else for(;u>f;f++)if((t||f in c)&&c[f]===n)return t||f||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},"50c4":function(t,e,n){var r=n("a691"),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},5135:function(t,e,n){var r=n("7b0b"),o={}.hasOwnProperty;t.exports=Object.hasOwn||function(t,e){return o.call(r(t),e)}},5692:function(t,e,n){var r=n("c430"),o=n("c6cd");(t.exports=function(t,e){return o[t]||(o[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.15.2",mode:r?"pure":"global",copyright:"© 2021 Denis Pushkarev (zloirock.ru)"})},"56ef":function(t,e,n){var r=n("d066"),o=n("241c"),i=n("7418"),a=n("825a");t.exports=r("Reflect","ownKeys")||function(t){var e=o.f(a(t)),n=i.f;return n?e.concat(n(t)):e}},"5c6c":function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"605d":function(t,e,n){var r=n("c6b6"),o=n("da84");t.exports="process"==r(o.process)},6069:function(t,e){t.exports="object"==typeof window},"65f0":function(t,e,n){var r=n("861d"),o=n("e8b5"),i=n("b622"),a=i("species");t.exports=function(t,e){var n;return o(t)&&(n=t.constructor,"function"!=typeof n||n!==Array&&!o(n.prototype)?r(n)&&(n=n[a],null===n&&(n=void 0)):n=void 0),new(void 0===n?Array:n)(0===e?0:e)}},"69f3":function(t,e,n){var r,o,i,a=n("7f9a"),s=n("da84"),c=n("861d"),u=n("9112"),f=n("5135"),p=n("c6cd"),d=n("f772"),l=n("d012"),h="Object already initialized",v=s.WeakMap,m=function(t){return i(t)?o(t):r(t,{})},y=function(t){return function(e){var n;if(!c(e)||(n=o(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}};if(a||p.state){var g=p.state||(p.state=new v),x=g.get,b=g.has,w=g.set;r=function(t,e){if(b.call(g,t))throw new TypeError(h);return e.facade=t,w.call(g,t,e),e},o=function(t){return x.call(g,t)||{}},i=function(t){return b.call(g,t)}}else{var k=d("state");l[k]=!0,r=function(t,e){if(f(t,k))throw new TypeError(h);return e.facade=t,u(t,k,e),e},o=function(t){return f(t,k)?t[k]:{}},i=function(t){return f(t,k)}}t.exports={set:r,get:o,has:i,enforce:m,getterFor:y}},"6eeb":function(t,e,n){var r=n("da84"),o=n("9112"),i=n("5135"),a=n("ce4e"),s=n("8925"),c=n("69f3"),u=c.get,f=c.enforce,p=String(String).split("String");(t.exports=function(t,e,n,s){var c,u=!!s&&!!s.unsafe,d=!!s&&!!s.enumerable,l=!!s&&!!s.noTargetGet;"function"==typeof n&&("string"!=typeof e||i(n,"name")||o(n,"name",e),c=f(n),c.source||(c.source=p.join("string"==typeof e?e:""))),t!==r?(u?!l&&t[e]&&(d=!0):delete t[e],d?t[e]=n:o(t,e,n)):d?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&u(this).source||s(this)}))},7418:function(t,e){e.f=Object.getOwnPropertySymbols},7839:function(t,e){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},"7b0b":function(t,e,n){var r=n("1d80");t.exports=function(t){return Object(r(t))}},"7f9a":function(t,e,n){var r=n("da84"),o=n("8925"),i=r.WeakMap;t.exports="function"===typeof i&&/native code/.test(o(i))},"825a":function(t,e,n){var r=n("861d");t.exports=function(t){if(!r(t))throw TypeError(String(t)+" is not an object");return t}},"83ab":function(t,e,n){var r=n("d039");t.exports=!r((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},"861d":function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},8875:function(t,e,n){var r,o,i;(function(n,a){o=[],r=a,i="function"===typeof r?r.apply(e,o):r,void 0===i||(t.exports=i)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(l){var n,r,o,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,a=/@([^@]*):(\d+):(\d+)\s*$/gi,s=i.exec(l.stack)||a.exec(l.stack),c=s&&s[1]||!1,u=s&&s[2]||!1,f=document.location.href.replace(document.location.hash,""),p=document.getElementsByTagName("script");c===f&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(u-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=n.replace(r,"$1").trim());for(var d=0;d<p.length;d++){if("interactive"===p[d].readyState)return p[d];if(p[d].src===c)return p[d];if(c===f&&p[d].innerHTML&&p[d].innerHTML.trim()===o)return p[d]}return null}}return t}))},8925:function(t,e,n){var r=n("c6cd"),o=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(t){return o.call(t)}),t.exports=r.inspectSource},"8bbf":function(e,n){e.exports=t},"90e3":function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol("+String(void 0===t?"":t)+")_"+(++n+r).toString(36)}},9112:function(t,e,n){var r=n("83ab"),o=n("9bf2"),i=n("5c6c");t.exports=r?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},"94ca":function(t,e,n){var r=n("d039"),o=/#|\.prototype\./,i=function(t,e){var n=s[a(t)];return n==u||n!=c&&("function"==typeof e?r(e):!!e)},a=i.normalize=function(t){return String(t).replace(o,".").toLowerCase()},s=i.data={},c=i.NATIVE="N",u=i.POLYFILL="P";t.exports=i},"96cf":function(t,e,n){var r=function(t){"use strict";var e,n=Object.prototype,r=n.hasOwnProperty,o="function"===typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",s=o.toStringTag||"@@toStringTag";function c(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{c({},"")}catch(P){c=function(t,e,n){return t[e]=n}}function u(t,e,n,r){var o=e&&e.prototype instanceof m?e:m,i=Object.create(o.prototype),a=new C(r||[]);return i._invoke=S(t,n,a),i}function f(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(P){return{type:"throw",arg:P}}}t.wrap=u;var p="suspendedStart",d="suspendedYield",l="executing",h="completed",v={};function m(){}function y(){}function g(){}var x={};c(x,i,(function(){return this}));var b=Object.getPrototypeOf,w=b&&b(b(L([])));w&&w!==n&&r.call(w,i)&&(x=w);var k=g.prototype=m.prototype=Object.create(x);function j(t){["next","throw","return"].forEach((function(e){c(t,e,(function(t){return this._invoke(e,t)}))}))}function E(t,e){function n(o,i,a,s){var c=f(t[o],t,i);if("throw"!==c.type){var u=c.arg,p=u.value;return p&&"object"===typeof p&&r.call(p,"__await")?e.resolve(p.__await).then((function(t){n("next",t,a,s)}),(function(t){n("throw",t,a,s)})):e.resolve(p).then((function(t){u.value=t,a(u)}),(function(t){return n("throw",t,a,s)}))}s(c.arg)}var o;function i(t,r){function i(){return new e((function(e,o){n(t,r,e,o)}))}return o=o?o.then(i,i):i()}this._invoke=i}function S(t,e,n){var r=p;return function(o,i){if(r===l)throw new Error("Generator is already running");if(r===h){if("throw"===o)throw i;return D()}n.method=o,n.arg=i;while(1){var a=n.delegate;if(a){var s=T(a,n);if(s){if(s===v)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===p)throw r=h,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=l;var c=f(t,e,n);if("normal"===c.type){if(r=n.done?h:d,c.arg===v)continue;return{value:c.arg,done:n.done}}"throw"===c.type&&(r=h,n.method="throw",n.arg=c.arg)}}}function T(t,n){var r=t.iterator[n.method];if(r===e){if(n.delegate=null,"throw"===n.method){if(t.iterator["return"]&&(n.method="return",n.arg=e,T(t,n),"throw"===n.method))return v;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return v}var o=f(r,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,v;var i=o.arg;return i?i.done?(n[t.resultName]=i.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,v):i:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,v)}function O(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function C(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(O,this),this.reset(!0)}function L(t){if(t){var n=t[i];if(n)return n.call(t);if("function"===typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function n(){while(++o<t.length)if(r.call(t,o))return n.value=t[o],n.done=!1,n;return n.value=e,n.done=!0,n};return a.next=a}}return{next:D}}function D(){return{value:e,done:!0}}return y.prototype=g,c(k,"constructor",g),c(g,"constructor",y),y.displayName=c(g,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"===typeof t&&t.constructor;return!!e&&(e===y||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,g):(t.__proto__=g,c(t,s,"GeneratorFunction")),t.prototype=Object.create(k),t},t.awrap=function(t){return{__await:t}},j(E.prototype),c(E.prototype,a,(function(){return this})),t.AsyncIterator=E,t.async=function(e,n,r,o,i){void 0===i&&(i=Promise);var a=new E(u(e,n,r,o),i);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},j(k),c(k,s,"Generator"),c(k,i,(function(){return this})),c(k,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){while(e.length){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=L,C.prototype={constructor:C,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(_),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0],e=t.completion;if("throw"===e.type)throw e.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function o(r,o){return s.type="throw",s.arg=t,n.next=r,o&&(n.method="next",n.arg=e),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],s=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=r.call(a,"catchLoc"),u=r.call(a,"finallyLoc");if(c&&u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!u)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var n=this.tryEntries.length-1;n>=0;--n){var o=this.tryEntries[n];if(o.tryLoc<=this.prev&&r.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),v},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),_(n),v}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var o=r.arg;_(n)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:L(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),v}},t}(t.exports);try{regeneratorRuntime=r}catch(o){"object"===typeof globalThis?globalThis.regeneratorRuntime=r:Function("r","regeneratorRuntime = r")(r)}},"9bf2":function(t,e,n){var r=n("83ab"),o=n("0cfb"),i=n("825a"),a=n("c04e"),s=Object.defineProperty;e.f=r?s:function(t,e,n){if(i(t),e=a(e,!0),i(n),o)try{return s(t,e,n)}catch(r){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(t[e]=n.value),t}},a4b4:function(t,e,n){var r=n("342f");t.exports=/web0s(?!.*chrome)/i.test(r)},a691:function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},b041:function(t,e,n){"use strict";var r=n("00ee"),o=n("f5df");t.exports=r?{}.toString:function(){return"[object "+o(this)+"]"}},b575:function(t,e,n){var r,o,i,a,s,c,u,f,p=n("da84"),d=n("06cf").f,l=n("2cf4").set,h=n("1cdc"),v=n("a4b4"),m=n("605d"),y=p.MutationObserver||p.WebKitMutationObserver,g=p.document,x=p.process,b=p.Promise,w=d(p,"queueMicrotask"),k=w&&w.value;k||(r=function(){var t,e;m&&(t=x.domain)&&t.exit();while(o){e=o.fn,o=o.next;try{e()}catch(n){throw o?a():i=void 0,n}}i=void 0,t&&t.enter()},h||m||v||!y||!g?b&&b.resolve?(u=b.resolve(void 0),u.constructor=b,f=u.then,a=function(){f.call(u,r)}):a=m?function(){x.nextTick(r)}:function(){l.call(p,r)}:(s=!0,c=g.createTextNode(""),new y(r).observe(c,{characterData:!0}),a=function(){c.data=s=!s})),t.exports=k||function(t){var e={fn:t,next:void 0};i&&(i.next=e),o||(o=e,a()),i=e}},b622:function(t,e,n){var r=n("da84"),o=n("5692"),i=n("5135"),a=n("90e3"),s=n("4930"),c=n("fdbf"),u=o("wks"),f=r.Symbol,p=c?f:f&&f.withoutSetter||a;t.exports=function(t){return i(u,t)&&(s||"string"==typeof u[t])||(s&&i(f,t)?u[t]=f[t]:u[t]=p("Symbol."+t)),u[t]}},b680:function(t,e,n){"use strict";var r=n("23e7"),o=n("a691"),i=n("408a"),a=n("1148"),s=n("d039"),c=1..toFixed,u=Math.floor,f=function(t,e,n){return 0===e?n:e%2===1?f(t,e-1,n*t):f(t*t,e/2,n)},p=function(t){var e=0,n=t;while(n>=4096)e+=12,n/=4096;while(n>=2)e+=1,n/=2;return e},d=function(t,e,n){var r=-1,o=n;while(++r<6)o+=e*t[r],t[r]=o%1e7,o=u(o/1e7)},l=function(t,e){var n=6,r=0;while(--n>=0)r+=t[n],t[n]=u(r/e),r=r%e*1e7},h=function(t){var e=6,n="";while(--e>=0)if(""!==n||0===e||0!==t[e]){var r=String(t[e]);n=""===n?r:n+a.call("0",7-r.length)+r}return n},v=c&&("0.000"!==8e-5.toFixed(3)||"1"!==.9.toFixed(0)||"1.25"!==1.255.toFixed(2)||"1000000000000000128"!==(0xde0b6b3a7640080).toFixed(0))||!s((function(){c.call({})}));r({target:"Number",proto:!0,forced:v},{toFixed:function(t){var e,n,r,s,c=i(this),u=o(t),v=[0,0,0,0,0,0],m="",y="0";if(u<0||u>20)throw RangeError("Incorrect fraction digits");if(c!=c)return"NaN";if(c<=-1e21||c>=1e21)return String(c);if(c<0&&(m="-",c=-c),c>1e-21)if(e=p(c*f(2,69,1))-69,n=e<0?c*f(2,-e,1):c/f(2,e,1),n*=4503599627370496,e=52-e,e>0){d(v,0,n),r=u;while(r>=7)d(v,1e7,0),r-=7;d(v,f(10,r,1),0),r=e-1;while(r>=23)l(v,1<<23),r-=23;l(v,1<<r),d(v,1,1),l(v,2),y=h(v)}else d(v,0,n),d(v,1<<-e,0),y=h(v)+a.call("0",u);return u>0?(s=y.length,y=m+(s<=u?"0."+a.call("0",u-s)+y:y.slice(0,s-u)+"."+y.slice(s-u))):y=m+y,y}})},b727:function(t,e,n){var r=n("0366"),o=n("44ad"),i=n("7b0b"),a=n("50c4"),s=n("65f0"),c=[].push,u=function(t){var e=1==t,n=2==t,u=3==t,f=4==t,p=6==t,d=7==t,l=5==t||p;return function(h,v,m,y){for(var g,x,b=i(h),w=o(b),k=r(v,m,3),j=a(w.length),E=0,S=y||s,T=e?S(h,j):n||d?S(h,0):void 0;j>E;E++)if((l||E in w)&&(g=w[E],x=k(g,E,b),t))if(e)T[E]=x;else if(x)switch(t){case 3:return!0;case 5:return g;case 6:return E;case 2:c.call(T,g)}else switch(t){case 4:return!1;case 7:c.call(T,g)}return p?-1:u||f?f:T}};t.exports={forEach:u(0),map:u(1),filter:u(2),some:u(3),every:u(4),find:u(5),findIndex:u(6),filterOut:u(7)}},c04e:function(t,e,n){var r=n("861d");t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},c430:function(t,e){t.exports=!1},c6b6:function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},c6cd:function(t,e,n){var r=n("da84"),o=n("ce4e"),i="__core-js_shared__",a=r[i]||o(i,{});t.exports=a},c8ba:function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}t.exports=n},ca84:function(t,e,n){var r=n("5135"),o=n("fc6a"),i=n("4d64").indexOf,a=n("d012");t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)!r(a,n)&&r(s,n)&&u.push(n);while(e.length>c)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},cc12:function(t,e,n){var r=n("da84"),o=n("861d"),i=r.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},cdf9:function(t,e,n){var r=n("825a"),o=n("861d"),i=n("f069");t.exports=function(t,e){if(r(t),o(e)&&e.constructor===t)return e;var n=i.f(t),a=n.resolve;return a(e),n.promise}},ce4e:function(t,e,n){var r=n("da84"),o=n("9112");t.exports=function(t,e){try{o(r,t,e)}catch(n){r[t]=e}return e}},d012:function(t,e){t.exports={}},d039:function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},d066:function(t,e,n){var r=n("428f"),o=n("da84"),i=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?i(r[t])||i(o[t]):r[t]&&r[t][e]||o[t]&&o[t][e]}},d1e7:function(t,e,n){"use strict";var r={}.propertyIsEnumerable,o=Object.getOwnPropertyDescriptor,i=o&&!r.call({1:2},1);e.f=i?function(t){var e=o(this,t);return!!e&&e.enumerable}:r},d2bb:function(t,e,n){var r=n("825a"),o=n("3bbe");t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,n={};try{t=Object.getOwnPropertyDescriptor(Object.prototype,"__proto__").set,t.call(n,[]),e=n instanceof Array}catch(i){}return function(n,i){return r(n),o(i),e?t.call(n,i):n.__proto__=i,n}}():void 0)},d3b7:function(t,e,n){var r=n("00ee"),o=n("6eeb"),i=n("b041");r||o(Object.prototype,"toString",i,{unsafe:!0})},d44e:function(t,e,n){var r=n("9bf2").f,o=n("5135"),i=n("b622"),a=i("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,a)&&r(t,a,{configurable:!0,value:e})}},d81d:function(t,e,n){"use strict";var r=n("23e7"),o=n("b727").map,i=n("1dde"),a=i("map");r({target:"Array",proto:!0,forced:!a},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},da84:function(t,e,n){(function(e){var n=function(t){return t&&t.Math==Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof e&&e)||function(){return this}()||Function("return this")()}).call(this,n("c8ba"))},e2cc:function(t,e,n){var r=n("6eeb");t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},e667:function(t,e){t.exports=function(t){try{return{error:!1,value:t()}}catch(e){return{error:!0,value:e}}}},e6cf:function(t,e,n){"use strict";var r,o,i,a,s=n("23e7"),c=n("c430"),u=n("da84"),f=n("d066"),p=n("fea9"),d=n("6eeb"),l=n("e2cc"),h=n("d2bb"),v=n("d44e"),m=n("2626"),y=n("861d"),g=n("1c0b"),x=n("19aa"),b=n("8925"),w=n("2266"),k=n("1c7e"),j=n("4840"),E=n("2cf4").set,S=n("b575"),T=n("cdf9"),O=n("44de"),_=n("f069"),C=n("e667"),L=n("69f3"),D=n("94ca"),P=n("b622"),V=n("6069"),I=n("605d"),F=n("2d00"),M=P("species"),R="Promise",N=L.get,A=L.set,B=L.getterFor(R),$=p&&p.prototype,q=p,z=$,U=u.TypeError,W=u.document,G=u.process,H=_.f,X=H,Y=!!(W&&W.createEvent&&u.dispatchEvent),J="function"==typeof PromiseRejectionEvent,K="unhandledrejection",Z="rejectionhandled",Q=0,tt=1,et=2,nt=1,rt=2,ot=!1,it=D(R,(function(){var t=b(q),e=t!==String(q);if(!e&&66===F)return!0;if(c&&!z["finally"])return!0;if(F>=51&&/native code/.test(t))return!1;var n=new q((function(t){t(1)})),r=function(t){t((function(){}),(function(){}))},o=n.constructor={};return o[M]=r,ot=n.then((function(){}))instanceof r,!ot||!e&&V&&!J})),at=it||!k((function(t){q.all(t)["catch"]((function(){}))})),st=function(t){var e;return!(!y(t)||"function"!=typeof(e=t.then))&&e},ct=function(t,e){if(!t.notified){t.notified=!0;var n=t.reactions;S((function(){var r=t.value,o=t.state==tt,i=0;while(n.length>i){var a,s,c,u=n[i++],f=o?u.ok:u.fail,p=u.resolve,d=u.reject,l=u.domain;try{f?(o||(t.rejection===rt&&dt(t),t.rejection=nt),!0===f?a=r:(l&&l.enter(),a=f(r),l&&(l.exit(),c=!0)),a===u.promise?d(U("Promise-chain cycle")):(s=st(a))?s.call(a,p,d):p(a)):d(r)}catch(h){l&&!c&&l.exit(),d(h)}}t.reactions=[],t.notified=!1,e&&!t.rejection&&ft(t)}))}},ut=function(t,e,n){var r,o;Y?(r=W.createEvent("Event"),r.promise=e,r.reason=n,r.initEvent(t,!1,!0),u.dispatchEvent(r)):r={promise:e,reason:n},!J&&(o=u["on"+t])?o(r):t===K&&O("Unhandled promise rejection",n)},ft=function(t){E.call(u,(function(){var e,n=t.facade,r=t.value,o=pt(t);if(o&&(e=C((function(){I?G.emit("unhandledRejection",r,n):ut(K,n,r)})),t.rejection=I||pt(t)?rt:nt,e.error))throw e.value}))},pt=function(t){return t.rejection!==nt&&!t.parent},dt=function(t){E.call(u,(function(){var e=t.facade;I?G.emit("rejectionHandled",e):ut(Z,e,t.value)}))},lt=function(t,e,n){return function(r){t(e,r,n)}},ht=function(t,e,n){t.done||(t.done=!0,n&&(t=n),t.value=e,t.state=et,ct(t,!0))},vt=function(t,e,n){if(!t.done){t.done=!0,n&&(t=n);try{if(t.facade===e)throw U("Promise can't be resolved itself");var r=st(e);r?S((function(){var n={done:!1};try{r.call(e,lt(vt,n,t),lt(ht,n,t))}catch(o){ht(n,o,t)}})):(t.value=e,t.state=tt,ct(t,!1))}catch(o){ht({done:!1},o,t)}}};if(it&&(q=function(t){x(this,q,R),g(t),r.call(this);var e=N(this);try{t(lt(vt,e),lt(ht,e))}catch(n){ht(e,n)}},z=q.prototype,r=function(t){A(this,{type:R,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:Q,value:void 0})},r.prototype=l(z,{then:function(t,e){var n=B(this),r=H(j(this,q));return r.ok="function"!=typeof t||t,r.fail="function"==typeof e&&e,r.domain=I?G.domain:void 0,n.parent=!0,n.reactions.push(r),n.state!=Q&&ct(n,!1),r.promise},catch:function(t){return this.then(void 0,t)}}),o=function(){var t=new r,e=N(t);this.promise=t,this.resolve=lt(vt,e),this.reject=lt(ht,e)},_.f=H=function(t){return t===q||t===i?new o(t):X(t)},!c&&"function"==typeof p&&$!==Object.prototype)){a=$.then,ot||(d($,"then",(function(t,e){var n=this;return new q((function(t,e){a.call(n,t,e)})).then(t,e)}),{unsafe:!0}),d($,"catch",z["catch"],{unsafe:!0}));try{delete $.constructor}catch(mt){}h&&h($,z)}s({global:!0,wrap:!0,forced:it},{Promise:q}),v(q,R,!1,!0),m(R),i=f(R),s({target:R,stat:!0,forced:it},{reject:function(t){var e=H(this);return e.reject.call(void 0,t),e.promise}}),s({target:R,stat:!0,forced:c||it},{resolve:function(t){return T(c&&this===i?q:this,t)}}),s({target:R,stat:!0,forced:at},{all:function(t){var e=this,n=H(e),r=n.resolve,o=n.reject,i=C((function(){var n=g(e.resolve),i=[],a=0,s=1;w(t,(function(t){var c=a++,u=!1;i.push(void 0),s++,n.call(e,t).then((function(t){u||(u=!0,i[c]=t,--s||r(i))}),o)})),--s||r(i)}));return i.error&&o(i.value),n.promise},race:function(t){var e=this,n=H(e),r=n.reject,o=C((function(){var o=g(e.resolve);w(t,(function(t){o.call(e,t).then(n.resolve,r)}))}));return o.error&&r(o.value),n.promise}})},e79a:function(t,e,n){var r=n("2150");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);var o=n("499e").default;o("70ffe482",r,!0,{sourceMap:!1,shadowMode:!1})},e893:function(t,e,n){var r=n("5135"),o=n("56ef"),i=n("06cf"),a=n("9bf2");t.exports=function(t,e){for(var n=o(e),s=a.f,c=i.f,u=0;u<n.length;u++){var f=n[u];r(t,f)||s(t,f,c(e,f))}}},e8b5:function(t,e,n){var r=n("c6b6");t.exports=Array.isArray||function(t){return"Array"==r(t)}},e95a:function(t,e,n){var r=n("b622"),o=n("3f8c"),i=r("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(o.Array===t||a[i]===t)}},f069:function(t,e,n){"use strict";var r=n("1c0b"),o=function(t){var e,n;this.promise=new t((function(t,r){if(void 0!==e||void 0!==n)throw TypeError("Bad Promise constructor");e=t,n=r})),this.resolve=r(e),this.reject=r(n)};t.exports.f=function(t){return new o(t)}},f5df:function(t,e,n){var r=n("00ee"),o=n("c6b6"),i=n("b622"),a=i("toStringTag"),s="Arguments"==o(function(){return arguments}()),c=function(t,e){try{return t[e]}catch(n){}};t.exports=r?o:function(t){var e,n,r;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=c(e=Object(t),a))?n:s?o(e):"Object"==(r=o(e))&&"function"==typeof e.callee?"Arguments":r}},f772:function(t,e,n){var r=n("5692"),o=n("90e3"),i=r("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},f7bc:function(t,e,n){var r=n("24fb");e=r(!1),e.push([t.i,".volume{margin-right:10px;--line:#fff;--line-width:6px;--duration:.5s;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}.volume input{position:absolute;width:100%;height:100%;opacity:0}.volume input+svg{display:block;fill:none;stroke:var(--line);stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--line-width);width:25px;height:20px}.volume input+svg path{-webkit-animation:var(--name) var(--duration) ease forwards;animation:var(--name) var(--duration) ease forwards}.volume input+svg path:nth-child(2),.volume input+svg path:nth-child(3){stroke-dashoffset:1px}.volume input:checked+svg path:first-child{--name:shape}.volume input:checked+svg path:nth-child(2){--name:small}.volume input:checked+svg path:nth-child(3){--name:large}.volume input:not(:checked)+svg path:first-child{--name:shape-r}.volume input:not(:checked)+svg path:nth-child(2){--name:small-r}.volume input:not(:checked)+svg path:nth-child(3){--name:large-r}@-webkit-keyframes small{0%,30%{stroke-dasharray:0 0 30px 64px}40%{stroke-dashoffset:16px}80%,to{stroke-dashoffset:1px}70%{stroke-dasharray:0 43px 30px 64px}to{stroke-dasharray:0 39px 30px 64px}}@keyframes small{0%,30%{stroke-dasharray:0 0 30px 64px}40%{stroke-dashoffset:16px}80%,to{stroke-dashoffset:1px}70%{stroke-dasharray:0 43px 30px 64px}to{stroke-dasharray:0 39px 30px 64px}}@-webkit-keyframes small-r{0%{stroke-dasharray:0 39px 30px 64px}0%,40%{stroke-dashoffset:1px}70%{stroke-dashoffset:16px}70%,to{stroke-dasharray:0 0 30px 64px}}@keyframes small-r{0%{stroke-dasharray:0 39px 30px 64px}0%,40%{stroke-dashoffset:1px}70%{stroke-dashoffset:16px}70%,to{stroke-dasharray:0 0 30px 64px}}@-webkit-keyframes large{0%,30%{stroke-dasharray:0 0 50px 84px}40%{stroke-dashoffset:16px}80%,to{stroke-dashoffset:1px}70%{stroke-dasharray:0 82px 32px 84px}to{stroke-dasharray:0 78px 32px 84px}}@keyframes large{0%,30%{stroke-dasharray:0 0 50px 84px}40%{stroke-dashoffset:16px}80%,to{stroke-dashoffset:1px}70%{stroke-dasharray:0 82px 32px 84px}to{stroke-dasharray:0 78px 32px 84px}}@-webkit-keyframes large-r{0%{stroke-dasharray:0 78px 32px 84px}0%,40%{stroke-dashoffset:1px}70%{stroke-dashoffset:16px}70%,to{stroke-dasharray:0 0 50px 84px}}@keyframes large-r{0%{stroke-dasharray:0 78px 32px 84px}0%,40%{stroke-dashoffset:1px}70%{stroke-dashoffset:16px}70%,to{stroke-dasharray:0 0 50px 84px}}@-webkit-keyframes shape{0%{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}70%{stroke-dasharray:63px 51px 184px;stroke-dashoffset:21px}to{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}}@keyframes shape{0%{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}70%{stroke-dasharray:63px 51px 184px;stroke-dashoffset:21px}to{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}}@-webkit-keyframes shape-r{0%{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}to{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}}@keyframes shape-r{0%{stroke-dasharray:59px 47px 184px;stroke-dashoffset:17px}to{stroke-dasharray:60px 0 184px;stroke-dashoffset:0}}@-webkit-keyframes play1{0%{width:0}to{width:100%}}@keyframes play1{0%{width:0}to{width:100%}}@-webkit-keyframes replay1{to{width:100%}}@keyframes replay1{to{width:100%}}.loadEffect{position:absolute;top:30%;width:100px;height:100px;position:relative;margin:0 auto;margin-top:100px}.loadEffect span{display:inline-block;width:16px;height:16px;border-radius:50%;background:#00a1d6;position:absolute;-webkit-animation:load 1.04s ease infinite}@-webkit-keyframes load{0%{opacity:1}to{opacity:.2}}@keyframes load{0%{opacity:1}to{opacity:.2}}.loadEffect span:first-child{left:0;top:50%;margin-top:-8px;-webkit-animation-delay:.13s}.loadEffect span:nth-child(2){left:14px;top:14px;-webkit-animation-delay:.26s}.loadEffect span:nth-child(3){left:50%;top:0;margin-left:-8px;-webkit-animation-delay:.39s}.loadEffect span:nth-child(4){top:14px;right:14px;-webkit-animation-delay:.52s}.loadEffect span:nth-child(5){right:0;top:50%;margin-top:-8px;-webkit-animation-delay:.65s}.loadEffect span:nth-child(6){right:14px;bottom:14px;-webkit-animation-delay:.78s}.loadEffect span:nth-child(7){bottom:0;left:50%;margin-left:-8px;-webkit-animation-delay:.91s}.loadEffect span:nth-child(8){bottom:14px;left:14px;-webkit-animation-delay:1.04s}.playContainer{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);float:left;padding:20px;transition:all .5s}.playContainer li{position:relative;float:left;border:40px solid #404040;color:#404040;height:0;width:0;border-radius:100%;margin:0 20px}.playContainer a{border-style:solid;text-indent:-9999px;position:absolute;top:-16px;left:-6px}.playBtn a{border-color:transparent transparent transparent #fff;border-width:16px 0 16px 24px;width:0;height:0}",""]),t.exports=e},fb15:function(t,e,n){"use strict";if(n.r(e),"undefined"!==typeof window){var r=window.document.currentScript,o=n("8875");r=o(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:o});var i=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=n("8bbf"),s=n.n(a),c=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"popup-layer"},[n("div",{staticClass:"video-player-wrapper"},[n("div",{attrs:{id:"VideoDom"}},[n("div",{attrs:{id:"canvasDom"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:t.showDom,expression:"showDom"}],class:[t.paused?"show":""],attrs:{id:"progressBar"}},[n("div",{staticClass:"bar",on:{click:t.skipLine}},[n("div",{ref:"trunk",staticClass:"line",class:["progress",t.paused?"pause":"play",t.drag?"":"trans"],style:{width:t.playedTime/t.totalTime*100+"%"}}),n("div",{class:{trans:!t.drag},attrs:{id:"circle"}})]),n("div",{staticClass:"left-box"},[n("div",{staticClass:"btn",attrs:{href:"#"}},[n("button",{staticClass:"play",class:[t.paused?"play":"pause"],on:{click:t.changeVideoState}})]),n("div",{staticClass:"total-time"},[t._v(t._s(t.sToHs(t.playedTime))+" / "+t._s(t.sToHs(t.totalTime)))])]),n("div",{staticClass:"volume"},[n("input",{attrs:{type:"checkbox"},on:{click:t.changeVoiceStatus}}),n("svg",{attrs:{viewBox:"0 0 108 96"}},[n("path",{attrs:{d:"M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"}}),n("path",{attrs:{d:"M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"}}),n("path",{attrs:{d:"M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"}})])])])])])]),n("i",{staticClass:"popup-layer-btn-close",on:{click:t.close}},[t._v("x")]),n("div",{directives:[{name:"show",rawName:"v-show",value:!t.showDom,expression:"!showDom"}],staticClass:"loadEffect"},[n("span"),n("span"),n("span"),n("span"),n("span"),n("span"),n("span"),n("span")]),n("section",{directives:[{name:"show",rawName:"v-show",value:t.paused,expression:"paused"}],staticClass:"playContainer",on:{click:t.changeVideoState}},[t._m(0)])])},u=[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("li",{staticClass:"playBtn"},[n("a",{attrs:{href:"#",title:"start"}},[t._v("Start")])])}];n("d3b7"),n("e6cf");function f(t,e,n,r,o,i,a){try{var s=t[i](a),c=s.value}catch(u){return void n(u)}s.done?e(c):Promise.resolve(c).then(r,o)}function p(t){return function(){var e=this,n=arguments;return new Promise((function(r,o){var i=t.apply(e,n);function a(t){f(i,r,o,a,s,"next",t)}function s(t){f(i,r,o,a,s,"throw",t)}a(void 0)}))}}n("96cf"),n("d81d"),n("b680");var d={data:function(){return{list:[],playerlist:[],playIndex:0,RAFCancelReq:null,logo:"",videoList:[],videoObj:{},paused:!0,totalTime:0,playedTime:0,cacheCurrentTime:0,endFlag:!1,activeLength:0,skipDict:[],showDom:!1,drag:0}},beforeDestroy:function(){this.setFree(),console.log("desotory"),document.removeEventListener("keydown",this.keydown),document.removeEventListener("mousemove",this.mousemove),document.removeEventListener("mouseup",this.mouseup),document.querySelector("#AutoCanvasId").removeEventListener("click",this.changeVideoState)},mounted:function(){var t=this;this.init(),t.playerlist=t.list.map((function(t){return{start:parseFloat(t.playPoint.start),end:parseFloat(t.playPoint.end)}})),t.videoList=t.list,t.comTotalTime(),document.addEventListener("keydown",t.keydown),t.$nextTick((function(){t.gotoPlay()}))},methods:{initDrop2:function(){var t=this;t.drag=0;var e=document.querySelector("#circle");e.addEventListener("mousedown",(function(){t.drag=1,t.videoObj&&t.videoObj.played&&(t.videoObj.pause(),t.paused=!0)})),document.addEventListener("mouseup",t.mouseup),document.addEventListener("mousemove",t.mouseover),document.querySelector("#AutoCanvasId").addEventListener("click",t.changeVideoState)},setValue:function(t){var e,n=this,r=document.querySelector("#circle"),o=document.querySelector(".bar"),i=t.offsetX;i<0?i=0:i>o.offsetWidth&&(i=o.offsetWidth);var a=r.offsetWidth/2,s=i-a;s<1&&(s=0),e=i/o.offsetWidth*n.totalTime,n.playedTime=e},mouseup:function(){var t=this;1===t.drag&&this.skipProgress(),this.drag=0},mouseover:function(t){var e=this;1===e.drag&&e.setValue(t)},skipProgress:function(){var t=this,e=0;t.skipDict.some((function(n,r){if(t.playedTime<n)return e=r,!0})),t.endFlag=!1,t.playIndex=e;var n=0;n=0==t.playIndex?t.playedTime:t.playedTime-t.skipDict[e-1>0?e-1:0],t.VideoPlay(n)},skipLine:function(t){var e=this,n=document.getElementById("progressBar"),r=t.offsetX/n.clientWidth*e.totalTime;e.playedTime=r,e.skipProgress()},init:function(){this.RAF(),this.playedTime=0},resetVideo:function(){this.videoObj&&!this.videoObj.paused&&(this.videoObj.pause(),this.paused=!0,this.playIndex=0)},RAF:function(t){return window.requestAnimationFrame((function(){window.setTimeout(t,1e3/60)}))},comTotalTime:function(){var t=this,e=0;t.skipDict=[],this.playerlist.map((function(n){var r=n.end-n.start;e+=r,t.skipDict.push(e)})),this.totalTime=e},close:function(){var t=this;try{"function"===typeof t.onClose&&t.onClose(t),setTimeout((function(){t.$destroy(!0),t.$el.parentNode.removeChild(t.$el)}),200)}catch(e){console.log(e)}},keydown:function(t){var e=this;27===t.keyCode&&e.close()},gotoPlay:function(){var t=this;return p(regeneratorRuntime.mark((function e(){var n;return regeneratorRuntime.wrap((function(e){while(1)switch(e.prev=e.next){case 0:n=t,n.playIndex=0,n.paused=!1,n.endFlag=!1,n.VideoPlay();case 5:case"end":return e.stop()}}),e)})))()},updateCurrentVideo:function(t){this.videoObj=t},changeVideoState:function(){if(this.endFlag||this.videoObj&&this.videoObj.paused){if(this.playIndex==this.playerlist.length)return this.playedTime=0,void this.gotoPlay();this.videoObj.play(),this.paused=!1}else this.videoObj&&!this.videoObj.paused&&(this.videoObj.pause(),this.paused=!0)},changeVoiceStatus:function(){this.videoObj&&(this.videoObj.muted=!this.videoObj.muted)},VideoPlay:function(){var t=arguments,e=this;return p(regeneratorRuntime.mark((function n(){var r,o,i,a,s,c,u,f,p,d,l,h,v,m,y,g,x,b,w;return regeneratorRuntime.wrap((function(n){while(1)switch(n.prev=n.next){case 0:if(w=function(){if(m.ended||m.paused||m.currentTime<u||m.currentTime>=f)return b(o.RAFCancelReq),void m.pause();x.drawImage(m,0,0,m.width,m.height),o.RAF(w)},r=t.length>0&&void 0!==t[0]?t[0]:0,o=e,!(o.playIndex+1>o.videoList.length)){n.next=5;break}return n.abrupt("return");case 5:return i=document.querySelector("#VideoDom"),a=document.querySelector("#canvasDom"),s=o.videoList[o.playIndex],c=s.url,u=parseFloat(s.playPoint.start)+r,f=parseFloat(s.playPoint.end),p={logo:o.logo,position:s.logoPosition,videoWidth:s.width},d=o.playIndex+1,o.videoList[d]||(d=0),l=o.videoList[d],h=l.url,v=parseFloat(l.playPoint.start),n.next=19,o.createVideo(i,"AutoVideoId");case 19:return m=n.sent,n.next=22,o.createVideo(i,"preLoadVideoId",!0);case 22:return y=n.sent,n.next=25,o.createCanvas(a,"AutoCanvasId");case 25:g=n.sent,x=g.getContext("2d"),m.src=c,o.updateCurrentVideo(m),m.ondurationchange=function(){m.currentTime=u,o.cacheCurrentTime=u},m.onseeked=function(){o.paused=!1,o.videoObj.volume=1;var t=o.videoObj.play();void 0!==t&&t.then((function(){o.initDrop2(),o.videoObj.play()})).catch((function(t){console.log("sorry! 视频初始化失败",t)}))},m.ontimeupdate=function(){var t=m.currentTime-o.cacheCurrentTime;t>=0&&o.playedTime<=o.totalTime&&(o.playedTime=o.playedTime+t,o.cacheCurrentTime=m.currentTime),m.currentTime>f&&o.playNext(m)},m.onplay=function(){g.width=m.width,g.height=m.height,o.RAFCancelReq=o.RAF(w),o.createAndPutLogo(a,"logoId",p),o.showDom=!0},y.src=h,y.ondurationchange=function(){y.currentTime=v},b=function(t){window.cancelAnimationFrame(t)};case 36:case"end":return n.stop()}}),n)})))()},createAndPutLogo:function(t,e,n){var r=this;this.$nextTick((function(){var o=document.querySelector("#AutoCanvasId");t=t||document.body;var i=document.getElementById(e);i||(i=document.createElement("img"),i.id=e,t.appendChild(i)),i.style={},i.style.display="none",i.style.width="".concat(150*o.width/1080,"px"),i.style.position="absolute",i.style[n.position.x]="".concat(o.width/1080*60,"px"),i.style[n.position.y]="".concat(o.width/1080*60,"px"),i.src=n.logo,r.$nextTick((function(){i.style.display="block"}),1e4)}))},setVideoStyle:function(t){var e=t.parentNode.getBoundingClientRect().width,n=t.parentNode.getBoundingClientRect().height,r=Math.max(t.videoWidth/e,t.videoHeight/n),o=t.videoWidth/r,i=t.videoHeight/r;t.width=o,t.height=i},createVideo:function(t,e){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=this;if(e){t=t||document.body;var o=document.getElementById(e);if(!o){o=document.createElement("Video"),o.id=e,t.appendChild(o);var i=parseInt(document.getElementsByTagName("video").length);o.preload="auto",o.style="background:#000000;display:none;position:absolute;left:100%;top:0;",o.autoplay="",o.style.left=100*i+"%",o.controls=!0,o.muted=n,o.volume=.1,o.onloadedmetadata=function(){r.setVideoStyle(o)}}return o}console.warn("缺少命名ID")},createCanvas:function(t,e){if(e){t=t||document.body;var n=document.getElementById(e);return n||(n=document.createElement("Canvas"),n.id=e,t.appendChild(n)),n}console.warn("缺少命名ID")},playNext:function(t){var e=this;t.pause(),e.playIndex++,e.playIndex>e.list.length-1&&(e.paused=!0,e.endFlag=!0),e.VideoPlay()},sToHs:function(t){var e;return t=parseFloat(t).toFixed(0),e=Math.floor(t/60),t%=60,e+="",t+="",e=1==e.length?"0"+e:e,t=1==t.length?"0"+t:t,e+":"+t}}},l=d;n("1b7f"),n("4d16");function h(t,e,n,r,o,i,a,s){var c,u="function"===typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),r&&(u.functional=!0),i&&(u._scopeId="data-v-"+i),a?(c=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},u._ssrRegister=c):o&&(c=s?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),c)if(u.functional){u._injectStyles=c;var f=u.render;u.render=function(t,e){return c.call(e),f(t,e)}}else{var p=u.beforeCreate;u.beforeCreate=p?[].concat(p,c):[c]}return{exports:t,options:u}}var v,m=h(l,c,u,!1,null,"2177a880",null),y=m.exports,g={logo:"//cms-static.pengwin.com/data/product_logo/20210713/2671411626148786627659.png",thumb:"//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",list:[{id:352,name:"简单充充_衻_1038",url:"//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",thumb:"//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",width:1080,height:1920,logoPosition:{x:"left",y:"top"},playPoint:{end:"3.120000",start:"0"},index:0},{id:352,name:"简单充充_衻_1038",url:"//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",thumb:"//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",width:1080,height:1920,logoPosition:{x:"right",y:"top"},playPoint:{end:"10.200000",start:"4.320000"},index:1},{id:352,name:"简单充充_衻_1038",url:"//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",thumb:"//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",width:1080,height:1920,logoPosition:{x:"left",y:"bottom"},playPoint:{end:"20.320000",start:"11.400000"},index:2},{id:352,name:"简单充充_衻_1038",url:"//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",thumb:"//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",width:1080,height:1920,logoPosition:{x:"right",y:"bottom"},playPoint:{end:"24.72",start:"21.520000"},index:3}],duration:21.12,common:1,name:"简单充充_01_0713"},x=g,b=s.a.extend(y),w=1,k=function(t){if(!s.a.prototype.$isServer&&1===w)return t=t||x,v=new b({data:t}),v.id="player_"+w++,v.vm=v.$mount(),v.dom=v.vm.$el,document.body.appendChild(v.dom),v.vm.init(),v.dom.style.zIndex=w+1001,w=2,v.vm.setFree=function(){w=1},v.vm},j={install:function(t){t.prototype.$canvasVideoPlayer=k}};e["default"]=j},fc6a:function(t,e,n){var r=n("44ad"),o=n("1d80");t.exports=function(t){return r(o(t))}},fdbf:function(t,e,n){var r=n("4930");t.exports=r&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},fea9:function(t,e,n){var r=n("da84");t.exports=r.Promise},fecd:function(t,e,n){var r=n("2a41");r.__esModule&&(r=r.default),"string"===typeof r&&(r=[[t.i,r,""]]),r.locals&&(t.exports=r.locals);var o=n("499e").default;o("5cdc139e",r,!0,{sourceMap:!1,shadowMode:!1})}})}));
2 | //# sourceMappingURL=canvas-player.umd.min.js.map


--------------------------------------------------------------------------------
/lib/demo.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <title>canvas-player demo</title>
3 | <script src="./canvas-player.umd.js"></script>
4 | 
5 | 
6 | <script>
7 | console.log(canvas-player)
8 | </script>
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "canvas-video-player",
 3 |   "version": "1.0.4",
 4 |   "private": false,
 5 |   "description": "使用canvas渲染的视频混剪播放器,无缝拼接不同的视频源",
 6 |   "author": "magicscript@163.com|ledtwo",
 7 |   "main": "lib/canvas-player.umd.min.js",
 8 |   "scripts": {
 9 |     "serve": "vue-cli-service serve",
10 |     "build": "vue-cli-service build --target lib --name canvas-player --dest lib ./src/index.js",
11 |     "lint": "vue-cli-service lint"
12 |   },
13 |   "keywords": [
14 |     "video",
15 |     "video-player",
16 |     "canvas",
17 |     "canvas-player"
18 |   ],
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git@github.com:ledtwo/canvas-video-player.git"
22 |   },
23 |   "dependencies": {},
24 |   "devDependencies": {},
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/src/canvasPlayer.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="popup-layer">
  3 |     <div class="video-player-wrapper">
  4 |       <div id="VideoDom">
  5 |         <div id="canvasDom">
  6 |           <div v-show="showDom" id="progressBar" :class="[paused ? 'show' : '']">
  7 |             <div class="bar" @click="skipLine">
  8 |               <div
  9 |                 ref="trunk"
 10 |                 class="line"
 11 |                 :class="['progress', paused ? 'pause' : 'play', !drag ? 'trans' : '']"
 12 |                 :style="{ width: `${(playedTime / totalTime) * 100}%` }"
 13 |               ></div>
 14 |               <div id="circle" :class="{ trans: !drag }"></div>
 15 |             </div>
 16 | 
 17 |             <div class="left-box">
 18 |               <div href="#" class="btn">
 19 |                 <button
 20 |                   class="play"
 21 |                   :class="[paused ? 'play' : 'pause']"
 22 |                   @click="changeVideoState"
 23 |                 ></button>
 24 |               </div>
 25 |               <div class="total-time">{{ sToHs(playedTime) }} / {{ sToHs(totalTime) }}</div>
 26 |             </div>
 27 |             <div class="volume">
 28 |               <input type="checkbox" @click="changeVoiceStatus" />
 29 |               <svg viewBox="0 0 108 96">
 30 |                 <path
 31 |                   d="M7,28 L35,28 L35,28 L59,8 L59,88 L35,68 L7,68 C4.790861,68 3,66.209139 3,64 L3,32 C3,29.790861 4.790861,28 7,28 Z"
 32 |                 ></path>
 33 |                 <path
 34 |                   d="M79,62 C83,57.3333333 85,52.6666667 85,48 C85,43.3333333 83,38.6666667 79,34 L49,3"
 35 |                 ></path>
 36 |                 <path
 37 |                   d="M95,69 C101.666667,61.6666667 105,54.3333333 105,47 C105,39.6666667 101.666667,32.3333333 95,25 L75.5,6 L49,33"
 38 |                 ></path>
 39 |               </svg>
 40 |             </div>
 41 |           </div>
 42 |         </div>
 43 |       </div>
 44 |     </div>
 45 |     <i class="popup-layer-btn-close" @click="close">x</i>
 46 |     <div v-show="!showDom" class="loadEffect">
 47 |       <span></span>
 48 |       <span></span>
 49 |       <span></span>
 50 |       <span></span>
 51 |       <span></span>
 52 |       <span></span>
 53 |       <span></span>
 54 |       <span></span>
 55 |     </div>
 56 |     <section v-show="paused" class="playContainer" @click="changeVideoState">
 57 |       <li class="playBtn">
 58 |         <a href="#" title="start">Start</a>
 59 |       </li>
 60 |     </section>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script setup>
 65 | export default {
 66 |   data() {
 67 |     return {
 68 |       list: [],
 69 |       playerlist: [],
 70 |       // new add ===
 71 |       playIndex: 0,
 72 |       RAFCancelReq: null,
 73 |       logo: '',
 74 |       videoList: [],
 75 |       // 当前播放对象
 76 |       videoObj: {},
 77 |       // 是否暂停
 78 |       paused: true,
 79 |       // 总时长
 80 |       totalTime: 0,
 81 |       // 当前播放时长
 82 |       playedTime: 0,
 83 |       // 缓存进度条时间
 84 |       cacheCurrentTime: 0,
 85 |       endFlag: false,
 86 |       // 动态增减
 87 |       activeLength: 0,
 88 |       // 时间段节点记录,进度条快速定位
 89 |       skipDict: [],
 90 |       // 是否展示进度条
 91 |       showDom: false,
 92 |       // 是否已经绑定事件
 93 |       drag: 0,
 94 |     }
 95 |   },
 96 |   beforeDestroy() {
 97 |     this.setFree()
 98 |     console.log('desotory')
 99 |     document.removeEventListener('keydown', this.keydown)
100 |     document.removeEventListener('mousemove', this.mousemove)
101 |     document.removeEventListener('mouseup', this.mouseup)
102 |     document.querySelector('#AutoCanvasId').removeEventListener('click', this.changeVideoState)
103 |   },
104 |   mounted() {
105 |     let _self = this
106 |     this.init()
107 |     _self.playerlist = _self.list.map((item) => {
108 |       return {
109 |         start: parseFloat(item.playPoint.start),
110 |         end: parseFloat(item.playPoint.end),
111 |       }
112 |     })
113 |     _self.videoList = _self.list
114 |     _self.comTotalTime()
115 |     document.addEventListener('keydown', _self.keydown)
116 |     _self.$nextTick(() => {
117 |       _self.gotoPlay()
118 |     })
119 |   },
120 | 
121 |   methods: {
122 |     initDrop2() {
123 |       let _self = this
124 |       _self.drag = 0
125 |       let dropBtn = document.querySelector('#circle')
126 |       //进度按钮被点击
127 |       dropBtn.addEventListener('mousedown', function() {
128 |         _self.drag = 1
129 |         if (_self.videoObj && _self.videoObj.played) {
130 |           _self.videoObj.pause()
131 |           _self.paused = true
132 |         }
133 |       })
134 |       //页面被释放
135 |       document.addEventListener('mouseup', _self.mouseup)
136 |       // //拖动事件
137 |       document.addEventListener('mousemove', _self.mouseover)
138 |       // AutoCanvasId
139 |       document.querySelector('#AutoCanvasId').addEventListener('click', _self.changeVideoState)
140 |     },
141 |     setValue(touch) {
142 |       let rate
143 |       let _self = this
144 |       let dropBtn = document.querySelector('#circle')
145 |       let progress = document.querySelector('.bar')
146 |       let oLeft = touch.offsetX //滑块最左端到父元素最左端的距离
147 |       //拖动边界检测
148 |       if (oLeft < 0) {
149 |         oLeft = 0
150 |       } else if (oLeft > progress.offsetWidth) {
151 |         oLeft = progress.offsetWidth
152 |       }
153 |       let dropBtnWidth = dropBtn.offsetWidth / 2
154 |       let durationWidth = oLeft - dropBtnWidth
155 |       if (durationWidth < 1) {
156 |         durationWidth = 0
157 |       }
158 |       //拖动实时改变进度条
159 |       rate = (oLeft / progress.offsetWidth) * _self.totalTime
160 |       _self.playedTime = rate
161 |     },
162 |     mouseup() {
163 |       let _self = this
164 |       if (_self.drag === 1) {
165 |         this.skipProgress()
166 |       }
167 |       this.drag = 0
168 |     },
169 |     mouseover(e) {
170 |       let _self = this
171 |       if (_self.drag === 1) {
172 |         _self.setValue(e)
173 |       }
174 |     },
175 |     // 快进跳转
176 |     skipProgress() {
177 |       let _self = this
178 |       let curIndex = 0
179 |       _self.skipDict.some((item, index) => {
180 |         if (_self.playedTime < item) {
181 |           curIndex = index
182 |           return true
183 |         }
184 |       })
185 |       _self.endFlag = false
186 |       _self.playIndex = curIndex
187 |       let shortSliceTime = 0
188 |       if (_self.playIndex == 0) {
189 |         shortSliceTime = _self.playedTime
190 |       } else {
191 |         shortSliceTime = _self.playedTime - _self.skipDict[curIndex - 1 > 0 ? curIndex - 1 : 0]
192 |       }
193 |       // console.log("重要：", _self.playedTime, shortSliceTime);
194 |       _self.VideoPlay(shortSliceTime)
195 |     },
196 |     // 点击快进跳转
197 |     skipLine(e) {
198 |       let _self = this
199 |       let barBox = document.getElementById('progressBar')
200 |       let rate = (e.offsetX / barBox.clientWidth) * _self.totalTime
201 |       _self.playedTime = rate
202 |       _self.skipProgress()
203 |     },
204 |     init() {
205 |       this.RAF()
206 |       this.playedTime = 0
207 |     },
208 |     resetVideo() {
209 |       if (this.videoObj && !this.videoObj.paused) {
210 |         this.videoObj.pause()
211 |         this.paused = true
212 |         this.playIndex = 0
213 |       }
214 |     },
215 |     RAF(cb) {
216 |       return window.requestAnimationFrame(() => {
217 |         window.setTimeout(cb, 1000 / 60)
218 |       })
219 |     },
220 |     // 计算总时长
221 |     comTotalTime() {
222 |       let _self = this
223 |       let totalTime = 0
224 |       _self.skipDict = []
225 |       this.playerlist.map((item) => {
226 |         let temp = item.end - item.start
227 |         totalTime += temp
228 |         _self.skipDict.push(totalTime)
229 |       })
230 |       this.totalTime = totalTime
231 |     },
232 |     close() {
233 |       let _self = this
234 |       try {
235 |         if (typeof _self.onClose === 'function') {
236 |           _self.onClose(_self)
237 |         }
238 |         setTimeout(() => {
239 |           _self.$destroy(true)
240 |           _self.$el.parentNode.removeChild(_self.$el)
241 |         }, 200)
242 |       } catch (e) {
243 |         console.log(e)
244 |       }
245 |     },
246 |     keydown(e) {
247 |       let _self = this
248 |       if (e.keyCode === 27) {
249 |         // esc关闭消息
250 |         _self.close()
251 |       }
252 |     },
253 |     // add 播放器核心方法
254 |     async gotoPlay() {
255 |       let _self = this
256 |       _self.playIndex = 0
257 |       _self.paused = false
258 |       _self.endFlag = false
259 |       _self.VideoPlay()
260 |     },
261 |     // 截获当前视频播放器
262 |     updateCurrentVideo(videoObj) {
263 |       this.videoObj = videoObj
264 |     },
265 |     // 播放 || 暂停
266 |     changeVideoState() {
267 |       if (this.endFlag || (this.videoObj && this.videoObj.paused)) {
268 |         if (this.playIndex == this.playerlist.length) {
269 |           this.playedTime = 0
270 |           this.gotoPlay()
271 |           return
272 |         }
273 |         this.videoObj.play()
274 |         this.paused = false
275 |       } else if (this.videoObj && !this.videoObj.paused) {
276 |         this.videoObj.pause()
277 |         this.paused = true
278 |       }
279 |     },
280 |     // 静音
281 |     changeVoiceStatus() {
282 |       if (this.videoObj) {
283 |         this.videoObj.muted = !this.videoObj.muted
284 |       }
285 |     },
286 |     // 核心启动逻辑
287 |     async VideoPlay(shortSliceTime = 0) {
288 |       let _self = this
289 |       if (_self.playIndex + 1 > _self.videoList.length) {
290 |         return
291 |       }
292 |       // console.log("_self.playIndex: " + _self.playIndex);
293 |       // 准备工作start
294 |       let elDom = document.querySelector('#VideoDom')
295 |       let canvasDom = document.querySelector('#canvasDom')
296 |       // 一、解析当前视频的各个参数 视频信息：1.当前播放路径、2.播放开始时间、3.播放结束时间、4.下部视频下标
297 |       let currentVideo = _self.videoList[_self.playIndex]
298 |       let currentUrl = currentVideo.url
299 |       let currentStartTime = parseFloat(currentVideo.playPoint.start) + shortSliceTime
300 |       let currentEndTime = parseFloat(currentVideo.playPoint.end)
301 |       // logo信息
302 |       let currentLogoInfo = {
303 |         logo: _self.logo,
304 |         position: currentVideo.logoPosition,
305 |         videoWidth: currentVideo.width,
306 |       }
307 |       let nextIndex = _self.playIndex + 1
308 |       // 当前视频 配置end
309 | 
310 |       // 二、是否有下一视频
311 |       if (!_self.videoList[nextIndex]) {
312 |         // 如果没有  则重置为零
313 |         nextIndex = 0
314 |       }
315 |       // 如果有  则配置下一视频的基本信息 视频信息：1.当前播放路径、2.播放开始时间
316 |       let nextVideo = _self.videoList[nextIndex]
317 |       let nextVideoUrl = nextVideo.url
318 |       let nextStartTime = parseFloat(nextVideo.playPoint.start)
319 |       //下一视频 配置end
320 | 
321 |       //创建
322 |       // 创建两部视频的Dom节点
323 |       let videoObj = await _self.createVideo(elDom, 'AutoVideoId')
324 |       let nextVideoObj = await _self.createVideo(elDom, 'preLoadVideoId', true)
325 |       // 创建canvas的Dom节点
326 |       let CanvasEle = await _self.createCanvas(canvasDom, 'AutoCanvasId') //document.getElementById('AutoCanvasId')
327 |       let context = CanvasEle.getContext('2d')
328 | 
329 |       videoObj.src = currentUrl
330 |       // 更新视频对象
331 |       _self.updateCurrentVideo(videoObj)
332 |       //视频源改变时，指定开始播放时间
333 |       videoObj.ondurationchange = function() {
334 |         // console.log("ondurationchange");
335 |         videoObj.currentTime = currentStartTime
336 |         _self.cacheCurrentTime = currentStartTime
337 |       }
338 |       //重新定位播放位置
339 |       videoObj.onseeked = function() {
340 |         // console.log("onseeked");
341 |         _self.paused = false
342 |         _self.videoObj.volume = 1
343 |         let playPromise = _self.videoObj.play()
344 | 
345 |         if (playPromise !== undefined) {
346 |           playPromise
347 |             .then(() => {
348 |               _self.initDrop2()
349 |               _self.videoObj.play()
350 |             })
351 |             .catch((error) => {
352 |               console.log('sorry! 视频初始化失败', error)
353 |             })
354 |         }
355 |       }
356 |       //播放位置改变
357 |       videoObj.ontimeupdate = function() {
358 |         let updateTime = videoObj.currentTime - _self.cacheCurrentTime
359 |         if (updateTime >= 0 && _self.playedTime <= _self.totalTime) {
360 |           _self.playedTime = _self.playedTime + updateTime
361 |           _self.cacheCurrentTime = videoObj.currentTime
362 |         }
363 |         if (videoObj.currentTime > currentEndTime) {
364 |           _self.playNext(videoObj)
365 |         }
366 |       }
367 | 
368 |       //开始播放
369 |       videoObj.onplay = function() {
370 |         // console.log("onplay");
371 |         // console.log("开始播放：", _self.videoObj.paused);
372 |         CanvasEle.width = videoObj.width
373 |         CanvasEle.height = videoObj.height
374 |         _self.RAFCancelReq = _self.RAF(drawData)
375 |         // 创建logo
376 |         _self.createAndPutLogo(canvasDom, 'logoId', currentLogoInfo)
377 |         // 展示进度条
378 |         _self.showDom = true
379 |       }
380 | 
381 |       //预加载视频
382 |       nextVideoObj.src = nextVideoUrl
383 |       //视频源改变时，指定开始播放时间
384 |       nextVideoObj.ondurationchange = function() {
385 |         // console.log("ondurationchange");
386 |         nextVideoObj.currentTime = nextStartTime
387 |       }
388 | 
389 |       //取消轮询
390 |       let cancelAnimationFrame = function(flag) {
391 |         window.cancelAnimationFrame(flag)
392 |       }
393 | 
394 |       function drawData() {
395 |         if (
396 |           videoObj.ended ||
397 |           videoObj.paused ||
398 |           videoObj.currentTime < currentStartTime ||
399 |           videoObj.currentTime >= currentEndTime
400 |         ) {
401 |           // console.log("videoObj.paused", videoObj.paused);
402 |           cancelAnimationFrame(_self.RAFCancelReq)
403 |           videoObj.pause()
404 |           return
405 |         }
406 |         context.drawImage(videoObj, 0, 0, videoObj.width, videoObj.height)
407 |         _self.RAF(drawData)
408 |       }
409 |     },
410 |     // 创建并摆放logo
411 |     createAndPutLogo(parentDom, domId, logoInfo) {
412 |       this.$nextTick(() => {
413 |         let canvasDom = document.querySelector('#AutoCanvasId')
414 |         parentDom = parentDom || document.body
415 |         let obj = document.getElementById(domId)
416 |         if (!obj) {
417 |           obj = document.createElement('img')
418 |           obj.id = domId
419 |           parentDom.appendChild(obj)
420 |         }
421 |         obj.style = {}
422 |         obj.style.display = 'none'
423 |         obj.style.width = `${(canvasDom.width * 150) / 1080}px`
424 |         obj.style.position = 'absolute'
425 |         obj.style[logoInfo.position.x] = `${(canvasDom.width / 1080) * 60}px`
426 |         obj.style[logoInfo.position.y] = `${(canvasDom.width / 1080) * 60}px`
427 |         obj.src = logoInfo.logo
428 |         this.$nextTick(() => {
429 |           obj.style.display = 'block'
430 |         }, 10000)
431 |       })
432 |     },
433 |     //根据父容器大小设置视频尺寸
434 |     setVideoStyle(vObj) {
435 |       let parentWidth = vObj.parentNode.getBoundingClientRect().width
436 |       let parentHeight = vObj.parentNode.getBoundingClientRect().height
437 |       //根据父容器宽高计算 视频缩放比例
438 |       let scaleVal = Math.max(vObj.videoWidth / parentWidth, vObj.videoHeight / parentHeight)
439 |       let scaleWidth = vObj.videoWidth / scaleVal
440 |       let scaleHeight = vObj.videoHeight / scaleVal
441 |       vObj.width = scaleWidth
442 |       vObj.height = scaleHeight
443 |     },
444 | 
445 |     //创建视频对象
446 |     createVideo(parentDom, domId, isMuted = false) {
447 |       let _self = this
448 |       if (!domId) {
449 |         console.warn('缺少命名ID')
450 |         return
451 |       }
452 |       parentDom = parentDom || document.body
453 |       let obj = document.getElementById(domId)
454 |       if (!obj) {
455 |         obj = document.createElement('Video')
456 |         obj.id = domId
457 |         parentDom.appendChild(obj)
458 |         let videoSize = parseInt(document.getElementsByTagName('video').length)
459 |         //设置视频属性
460 |         obj.preload = 'auto'
461 |         obj.style = 'background:#000000;display:none;position:absolute;left:100%;top:0;'
462 |         obj.autoplay = ''
463 |         obj.style.left = videoSize * 100 + '%'
464 |         obj.controls = true
465 |         obj.muted = isMuted
466 |         obj.volume = 0.1
467 |         //视频加载meta信息后，把自身尺寸修改了
468 |         obj.onloadedmetadata = function() {
469 |           // console.log('onloadedmetadata')
470 |           _self.setVideoStyle(obj)
471 |         }
472 |       }
473 |       return obj
474 |     },
475 |     //创建 Canvas对象
476 |     createCanvas(parentDom, domId) {
477 |       if (!domId) {
478 |         console.warn('缺少命名ID')
479 |         return
480 |       }
481 |       parentDom = parentDom || document.body
482 |       let Obj = document.getElementById(domId)
483 |       if (!Obj) {
484 |         Obj = document.createElement('Canvas')
485 |         Obj.id = domId
486 |         parentDom.appendChild(Obj)
487 |       }
488 |       return Obj
489 |     },
490 | 
491 |     // 播放下一曲
492 |     playNext(curVideo) {
493 |       let _self = this
494 |       curVideo.pause()
495 |       _self.playIndex++
496 |       if (_self.playIndex > _self.list.length - 1) {
497 |         _self.paused = true
498 |         _self.endFlag = true
499 |       }
500 |       _self.VideoPlay()
501 |     },
502 |     sToHs(s) {
503 |       //计算分钟
504 |       //算法：将秒数除以60，然后下舍入，既得到分钟数
505 |       s = parseFloat(s).toFixed(0)
506 |       var h
507 |       h = Math.floor(s / 60)
508 |       //计算秒
509 |       //算法：取得秒%60的余数，既得到秒数
510 |       s = s % 60
511 |       //将变量转换为字符串
512 |       h += ''
513 |       s += ''
514 |       //如果只有一位数，前面增加一个0
515 |       h = h.length == 1 ? '0' + h : h
516 |       s = s.length == 1 ? '0' + s : s
517 |       return h + ':' + s
518 |     },
519 |   },
520 | }
521 | </script>
522 | <style>
523 | @import './style/style.css';
524 | </style>
525 | <style lang="less" scoped>
526 | .popup-layer {
527 |   position: fixed;
528 |   left: 0;
529 |   top: 0;
530 |   right: 0;
531 |   bottom: 0;
532 |   background-color: rgba(0, 0, 0, 0.85);
533 |   color: #fff;
534 | 
535 |   .video-player-wrapper {
536 |     position: absolute;
537 |     left: 0;
538 |     top: 0;
539 |     right: 0;
540 |     bottom: 0;
541 |     display: flex;
542 |     justify-content: center;
543 |     align-items: center;
544 |   }
545 | 
546 |   .popup-layer-btn-close {
547 |     position: absolute;
548 |     right: 20px;
549 |     top: 20px;
550 |     width: 50px;
551 |     color: rgba(255, 255, 255, 0.8);
552 |     text-align: center;
553 |     font-style: initial;
554 |     font-size: 40px;
555 |     line-height: 30px;
556 |     cursor: pointer;
557 |     padding: 6px 0 12px;
558 |     border-radius: 100%;
559 |     user-select: none;
560 |     &:hover {
561 |       background: rgba(255, 255, 255, 0.05);
562 |       color: rgba(255, 255, 255, 1);
563 |     }
564 |   }
565 | }
566 | 
567 | #VideoDom {
568 |   position: relative;
569 |   font-size: 0;
570 |   line-height: 0;
571 |   width: 100%;
572 |   height: 100%;
573 |   display: flex;
574 |   justify-content: center;
575 |   align-items: center;
576 |   #canvasDom {
577 |     position: relative;
578 |     #progressBar {
579 |       position: absolute;
580 |       display: flex;
581 |       align-items: center;
582 |       justify-content: space-between;
583 |       flex-wrap: wrap;
584 |       bottom: 0;
585 |       width: 100%;
586 |       background: rgba(0, 0, 0, 0.521);
587 |       z-index: 99;
588 |       opacity: 0;
589 |       transition: all 0.5s;
590 |       .left-box {
591 |         display: flex;
592 |         align-items: center;
593 |         justify-content: flex-start;
594 |         width: 50%;
595 |         .btn {
596 |           height: 100%;
597 |           color: #000;
598 |           margin-right: 2px;
599 |           background: transparent;
600 |           border: none;
601 |           button {
602 |             margin: 10px;
603 |             padding: 0;
604 |             box-sizing: border-box;
605 |             border: transparent;
606 |             background: transparent;
607 |             user-select: none;
608 |             &.play {
609 |               height: 20px;
610 |               border-style: solid;
611 |               outline: none;
612 |               border-width: 10px 0 10px 18px;
613 |               border-color: transparent transparent transparent #00a1d6;
614 |               transition: all 0.1s linear;
615 |             }
616 |             &.pause {
617 |               border-style: double;
618 |               border-width: 0px 0px 0px 18px;
619 |               border-color: #00a1d6;
620 |             }
621 |           }
622 |         }
623 |         .total-time {
624 |           color: #e3e3e3;
625 |           font-size: 15px;
626 |           line-height: 100%;
627 |           pointer-events: none;
628 |           user-select: none;
629 |         }
630 |       }
631 | 
632 |       .bar {
633 |         display: flex;
634 |         align-items: center;
635 |         margin: 10px auto 0;
636 |         width: 98%;
637 |         height: 7px;
638 |         border-radius: 10px;
639 |         background: #7171716e;
640 |         transition: all 0.2s;
641 |         cursor: pointer;
642 |         .line {
643 |           position: relative;
644 |           width: 100%;
645 |           height: 100%;
646 |           background: #00a1d6;
647 |           border-radius: 5px;
648 |           animation-timing-function: linear;
649 |           &.trans {
650 |             transition: all 0.5s;
651 |           }
652 |           &.play {
653 |             animation-play-state: running;
654 |           }
655 |           &.pause {
656 |             animation-play-state: paused;
657 |           }
658 |         }
659 |         #circle {
660 |           position: relative;
661 |           margin-left: -4px;
662 |           width: 8px;
663 |           height: 8px;
664 |           border-radius: 50%;
665 |           background: #fff;
666 |           pointer-events: none;
667 |           &.trans {
668 |             pointer-events: auto;
669 |             transition: all 0.5s;
670 |           }
671 |         }
672 |       }
673 | 
674 |       &:hover {
675 |         .bar {
676 |           height: 13px;
677 |           transition: all 0.2s;
678 |           #circle {
679 |             height: 14px;
680 |             width: 14px;
681 |           }
682 |         }
683 |       }
684 |       &.show {
685 |         opacity: 1;
686 |       }
687 |     }
688 |     &:hover {
689 |       #progressBar {
690 |         opacity: 1;
691 |         transition: all 1s;
692 |       }
693 |     }
694 |   }
695 | }
696 | </style>
697 | 


--------------------------------------------------------------------------------
/src/data.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @description:
 3 |  * @Author: ljc
 4 |  * @Date: 2021-07-13 12:01:04
 5 |  * @LastEditors: ljc
 6 |  * @LastEditTime: 2021-07-13 14:28:20
 7 |  */
 8 | const videoObj = {
 9 |   logo: "//cms-static.pengwin.com/data/product_logo/20210713/2671411626148786627659.png",
10 |   thumb:
11 |     "//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",
12 |   list: [
13 |     {
14 |       id: 352,
15 |       name: "简单充充_衻_1038",
16 |       url: "//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",
17 |       thumb:
18 |         "//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",
19 |       width: 1080,
20 |       height: 1920,
21 |       logoPosition: {
22 |         x: "left",
23 |         y: "top",
24 |       },
25 |       playPoint: {
26 |         end: "3.120000",
27 |         start: "0",
28 |       },
29 |       index: 0,
30 |     },
31 |     {
32 |       id: 352,
33 |       name: "简单充充_衻_1038",
34 |       url: "//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",
35 |       thumb:
36 |         "//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",
37 |       width: 1080,
38 |       height: 1920,
39 |       logoPosition: {
40 |         x: "right",
41 |         y: "top",
42 |       },
43 |       playPoint: {
44 |         end: "10.200000",
45 |         start: "4.320000",
46 |       },
47 |       index: 1,
48 |     },
49 |     {
50 |       id: 352,
51 |       name: "简单充充_衻_1038",
52 |       url: "//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",
53 |       thumb:
54 |         "//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",
55 |       width: 1080,
56 |       height: 1920,
57 |       logoPosition: {
58 |         x: "left",
59 |         y: "bottom",
60 |       },
61 |       playPoint: {
62 |         end: "20.320000",
63 |         start: "11.400000",
64 |       },
65 |       index: 2,
66 |     },
67 |     {
68 |       id: 352,
69 |       name: "简单充充_衻_1038",
70 |       url: "//cms-static.pengwin.com/data/ingredient/20210709/9974121625796764465380.mp4",
71 |       thumb:
72 |         "//cms-static.pengwin.com/data/thumb/20210709/6300931625796768500909.jpg",
73 |       width: 1080,
74 |       height: 1920,
75 |       logoPosition: {
76 |         x: "right",
77 |         y: "bottom",
78 |       },
79 |       playPoint: {
80 |         end: "24.72",
81 |         start: "21.520000",
82 |       },
83 |       index: 3,
84 |     },
85 |   ],
86 |   duration: 21.12,
87 |   common: 1,
88 |   name: "简单充充_01_0713",
89 | };
90 | 
91 | export default videoObj;
92 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @description:
 3 |  * @Author: ljc
 4 |  * @Date: 2021-07-13 14:22:35
 5 |  * @LastEditors: ljc
 6 |  * @LastEditTime: 2021-07-30 11:07:31
 7 |  */
 8 | import Vue from "vue";
 9 | import Play from "./canvasPlayer.vue";
10 | import videoObj from "./data";
11 | let Player = Vue.extend(Play);
12 | let instance;
13 | let seed = 1;
14 | 
15 | const component = (options) => {
16 |   if (Vue.prototype.$isServer || seed !== 1) return;
17 |   options = options || videoObj;
18 |   instance = new Player({
19 |     data: options,
20 |   });
21 |   instance.id = "player_" + seed++;
22 |   instance.vm = instance.$mount();
23 |   instance.dom = instance.vm.$el;
24 |   document.body.appendChild(instance.dom);
25 |   instance.vm.init();
26 |   instance.dom.style.zIndex = seed + 1001;
27 |   seed = 2;
28 |   instance.vm.setFree = function () {
29 |     seed = 1;
30 |   };
31 |   return instance.vm;
32 | };
33 | 
34 | export default {
35 |   install: (Vue) => {
36 |     Vue.prototype.$canvasVideoPlayer = component;
37 |   },
38 | };
39 | 


--------------------------------------------------------------------------------
/src/style/style.css:
--------------------------------------------------------------------------------
  1 | .volume {
  2 |   margin-right: 10px;
  3 |   --line: #fff;
  4 |   --line-width: 6px;
  5 |   --duration: .5s;
  6 |   position: relative;
  7 |   cursor: pointer;
  8 |   -webkit-tap-highlight-color: transparent;
  9 | }
 10 | 
 11 | .volume input {
 12 |   position: absolute;
 13 |   width: 100%;
 14 |   height: 100%;
 15 |   opacity: 0;
 16 | }
 17 | 
 18 | .volume input+svg {
 19 |   display: block;
 20 |   fill: none;
 21 |   stroke: var(--line);
 22 |   stroke-linecap: round;
 23 |   stroke-linejoin: round;
 24 |   stroke-width: var(--line-width);
 25 |   width: 25px;
 26 |   height: 20px;
 27 | }
 28 | 
 29 | .volume input+svg path {
 30 |   -webkit-animation: var(--name) var(--duration) ease forwards;
 31 |   animation: var(--name) var(--duration) ease forwards;
 32 | }
 33 | 
 34 | .volume input+svg path:nth-child(2) {
 35 |   stroke-dashoffset: 1px;
 36 | }
 37 | 
 38 | .volume input+svg path:nth-child(3) {
 39 |   stroke-dashoffset: 1px;
 40 | }
 41 | 
 42 | .volume input:checked+svg path:nth-child(1) {
 43 |   --name: shape;
 44 | }
 45 | 
 46 | .volume input:checked+svg path:nth-child(2) {
 47 |   --name: small;
 48 | }
 49 | 
 50 | .volume input:checked+svg path:nth-child(3) {
 51 |   --name: large;
 52 | }
 53 | 
 54 | .volume input:not(:checked)+svg path:nth-child(1) {
 55 |   --name: shape-r;
 56 | }
 57 | 
 58 | .volume input:not(:checked)+svg path:nth-child(2) {
 59 |   --name: small-r;
 60 | }
 61 | 
 62 | .volume input:not(:checked)+svg path:nth-child(3) {
 63 |   --name: large-r;
 64 | }
 65 | 
 66 | @-webkit-keyframes small {
 67 | 
 68 |   0%,
 69 |   30% {
 70 |     stroke-dasharray: 0 0 30px 64px;
 71 |   }
 72 | 
 73 |   40% {
 74 |     stroke-dashoffset: 16px;
 75 |   }
 76 | 
 77 |   80%,
 78 |   100% {
 79 |     stroke-dashoffset: 1px;
 80 |   }
 81 | 
 82 |   70% {
 83 |     stroke-dasharray: 0 43px 30px 64px;
 84 |   }
 85 | 
 86 |   100% {
 87 |     stroke-dasharray: 0 39px 30px 64px;
 88 |   }
 89 | }
 90 | 
 91 | @keyframes small {
 92 | 
 93 |   0%,
 94 |   30% {
 95 |     stroke-dasharray: 0 0 30px 64px;
 96 |   }
 97 | 
 98 |   40% {
 99 |     stroke-dashoffset: 16px;
100 |   }
101 | 
102 |   80%,
103 |   100% {
104 |     stroke-dashoffset: 1px;
105 |   }
106 | 
107 |   70% {
108 |     stroke-dasharray: 0 43px 30px 64px;
109 |   }
110 | 
111 |   100% {
112 |     stroke-dasharray: 0 39px 30px 64px;
113 |   }
114 | }
115 | 
116 | @-webkit-keyframes small-r {
117 |   0% {
118 |     stroke-dasharray: 0 39px 30px 64px;
119 |   }
120 | 
121 |   0%,
122 |   40% {
123 |     stroke-dashoffset: 1px;
124 |   }
125 | 
126 |   70% {
127 |     stroke-dashoffset: 16px;
128 |   }
129 | 
130 |   70%,
131 |   100% {
132 |     stroke-dasharray: 0 0 30px 64px;
133 |   }
134 | }
135 | 
136 | @keyframes small-r {
137 |   0% {
138 |     stroke-dasharray: 0 39px 30px 64px;
139 |   }
140 | 
141 |   0%,
142 |   40% {
143 |     stroke-dashoffset: 1px;
144 |   }
145 | 
146 |   70% {
147 |     stroke-dashoffset: 16px;
148 |   }
149 | 
150 |   70%,
151 |   100% {
152 |     stroke-dasharray: 0 0 30px 64px;
153 |   }
154 | }
155 | 
156 | @-webkit-keyframes large {
157 | 
158 |   0%,
159 |   30% {
160 |     stroke-dasharray: 0 0 50px 84px;
161 |   }
162 | 
163 |   40% {
164 |     stroke-dashoffset: 16px;
165 |   }
166 | 
167 |   80%,
168 |   100% {
169 |     stroke-dashoffset: 1px;
170 |   }
171 | 
172 |   70% {
173 |     stroke-dasharray: 0 82px 32px 84px;
174 |   }
175 | 
176 |   100% {
177 |     stroke-dasharray: 0 78px 32px 84px;
178 |   }
179 | }
180 | 
181 | @keyframes large {
182 | 
183 |   0%,
184 |   30% {
185 |     stroke-dasharray: 0 0 50px 84px;
186 |   }
187 | 
188 |   40% {
189 |     stroke-dashoffset: 16px;
190 |   }
191 | 
192 |   80%,
193 |   100% {
194 |     stroke-dashoffset: 1px;
195 |   }
196 | 
197 |   70% {
198 |     stroke-dasharray: 0 82px 32px 84px;
199 |   }
200 | 
201 |   100% {
202 |     stroke-dasharray: 0 78px 32px 84px;
203 |   }
204 | }
205 | 
206 | @-webkit-keyframes large-r {
207 |   0% {
208 |     stroke-dasharray: 0 78px 32px 84px;
209 |   }
210 | 
211 |   0%,
212 |   40% {
213 |     stroke-dashoffset: 1px;
214 |   }
215 | 
216 |   70% {
217 |     stroke-dashoffset: 16px;
218 |   }
219 | 
220 |   70%,
221 |   100% {
222 |     stroke-dasharray: 0 0 50px 84px;
223 |   }
224 | }
225 | 
226 | @keyframes large-r {
227 |   0% {
228 |     stroke-dasharray: 0 78px 32px 84px;
229 |   }
230 | 
231 |   0%,
232 |   40% {
233 |     stroke-dashoffset: 1px;
234 |   }
235 | 
236 |   70% {
237 |     stroke-dashoffset: 16px;
238 |   }
239 | 
240 |   70%,
241 |   100% {
242 |     stroke-dasharray: 0 0 50px 84px;
243 |   }
244 | }
245 | 
246 | @-webkit-keyframes shape {
247 |   0% {
248 |     stroke-dasharray: 60px 0 184px;
249 |     stroke-dashoffset: 0;
250 |   }
251 | 
252 |   70% {
253 |     stroke-dasharray: 63px 51px 184px;
254 |     stroke-dashoffset: 21px;
255 |   }
256 | 
257 |   100% {
258 |     stroke-dasharray: 59px 47px 184px;
259 |     stroke-dashoffset: 17px;
260 |   }
261 | }
262 | 
263 | @keyframes shape {
264 |   0% {
265 |     stroke-dasharray: 60px 0 184px;
266 |     stroke-dashoffset: 0;
267 |   }
268 | 
269 |   70% {
270 |     stroke-dasharray: 63px 51px 184px;
271 |     stroke-dashoffset: 21px;
272 |   }
273 | 
274 |   100% {
275 |     stroke-dasharray: 59px 47px 184px;
276 |     stroke-dashoffset: 17px;
277 |   }
278 | }
279 | 
280 | @-webkit-keyframes shape-r {
281 |   0% {
282 |     stroke-dasharray: 59px 47px 184px;
283 |     stroke-dashoffset: 17px;
284 |   }
285 | 
286 |   100% {
287 |     stroke-dasharray: 60px 0 184px;
288 |     stroke-dashoffset: 0;
289 |   }
290 | }
291 | 
292 | @keyframes shape-r {
293 |   0% {
294 |     stroke-dasharray: 59px 47px 184px;
295 |     stroke-dashoffset: 17px;
296 |   }
297 | 
298 |   100% {
299 |     stroke-dasharray: 60px 0 184px;
300 |     stroke-dashoffset: 0;
301 |   }
302 | }
303 | /* // 定义进度条动画 */
304 | @keyframes play1 {
305 |   0% {
306 |     width: 0;
307 |   }
308 | 
309 |   100% {
310 |     width: 100%;
311 |   }
312 | }
313 | 
314 | @keyframes replay1 {
315 |   to {
316 |     width: 100%;
317 |   }
318 | }
319 | 
320 | .loadEffect {
321 |   position: absolute;
322 |   top: 30%;
323 |   width: 100px;
324 |   height: 100px;
325 |   position: relative;
326 |   margin: 0 auto;
327 |   margin-top: 100px;
328 | }
329 | 
330 | .loadEffect span {
331 |   display: inline-block;
332 |   width: 16px;
333 |   height: 16px;
334 |   border-radius: 50%;
335 |   background: #00a1d6;
336 |   position: absolute;
337 |   -webkit-animation: load 1.04s ease infinite;
338 | }
339 | 
340 | @keyframes load {
341 |   0% {
342 |     opacity: 1;
343 |   }
344 | 
345 |   100% {
346 |     opacity: 0.2;
347 |   }
348 | }
349 | 
350 | .loadEffect span:nth-child(1) {
351 |   left: 0;
352 |   top: 50%;
353 |   margin-top: -8px;
354 |   -webkit-animation-delay: 0.13s;
355 | }
356 | 
357 | .loadEffect span:nth-child(2) {
358 |   left: 14px;
359 |   top: 14px;
360 |   -webkit-animation-delay: 0.26s;
361 | }
362 | 
363 | .loadEffect span:nth-child(3) {
364 |   left: 50%;
365 |   top: 0;
366 |   margin-left: -8px;
367 |   -webkit-animation-delay: 0.39s;
368 | }
369 | 
370 | .loadEffect span:nth-child(4) {
371 |   top: 14px;
372 |   right: 14px;
373 |   -webkit-animation-delay: 0.52s;
374 | }
375 | 
376 | .loadEffect span:nth-child(5) {
377 |   right: 0;
378 |   top: 50%;
379 |   margin-top: -8px;
380 |   -webkit-animation-delay: 0.65s;
381 | }
382 | 
383 | .loadEffect span:nth-child(6) {
384 |   right: 14px;
385 |   bottom: 14px;
386 |   -webkit-animation-delay: 0.78s;
387 | }
388 | 
389 | .loadEffect span:nth-child(7) {
390 |   bottom: 0;
391 |   left: 50%;
392 |   margin-left: -8px;
393 |   -webkit-animation-delay: 0.91s;
394 | }
395 | 
396 | .loadEffect span:nth-child(8) {
397 |   bottom: 14px;
398 |   left: 14px;
399 |   -webkit-animation-delay: 1.04s;
400 | }
401 | 
402 | .playContainer {
403 |   position: absolute;
404 |   left: 50%;
405 |   top: 50%;
406 |   transform: translate(-50%,-50%);
407 |   float: left;
408 |   padding: 20px;
409 |   transition: all 0.5s;
410 | }
411 | 
412 | .playContainer li {
413 |   position: relative;
414 |   float: left;
415 |   border: 40px solid #404040;
416 |   color: #404040;
417 |   height: 0;
418 |   width: 0;
419 |   -webkit-border-radius: 100%;
420 |   -moz-border-radius: 100%;
421 |   -o-border-radius: 100%;
422 |   border-radius: 100%;
423 |   margin: 0 20px;
424 | }
425 | 
426 | .playContainer a {
427 |   border-style: solid;
428 |   text-indent: -9999px;
429 |   position: absolute;
430 |   top: -16px;
431 |   left: -6px;
432 | }
433 | 
434 | .playBtn a {
435 |   border-color: transparent transparent transparent #fff;
436 |   border-width: 16px 0 16px 24px;
437 |   width: 0;
438 |   height: 0;
439 | }
440 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | /*
 2 |  * @description: 
 3 |  * @Author: ljc
 4 |  * @Date: 2021-07-29 12:05:42
 5 |  * @LastEditors: ljc
 6 |  * @LastEditTime: 2021-07-29 12:06:33
 7 |  */
 8 | const path = require('path')
 9 | // const webpack = require('webpack')
10 | module.exports = {
11 |   publicPath: '/dist/',
12 |   css: {
13 |     extract: false,
14 |   },
15 |   outputDir: path.resolve(__dirname, './dist'),
16 |   configureWebpack: {
17 |     output: {
18 |       filename: 'canvas-player.min.js',
19 |       library: 'canvas-player',
20 |       libraryTarget: 'umd',
21 |       umdNamedDefine: true,
22 |     },
23 |   },
24 | }
25 | 


--------------------------------------------------------------------------------