├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── README.md ├── _config.yml ├── babel.config.js ├── dist ├── css │ └── app.f5d86da9.css ├── favicon.ico ├── index.html ├── js │ ├── app.dd35137f.js │ ├── app.dd35137f.js.map │ ├── chunk-vendors.23833d0a.js │ └── chunk-vendors.23833d0a.js.map └── media │ ├── mov_bbb.198918f4.mp4 │ └── videoPortrait.81062a31.mp4 ├── lib ├── demo.html ├── vueVideoClip.common.js ├── vueVideoClip.common.js.map ├── vueVideoClip.css ├── vueVideoClip.umd.js ├── vueVideoClip.umd.js.map ├── vueVideoClip.umd.min.js └── vueVideoClip.umd.min.js.map ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── index.js │ └── vueVideoClip.vue ├── main.js └── static │ ├── fonts │ ├── demo.css │ ├── demo_index.html │ ├── iconfont.css │ ├── iconfont.eot │ ├── iconfont.js │ ├── iconfont.json │ ├── iconfont.svg │ ├── iconfont.ttf │ ├── iconfont.woff │ └── iconfont.woff2 │ └── media │ ├── mov_bbb.mp4 │ └── videoPortrait.mp4 └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/essential', 8 | '@vue/standard' 9 | ], 10 | parserOptions: { 11 | parser: 'babel-eslint' 12 | }, 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | 4 | # local env files 5 | .env.local 6 | .env.*.local 7 | 8 | # Log files 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw? 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [简单在线视频剪辑插件](https://roisoleil520.github.io/vueVideoClip/dist) 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Lints and fixes files 19 | ``` 20 | npm run lint 21 | ``` 22 | 23 | ### Customize configuration 24 | See [Configuration Reference](https://cli.vuejs.org/config/). 25 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /dist/css/app.f5d86da9.css: -------------------------------------------------------------------------------- 1 | .evanyou-canvas[data-v-cc7d4f3c]{position:absolute;left:0;top:0;right:0;bottom:0;height:100%;z-index:0}[data-v-cc7d4f3c]{margin:0;padding:0}.title[data-v-cc7d4f3c]{font-size:20px;padding:20px;text-align:center}.btn[data-v-cc7d4f3c]{cursor:pointer;font-size:14px;background:#ffc7d1;width:100px;padding:5px 10px;border-radius:5px;color:#fff;margin:10px auto}.btn[data-v-cc7d4f3c]:active{opacity:.8}#app[data-v-cc7d4f3c]{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;position:relative;z-index:10}#nav[data-v-cc7d4f3c]{padding:30px}#nav a[data-v-cc7d4f3c]{font-weight:700;color:#2c3e50}#nav a.router-link-exact-active[data-v-cc7d4f3c]{color:#42b983}.custom-video[data-v-f780eef4]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin:0 auto;min-height:100%;padding:20px;border-radius:20px;min-width:500px}.custom-video_container[data-v-f780eef4]{height:400px;margin:0 auto;position:relative;overflow:hidden}.custom-video_video[data-v-f780eef4],.custom-video_video video[data-v-f780eef4]{height:100%}.thumbs[data-v-f780eef4]{white-space:nowrap;overflow:hidden;height:50px;background:#ffc7d1}.thumbs .inner[data-v-f780eef4]{height:50px;display:-webkit-box;display:-ms-flexbox;display:flex}.thumbs .inner-item[data-v-f780eef4]{position:relative}.thumbs .inner-loading[data-v-f780eef4]{position:absolute;top:0;left:0;height:100%;width:100%}.thumbs video[data-v-f780eef4]{-o-object-fit:cover;object-fit:cover}.video-controls[data-v-f780eef4]{position:relative;margin:50px 0}.control-bars-wrapper[data-v-f780eef4],.control-bars[data-v-f780eef4]{position:absolute;right:0;bottom:0;top:0;left:0}.control-bars-wrapper[data-v-f780eef4]{border:1px solid #04f0fb;z-index:10;min-width:20px}.control-bars-mask[data-v-f780eef4]{position:absolute;top:0;bottom:0;background-color:rgba(25,30,64,.8)}.control-bars-mask.left[data-v-f780eef4]{left:0}.control-bars-mask.right[data-v-f780eef4]{right:0}.control-bars-progress[data-v-f780eef4]{position:absolute;height:80px;top:-15px;width:1px;background:#fff;border-radius:100px}.control-bars-progress.animate[data-v-f780eef4]{-webkit-transition:all .3s;transition:all .3s}.control-bars-progress svg[data-v-f780eef4]{position:absolute;top:-10px;left:-26px}.control-bars-progress .text[data-v-f780eef4]{position:absolute;width:54px;height:18px;top:-10px;left:-26px;font-size:12px;line-height:18px}.control-bars-move[data-v-f780eef4]{position:absolute;width:10px;height:10px;background:#04f0fb;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);border-radius:50%;cursor:ew-resize;z-index:2}.control-bars-move[data-v-f780eef4]:active{background:#fff}.control-bars-move.left[data-v-f780eef4]{left:-5px}.control-bars-move.right[data-v-f780eef4]{right:-5px}.video-btn[data-v-f780eef4]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.video-btn .toggle[data-v-f780eef4]{width:100px;height:45px;line-height:45px;border-radius:30px;background-color:rgba(0,0,0,.3);position:relative;-webkit-transition:background-color .2s;transition:background-color .2s;cursor:pointer}.video-btn .toggle-icon[data-v-f780eef4]{position:absolute;display:inline-block;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fff;opacity:1;-webkit-transition:all .2s;transition:all .2s}.video-btn .toggle-icon.playing[data-v-f780eef4]{width:12px;height:15px;border-left:4px solid #fff;border-right:4px solid #fff;border-top:0 solid transparent;border-bottom:0 solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box}.video-btn .crop-range[data-v-f780eef4]{font-size:14px}.video-btn .crop-input[data-v-f780eef4],.video-btn .crop-range[data-v-f780eef4]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.video-btn .crop-input[data-v-f780eef4]{height:30px;background:rgba(0,0,0,.3);border-radius:15px;overflow:hidden;padding:0 24px}.video-btn .crop-input input[data-v-f780eef4]{float:left;width:18px;outline:none;background:transparent;border:none;font-size:14px;color:#fff}.video-btn .crop-input span[data-v-f780eef4]{width:8px;line-height:28px;height:28px;float:left;margin:0;padding:0;color:#fff}.loading[data-v-f780eef4]{width:100%;height:100%;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.loading-con[data-v-f780eef4]{position:absolute;-webkit-animation:loading-data-v-f780eef4 1s linear infinite;animation:loading-data-v-f780eef4 1s linear infinite;width:25px;height:25px;border-radius:50%;-webkit-box-shadow:0 2px 0 0 #fff;box-shadow:0 2px 0 0 #fff;-webkit-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes loading-data-v-f780eef4{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loading-data-v-f780eef4{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}} -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/dist/favicon.ico -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | video
-------------------------------------------------------------------------------- /dist/js/app.dd35137f.js: -------------------------------------------------------------------------------- 1 | (function(t){function e(e){for(var n,s,d=e[0],a=e[1],u=e[2],l=0,h=[];lr||e<0?f(t):e}return e.width=o*n,e.height=r*n,i.scale(n,n),i.globalAlpha=.6,h(),h}var e=document.createElement("canvas");e.id="evanyou-canvas",e.style.position="absolute",e.style.top=0,e.style.left=0,e.style.zIndex=0,e.style.width="100%",e.style.width="100%",e.style.pointerEvents="none",document.body.appendChild(e);var i=t();document.addEventListener("click",i)},getTime:function(t){this.current=t},toggle:function(){var t=this;this.isPortrait?(this.url=d.a,this.isPortrait=!1):(this.url=u.a,this.isPortrait=!0),this.videoShow=!1,setTimeout((function(){t.videoShow=!0,t.$nextTick((function(){t.$refs.VideoClip.init()}))}),100)}}},l=c,h=(i("5dbd"),i("2877")),v=Object(h["a"])(l,o,r,!1,null,"cc7d4f3c",null),f=v.exports,m=(i("b0c0"),function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.videoShow?i("div",{staticClass:"custom-video"},[i("div",{ref:"custom-video_container",staticClass:"custom-video_container"},[i("div",{staticClass:"custom-video_video"},[i("video",{ref:"custom-video",attrs:{src:t.blobURL}},[i("p",[t._v("设备不支持")])])])]),i("div",{staticClass:"video-controls",on:{mousedown:t.handleClick}},[i("div",{ref:"thumbs",staticClass:"thumbs"},[t.thumbCount?i("div",{ref:"thumbs-inner",staticClass:"inner"},t._l(t.thumbArr,(function(e,n){return i("div",{key:n,staticClass:"inner-item",style:"width:"+t.videoUnitWidth+"px;"},[i("video",{attrs:{width:"100%",preload:"metadata",src:e.url},on:{canplay:function(t){e.loading=!1}}}),e.loading?i("div",{staticClass:"inner-loading"},[t._m(0,!0)]):t._e()])})),0):t._e()]),i("div",{ref:"control-bars",staticClass:"control-bars"},[i("div",{staticClass:"control-bars-mask left",style:"width:"+t.leftMovePercentage+"%;",attrs:{"data-direction":"left"}}),i("div",{staticClass:"control-bars-mask right",style:"width:"+t.rightMovePercentage+"%;",attrs:{"data-direction":"right"}}),i("div",{staticClass:"control-bars-progress",class:{animate:t.videoEdit.play},style:"left:"+t.videoEdit.currentPosition+"%;"},[i("svg",{attrs:{width:"54px",height:"24px",viewBox:"0 0 54 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[i("g",{attrs:{id:"Page-1",stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"}},[i("path",{attrs:{d:"M27,23 L27,24 L26,24 L26,23 C26,20.2385763 23.7614237,18 21,18 L9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 L45,0 C49.9705627,0 54,4.02943725 54,9 C54,13.9705627 49.9705627,18 45,18 L32,18 L32,18 C29.2385763,18 27,20.2385763 27,23 Z",id:"time_bg",fill:"#FFFFFF"}})])]),i("span",{staticClass:"text"},[t._v(t._s(t.timeTranslate(t.currentTime)))])]),i("div",{staticClass:"control-bars-wrapper",style:"left:"+t.leftMovePercentage+"%;right:"+t.rightMovePercentage+"%;"},[i("div",{ref:"move-left-icon",staticClass:"control-bars-move left",on:{mousedown:function(e){return t.handleMoveDown(e,"left")}}}),i("div",{ref:"move-right-icon",staticClass:"control-bars-move right",on:{mousedown:function(e){return t.handleMoveDown(e,"right")}}})])])]),i("div",{staticClass:"video-btn"},[i("div",{staticClass:"toggle",on:{click:t.togglePlayStatus}},[i("div",{staticClass:"toggle-icon",class:{playing:t.videoEdit.play}})]),i("div",{staticClass:"crop-range"},[i("div",{staticClass:"crop-input crop-start"},[i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.inputStartLeftTime,expression:"inputStartLeftTime",modifiers:{number:!0}}],attrs:{type:"text",placeholder:"00",maxlength:"2",id:"range-0"},domProps:{value:t.inputStartLeftTime},on:{input:function(e){e.target.composing||(t.inputStartLeftTime=t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",[t._v("：")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.inputStartRightTime,expression:"inputStartRightTime",modifiers:{number:!0}}],attrs:{type:"text",placeholder:"00",maxlength:"2",id:"range-1"},domProps:{value:t.inputStartRightTime},on:{input:function(e){e.target.composing||(t.inputStartRightTime=t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}})]),i("span",{staticStyle:{color:"#fff",margin:"0 10px"}},[t._v("一")]),i("div",{staticClass:"crop-input crop-end"},[i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.inputEndLeftTime,expression:"inputEndLeftTime",modifiers:{number:!0}}],attrs:{type:"text",placeholder:"00",maxlength:"2",id:"range-2"},domProps:{value:t.inputEndLeftTime},on:{input:function(e){e.target.composing||(t.inputEndLeftTime=t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",[t._v("：")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.inputEndRightTime,expression:"inputEndRightTime",modifiers:{number:!0}}],attrs:{type:"text",placeholder:"00",maxlength:"2",id:"range-3"},domProps:{value:t.inputEndRightTime},on:{input:function(e){e.target.composing||(t.inputEndRightTime=t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}})])])])]):t._e()}),p=[function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"loading"},[i("div",{staticClass:"loading-con"})])}],g=(i("99af"),i("fb6a"),i("b680"),i("ac1f"),i("3ca3"),i("1276"),i("ddb0"),i("2b3d"),{name:"vueVideoClip",props:{url:{type:String,required:!0}},data:function(){return{blobURL:"",videoState:{play:!1,currentPosition:0},videoEdit:{start:0,end:0,duration:0,play:!1,currentPosition:0},videoDom:null,duration:0,currentTime:0,objectURL:"",videoUnit:0,videoUnitWidth:0,videoRatio:0,isPortraitVideo:!1,thumbCount:0,thumbArr:[],leftMovePercentage:0,leftMoveInit:0,rightMovePercentage:0,rightMoveInit:0,videoShow:!0}},mounted:function(){var t=this;this.init(),window.onresize=function(){t.throttle(t.init(),300)}},computed:{inputStartLeftTime:{set:function(t){t=60*t+this.toInt(document.getElementById("range-1").value),(t>=this.videoEdit.end||t<0)&&(t=0),this.videoEdit.start=t},get:function(){return this.timeTranslate(this.videoEdit.start).split(":")[0]}},inputStartRightTime:{set:function(t){t=60*this.toInt(document.getElementById("range-0").value)+t,(t>=this.videoEdit.end||t<0)&&(t=0),this.videoEdit.start=t},get:function(){return this.timeTranslate(this.videoEdit.start).split(":")[1]}},inputEndLeftTime:{set:function(t){t=60*t+this.toInt(document.getElementById("range-3").value),(t<=this.videoEdit.start||t>this.videoEdit.duration)&&(t=this.videoEdit.duration),this.videoEdit.end=t},get:function(){return this.timeTranslate(this.videoEdit.end).split(":")[0]}},inputEndRightTime:{set:function(t){t=60*this.toInt(document.getElementById("range-2").value)+t,(t<=this.videoEdit.start||t>this.videoEdit.duration)&&(t=this.videoEdit.duration),this.videoEdit.end=t},get:function(){return this.timeTranslate(this.videoEdit.end).split(":")[1]}}},watch:{"videoEdit.start":{handler:function(t){this.currentTime=t,this.videoEdit.currentPosition=this.currentTime/this.videoEdit.duration*100,this.leftMovePercentage=this.videoEdit.currentPosition,this.$emit("getTime",{start:t,end:this.videoEdit.end})},deep:!0},"videoEdit.end":{handler:function(t){this.currentTime=t,this.videoEdit.currentPosition=this.currentTime/this.videoEdit.duration*100,this.rightMovePercentage=100-this.videoEdit.currentPosition,this.$emit("getTime",{start:this.videoEdit.start,end:t})},deep:!0}},methods:{throttle:function(t,e,i){var n;return function(){var o=i||this,r=arguments;n||(n=setTimeout((function(){t.apply(o,r),n=null}),e))}},init:function(){var t=this;this.videoDom=this.$refs["custom-video"],this.leftIconDom=this.$refs["move-left-icon"],this.rightIconDom=this.$refs["move-right-icon"],this.thumbsWidth=this.$refs.thumbs.clientWidth,this.leftMoveInit=this.getOffset(this.leftIconDom).left+5,this.rightMoveInit=this.getOffset(this.rightIconDom).left+5,this.minWidthPercentage=(20/this.thumbsWidth*100).toFixed(4),this.initMedaData(),this.transformBlob(),document.addEventListener("mouseup",(function(e){t.handleMoveStatus=!1})),document.addEventListener("mousemove",(function(e){if(t.handleMoveStatus){if("left"===t.handleMoveDirection){var i=e.clientX-t.leftMoveInit;t.leftMovePercentage=i>0?(i/(t.thumbsWidth-20)*100).toFixed(4):0,t.leftMovePercentage>100-t.rightMovePercentage-t.minWidthPercentage&&(t.leftMovePercentage=100-t.rightMovePercentage-t.minWidthPercentage),t.videoEdit.start=(t.videoEdit.duration*t.leftMovePercentage/100).toFixed(4)}if("right"===t.handleMoveDirection){var n=t.rightMoveInit-e.clientX;t.rightMovePercentage=n>0?(n/(t.thumbsWidth-20)*100).toFixed(4):0,t.rightMovePercentage>100-t.leftMovePercentage-t.minWidthPercentage&&(t.rightMovePercentage=100-t.leftMovePercentage-t.minWidthPercentage),t.videoEdit.end=(t.videoEdit.duration*(1-t.rightMovePercentage/100)).toFixed(4)}t.handleClick(e,t.handleMoveDirection)}}))},toInt:function(t){return parseInt(t)||0},togglePlayStatus:function(){this.videoEdit.play?this.toggleVideoPause():this.toggleVideoPlay()},toggleVideoPlay:function(){var t=this;this.videoEdit.end-this.currentTime<.01&&(this.videoDom.currentTime=this.videoEdit.start),setTimeout((function(){t.videoDom.play(),t.videoEdit.play=!0}),50)},toggleVideoPause:function(){this.videoDom.pause(),this.videoEdit.play=!1},playEnd:function(){this.videoDom.currentTime=this.videoEdit.start,this.videoDom.pause(),this.videoEdit.play=!1},transformBlob:function(){var t=this,e=new XMLHttpRequest;e.open("GET",this.url,!0),e.responseType="blob",e.onload=function(e){if(200===this.status){var i=this.response;t.blobURL=URL.createObjectURL(i)}else alert("视频转换失败")},e.send()},initMedaData:function(){var t=this;this.videoDom.addEventListener("loadedmetadata",(function(){t.videoEdit.duration=t.videoDom.duration,t.videoEdit.end=t.videoEdit.duration}));var e=this;this.videoDom.addEventListener("canplay",(function(){if(e.videoRatio=this.videoHeight/this.videoWidth,e.isPortraitVideo=e.videoRatio>1.5,e.videoUnitWidth=e.isPortraitVideo?28:88,e.thumbCount=Math.ceil(e.thumbsWidth/e.videoUnitWidth),e.videoUnit=e.videoEdit.duration/e.thumbCount,e.thumbArr.length!==e.thumbCount){e.thumbArr=[];for(var t=0;t100?100:this.videoEdit.currentPosition,this.videoEdit.currentPosition=this.videoEdit.currentPosition<0?0:this.videoEdit.currentPosition},getOffset:function(t,e){return e||(e={},e.left=0,e.top=0),t===document.body||null===t?e:(e.top+=t.offsetTop,e.left+=t.offsetLeft,this.getOffset(t.offsetParent,e))},timeTranslate:function(t){var e=Math.floor(t/60);return e<10&&(e="0"+e),e+":"+(t%60/100).toFixed(2).slice(-2)}}}),b=g,E=(i("59b4"),Object(h["a"])(b,m,p,!1,null,"f780eef4",null)),P=E.exports,y={install:function(t,e){t.component(P.name,P)}};"undefined"!==typeof window&&window.Vue&&window.Vue.use(y);var w=y;n["a"].config.productionTip=!1,n["a"].use(w),new n["a"]({render:function(t){return t(f)}}).$mount("#app")},"59b4":function(t,e,i){"use strict";var n=i("81f6"),o=i.n(n);o.a},"5dbd":function(t,e,i){"use strict";var n=i("ea5c"),o=i.n(n);o.a},"81f6":function(t,e,i){},"98ff":function(t,e,i){t.exports=i.p+"media/videoPortrait.81062a31.mp4"},a0d0:function(t,e,i){t.exports=i.p+"media/mov_bbb.198918f4.mp4"},ea5c:function(t,e,i){}}); 2 | //# sourceMappingURL=app.dd35137f.js.map -------------------------------------------------------------------------------- /dist/js/app.dd35137f.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/App.vue?c7ec","webpack:///src/App.vue","webpack:///./src/App.vue?1160","webpack:///./src/App.vue","webpack:///./src/components/vueVideoClip.vue?b122","webpack:///src/components/vueVideoClip.vue","webpack:///./src/components/vueVideoClip.vue?4fbe","webpack:///./src/components/vueVideoClip.vue","webpack:///./src/components/index.js","webpack:///./src/main.js","webpack:///./src/components/vueVideoClip.vue?7fb4","webpack:///./src/App.vue?f76c","webpack:///./src/static/media/videoPortrait.mp4","webpack:///./src/static/media/mov_bbb.mp4"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","_v","on","toggle","ref","url","getTime","_e","_s","current","start","end","staticRenderFns","videoShow","isPortrait","mounted","bgInit","methods","evanyou","q","document","getElementById","x","getContext","pr","devicePixelRatio","w","innerWidth","h","innerHeight","f","Math","u","PI","v","cos","z","random","clearRect","beginPath","moveTo","y","lineTo","k","closePath","fillStyle","fill","width","height","scale","globalAlpha","canvas","id","style","position","top","left","zIndex","pointerEvents","body","appendChild","listener","addEventListener","val","setTimeout","component","blobURL","handleClick","_l","item","index","videoUnitWidth","$event","loading","_m","leftMovePercentage","rightMovePercentage","class","animate","videoEdit","play","timeTranslate","currentTime","handleMoveDown","togglePlayStatus","playing","directives","rawName","expression","modifiers","domProps","target","composing","inputStartLeftTime","_n","$forceUpdate","inputStartRightTime","staticStyle","inputEndLeftTime","inputEndRightTime","props","type","String","required","videoState","currentPosition","duration","videoDom","objectURL","videoUnit","videoRatio","isPortraitVideo","thumbCount","thumbArr","leftMoveInit","rightMoveInit","init","onresize","computed","set","toInt","split","watch","handler","$emit","deep","throttle","timer","fn","context","args","$refs","leftIconDom","rightIconDom","thumbsWidth","thumbs","clientWidth","getOffset","minWidthPercentage","initMedaData","transformBlob","parseInt","toggleVideoPause","toggleVideoPlay","pause","playEnd","xhr","open","responseType","onload","e","status","self","URL","createObjectURL","myBlob","alert","send","videoHeight","videoWidth","ceil","$nextTick","marginLeft","handleMoveStatus","handleMoveDirection","direction","ev","dataset","offset","node","offsetTop","offsetLeft","offsetParent","VideoClip","install","Vue","options","vueVideoClip","use","config","productionTip","videoClip","render","App","$mount"],"mappings":"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","file":"js/app.dd35137f.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('div',{staticClass:\"title\"},[_c('div',[_vm._v(\"简单视频剪辑功能实现\")]),_c('div',{staticClass:\"btn\",on:{\"click\":_vm.toggle}},[_vm._v(\"切换横竖屏视频\")])]),(_vm.videoShow)?_c('vue-video-clip',{ref:\"VideoClip\",attrs:{\"url\":_vm.url},on:{\"getTime\":_vm.getTime}}):_vm._e(),_c('div',[_c('div',[_vm._v(\"start：\"+_vm._s(_vm.current.start))]),_c('div',[_vm._v(\"end：\"+_vm._s(_vm.current.end))])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=cc7d4f3c&scoped=true&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&id=cc7d4f3c&lang=scss&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"cc7d4f3c\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.videoShow)?_c('div',{staticClass:\"custom-video\"},[_c('div',{ref:\"custom-video_container\",staticClass:\"custom-video_container\"},[_c('div',{staticClass:\"custom-video_video\"},[_c('video',{ref:\"custom-video\",attrs:{\"src\":_vm.blobURL}},[_c('p',[_vm._v(\"设备不支持\")])])])]),_c('div',{staticClass:\"video-controls\",on:{\"mousedown\":_vm.handleClick}},[_c('div',{ref:\"thumbs\",staticClass:\"thumbs\"},[(_vm.thumbCount)?_c('div',{ref:\"thumbs-inner\",staticClass:\"inner\"},_vm._l((_vm.thumbArr),function(item,index){return _c('div',{key:index,staticClass:\"inner-item\",style:((\"width:\" + _vm.videoUnitWidth + \"px;\"))},[_c('video',{attrs:{\"width\":\"100%\",\"preload\":\"metadata\",\"src\":item.url},on:{\"canplay\":function($event){item.loading = false}}}),(item.loading)?_c('div',{staticClass:\"inner-loading\"},[_vm._m(0,true)]):_vm._e()])}),0):_vm._e()]),_c('div',{ref:\"control-bars\",staticClass:\"control-bars\"},[_c('div',{staticClass:\"control-bars-mask left\",style:((\"width:\" + _vm.leftMovePercentage + \"%;\")),attrs:{\"data-direction\":\"left\"}}),_c('div',{staticClass:\"control-bars-mask right\",style:((\"width:\" + _vm.rightMovePercentage + \"%;\")),attrs:{\"data-direction\":\"right\"}}),_c('div',{staticClass:\"control-bars-progress\",class:{ animate: _vm.videoEdit.play },style:((\"left:\" + (_vm.videoEdit.currentPosition) + \"%;\"))},[_c('svg',{attrs:{\"width\":\"54px\",\"height\":\"24px\",\"viewBox\":\"0 0 54 24\",\"version\":\"1.1\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"xmlns:xlink\":\"http://www.w3.org/1999/xlink\"}},[_c('g',{attrs:{\"id\":\"Page-1\",\"stroke\":\"none\",\"stroke-width\":\"1\",\"fill\":\"none\",\"fill-rule\":\"evenodd\"}},[_c('path',{attrs:{\"d\":\"M27,23 L27,24 L26,24 L26,23 C26,20.2385763 23.7614237,18 21,18 L9,18 C4.02943725,18 0,13.9705627 0,9 C0,4.02943725 4.02943725,0 9,0 L45,0 C49.9705627,0 54,4.02943725 54,9 C54,13.9705627 49.9705627,18 45,18 L32,18 L32,18 C29.2385763,18 27,20.2385763 27,23 Z\",\"id\":\"time_bg\",\"fill\":\"#FFFFFF\"}})])]),_c('span',{staticClass:\"text\"},[_vm._v(_vm._s(_vm.timeTranslate(_vm.currentTime)))])]),_c('div',{staticClass:\"control-bars-wrapper\",style:((\"left:\" + _vm.leftMovePercentage + \"%;right:\" + _vm.rightMovePercentage + \"%;\"))},[_c('div',{ref:\"move-left-icon\",staticClass:\"control-bars-move left\",on:{\"mousedown\":function($event){return _vm.handleMoveDown($event, 'left')}}}),_c('div',{ref:\"move-right-icon\",staticClass:\"control-bars-move right\",on:{\"mousedown\":function($event){return _vm.handleMoveDown($event, 'right')}}})])])]),_c('div',{staticClass:\"video-btn\"},[_c('div',{staticClass:\"toggle\",on:{\"click\":_vm.togglePlayStatus}},[_c('div',{staticClass:\"toggle-icon\",class:{ playing: _vm.videoEdit.play }})]),_c('div',{staticClass:\"crop-range\"},[_c('div',{staticClass:\"crop-input crop-start\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.inputStartLeftTime),expression:\"inputStartLeftTime\",modifiers:{\"number\":true}}],attrs:{\"type\":\"text\",\"placeholder\":\"00\",\"maxlength\":\"2\",\"id\":\"range-0\"},domProps:{\"value\":(_vm.inputStartLeftTime)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.inputStartLeftTime=_vm._n($event.target.value)},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',[_vm._v(\"：\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.inputStartRightTime),expression:\"inputStartRightTime\",modifiers:{\"number\":true}}],attrs:{\"type\":\"text\",\"placeholder\":\"00\",\"maxlength\":\"2\",\"id\":\"range-1\"},domProps:{\"value\":(_vm.inputStartRightTime)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.inputStartRightTime=_vm._n($event.target.value)},\"blur\":function($event){return _vm.$forceUpdate()}}})]),_c('span',{staticStyle:{\"color\":\"#fff\",\"margin\":\"0 10px\"}},[_vm._v(\"一\")]),_c('div',{staticClass:\"crop-input crop-end\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.inputEndLeftTime),expression:\"inputEndLeftTime\",modifiers:{\"number\":true}}],attrs:{\"type\":\"text\",\"placeholder\":\"00\",\"maxlength\":\"2\",\"id\":\"range-2\"},domProps:{\"value\":(_vm.inputEndLeftTime)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.inputEndLeftTime=_vm._n($event.target.value)},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',[_vm._v(\"：\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.inputEndRightTime),expression:\"inputEndRightTime\",modifiers:{\"number\":true}}],attrs:{\"type\":\"text\",\"placeholder\":\"00\",\"maxlength\":\"2\",\"id\":\"range-3\"},domProps:{\"value\":(_vm.inputEndRightTime)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.inputEndRightTime=_vm._n($event.target.value)},\"blur\":function($event){return _vm.$forceUpdate()}}})])])])]):_vm._e()}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"loading\"},[_c('div',{staticClass:\"loading-con\"})])}]\n\nexport { render, staticRenderFns }","\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./vueVideoClip.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./vueVideoClip.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./vueVideoClip.vue?vue&type=template&id=f780eef4&scoped=true&\"\nimport script from \"./vueVideoClip.vue?vue&type=script&lang=js&\"\nexport * from \"./vueVideoClip.vue?vue&type=script&lang=js&\"\nimport style0 from \"./vueVideoClip.vue?vue&type=style&index=0&id=f780eef4&scoped=true&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"f780eef4\",\n null\n \n)\n\nexport default component.exports","\nimport vueVideoClip from './vueVideoClip.vue'\n\nconst VideoClip = {\n install (Vue, options) {\n Vue.component(vueVideoClip.name, vueVideoClip)\n }\n}\n\n// if Vue is the window object, auto install it\nif (typeof window !== 'undefined' && window.Vue) {\n window.Vue.use(VideoClip)\n}\n\nexport default VideoClip\n","import Vue from 'vue'\nimport App from './App.vue'\nimport videoClip from './components/index'\n\nVue.config.productionTip = false\nVue.use(videoClip)\n\nnew Vue({\n render: h => h(App)\n}).$mount('#app')\n","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./vueVideoClip.vue?vue&type=style&index=0&id=f780eef4&scoped=true&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./vueVideoClip.vue?vue&type=style&index=0&id=f780eef4&scoped=true&lang=scss&\"","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&id=cc7d4f3c&lang=scss&scoped=true&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&id=cc7d4f3c&lang=scss&scoped=true&\"","module.exports = __webpack_public_path__ + \"media/videoPortrait.81062a31.mp4\";","module.exports = __webpack_public_path__ + \"media/mov_bbb.198918f4.mp4\";"],"sourceRoot":""} -------------------------------------------------------------------------------- /dist/media/mov_bbb.198918f4.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/dist/media/mov_bbb.198918f4.mp4 -------------------------------------------------------------------------------- /dist/media/videoPortrait.81062a31.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/dist/media/videoPortrait.81062a31.mp4 -------------------------------------------------------------------------------- /lib/demo.html: -------------------------------------------------------------------------------- 1 | 2 | vueVideoClip demo 3 | 4 | 5 | 6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /lib/vueVideoClip.css: -------------------------------------------------------------------------------- 1 | .custom-video[data-v-07a83bdb]{margin:0 auto;min-height:100%;padding:20px;border-radius:20px;min-width:500px}.custom-video_container[data-v-07a83bdb]{height:400px;margin:0 auto;position:relative;overflow:hidden}.custom-video_video[data-v-07a83bdb],.custom-video_video video[data-v-07a83bdb]{height:100%}.thumbs[data-v-07a83bdb]{white-space:nowrap;overflow:hidden;height:50px}.thumbs .inner[data-v-07a83bdb]{height:50px}.thumbs video[data-v-07a83bdb]{-o-object-fit:cover;object-fit:cover}.video-controls[data-v-07a83bdb]{position:relative;margin:50px 0}.control-bars-wrapper[data-v-07a83bdb],.control-bars[data-v-07a83bdb]{position:absolute;right:0;bottom:0;top:0;left:0}.control-bars-wrapper[data-v-07a83bdb]{border:1px solid #00e0ff;z-index:10;min-width:20px}.control-bars-mask[data-v-07a83bdb]{position:absolute;top:0;bottom:0;background-color:rgba(25,30,64,.8)}.control-bars-mask.left[data-v-07a83bdb]{left:0}.control-bars-mask.right[data-v-07a83bdb]{right:0}.control-bars-progress[data-v-07a83bdb]{position:absolute;height:80px;top:-15px;width:1px;background:#fff;border-radius:100px}.control-bars-progress.animate[data-v-07a83bdb]{-webkit-transition:all .3s;transition:all .3s}.control-bars-progress svg[data-v-07a83bdb]{position:absolute;top:-10px;left:-26px}.control-bars-progress .text[data-v-07a83bdb]{position:absolute;width:54px;height:18px;top:-10px;left:-26px;font-size:12px;line-height:18px}.control-bars-move[data-v-07a83bdb]{position:absolute;width:10px;height:10px;background:#00e0ff;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:ew-resize;z-index:2}.control-bars-move[data-v-07a83bdb]:active{background:#fff}.control-bars-move.left[data-v-07a83bdb]{left:-5px}.control-bars-move.right[data-v-07a83bdb]{right:-5px}.video-btn[data-v-07a83bdb]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.video-btn .toggle[data-v-07a83bdb]{width:100px;height:45px;line-height:45px;border-radius:30px;background-color:rgba(0,0,0,.3);position:relative;-webkit-transition:background-color .2s;transition:background-color .2s;cursor:pointer}.video-btn .toggle-icon[data-v-07a83bdb]{position:absolute;display:inline-block;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #fff;opacity:1;-webkit-transition:all .2s;transition:all .2s}.video-btn .toggle-icon.playing[data-v-07a83bdb]{width:12px;height:15px;border-left:4px solid #fff;border-right:4px solid #fff;border-top:0 solid transparent;border-bottom:0 solid transparent;-webkit-box-sizing:border-box;box-sizing:border-box}.video-btn .crop-range[data-v-07a83bdb]{font-size:14px}.video-btn .crop-input[data-v-07a83bdb],.video-btn .crop-range[data-v-07a83bdb]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.video-btn .crop-input[data-v-07a83bdb]{height:30px;background:rgba(0,0,0,.3);border-radius:15px;overflow:hidden;padding:0 24px}.video-btn .crop-input input[data-v-07a83bdb]{float:left;width:18px;outline:none;background:transparent;border:none;font-size:14px;color:#fff}.video-btn .crop-input span[data-v-07a83bdb]{width:8px;line-height:28px;height:28px;float:left;margin:0;padding:0;color:#fff} -------------------------------------------------------------------------------- /lib/vueVideoClip.umd.min.js: -------------------------------------------------------------------------------- 1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["vueVideoClip"]=e():t["vueVideoClip"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.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 i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));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"),i=r("toStringTag"),o={};o[i]="z",t.exports="[object z]"===String(o)},"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,i){return t.call(e,n,r,i)}}return function(){return t.apply(e,arguments)}}},"06cf":function(t,e,n){var r=n("83ab"),i=n("d1e7"),o=n("5c6c"),a=n("fc6a"),c=n("c04e"),u=n("5135"),s=n("0cfb"),f=Object.getOwnPropertyDescriptor;e.f=r?f:function(t,e){if(t=a(t),e=c(e,!0),s)try{return f(t,e)}catch(n){}if(u(t,e))return o(!i.f.call(t,e),t[e])}},"0cfb":function(t,e,n){var r=n("83ab"),i=n("d039"),o=n("cc12");t.exports=!r&&!i((function(){return 7!=Object.defineProperty(o("div"),"a",{get:function(){return 7}}).a}))},"0d3b":function(t,e,n){var r=n("d039"),i=n("b622"),o=n("c430"),a=i("iterator");t.exports=!r((function(){var t=new URL("b?a=1&b=2&c=3","http://a"),e=t.searchParams,n="";return t.pathname="c%20d",e.forEach((function(t,r){e["delete"]("b"),n+=r+t})),o&&!t.toJSON||!e.sort||"http://a/c%20d?a=1&c=3"!==t.href||"3"!==e.get("c")||"a=1"!==String(new URLSearchParams("?a=1"))||!e[a]||"a"!==new URL("https://a@b").username||"b"!==new URLSearchParams(new URLSearchParams("a=b")).get("a")||"xn--e1aybc"!==new URL("http://тест").host||"#%D0%B1"!==new URL("http://a#б").hash||"a1c3"!==n||"x"!==new URL("http://x",void 0).host}))},1148:function(t,e,n){"use strict";var r=n("a691"),i=n("1d80");t.exports="".repeat||function(t){var e=String(i(this)),n="",o=r(t);if(o<0||o==1/0)throw RangeError("Wrong number of repetitions");for(;o>0;(o>>>=1)&&(e+=e))1&o&&(n+=e);return n}},1276:function(t,e,n){"use strict";var r=n("d784"),i=n("44e7"),o=n("825a"),a=n("1d80"),c=n("4840"),u=n("8aa5"),s=n("50c4"),f=n("14c3"),l=n("9263"),d=n("d039"),h=[].push,p=Math.min,v=4294967295,g=!d((function(){return!RegExp(v,"y")}));r("split",2,(function(t,e,n){var r;return r="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,n){var r=String(a(this)),o=void 0===n?v:n>>>0;if(0===o)return[];if(void 0===t)return[r];if(!i(t))return e.call(r,t,o);var c,u,s,f=[],d=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),p=0,g=new RegExp(t.source,d+"g");while(c=l.call(g,r)){if(u=g.lastIndex,u>p&&(f.push(r.slice(p,c.index)),c.length>1&&c.index=o))break;g.lastIndex===c.index&&g.lastIndex++}return p===r.length?!s&&g.test("")||f.push(""):f.push(r.slice(p)),f.length>o?f.slice(0,o):f}:"0".split(void 0,0).length?function(t,n){return void 0===t&&0===n?[]:e.call(this,t,n)}:e,[function(e,n){var i=a(this),o=void 0==e?void 0:e[t];return void 0!==o?o.call(e,i,n):r.call(String(i),e,n)},function(t,i){var a=n(r,t,this,i,r!==e);if(a.done)return a.value;var l=o(t),d=String(this),h=c(l,RegExp),m=l.unicode,b=(l.ignoreCase?"i":"")+(l.multiline?"m":"")+(l.unicode?"u":"")+(g?"y":"g"),y=new h(g?l:"^(?:"+l.source+")",b),x=void 0===i?v:i>>>0;if(0===x)return[];if(0===d.length)return null===f(y,d)?[d]:[];var w=0,E=0,S=[];while(E=51||!r((function(){var e=[],n=e.constructor={};return n[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},2266:function(t,e,n){var r=n("825a"),i=n("e95a"),o=n("50c4"),a=n("0366"),c=n("35a1"),u=n("9bdd"),s=function(t,e){this.stopped=t,this.result=e},f=t.exports=function(t,e,n,f,l){var d,h,p,v,g,m,b,y=a(e,n,f?2:1);if(l)d=t;else{if(h=c(t),"function"!=typeof h)throw TypeError("Target is not iterable");if(i(h)){for(p=0,v=o(t.length);v>p;p++)if(g=f?y(r(b=t[p])[0],b[1]):y(t[p]),g&&g instanceof s)return g;return new s(!1)}d=h.call(t)}m=d.next;while(!(b=m.call(d)).done)if(g=u(d,y,b.value,f),"object"==typeof g&&g&&g instanceof s)return g;return new s(!1)};f.stop=function(t){return new s(!0,t)}},"23cb":function(t,e,n){var r=n("a691"),i=Math.max,o=Math.min;t.exports=function(t,e){var n=r(t);return n<0?i(n+e,0):o(n,e)}},"23e7":function(t,e,n){var r=n("da84"),i=n("06cf").f,o=n("9112"),a=n("6eeb"),c=n("ce4e"),u=n("e893"),s=n("94ca");t.exports=function(t,e){var n,f,l,d,h,p,v=t.target,g=t.global,m=t.stat;if(f=g?r:m?r[v]||c(v,{}):(r[v]||{}).prototype,f)for(l in e){if(h=e[l],t.noTargetGet?(p=i(f,l),d=p&&p.value):d=f[l],n=s(g?l:v+(m?".":"#")+l,t.forced),!n&&void 0!==d){if(typeof h===typeof d)continue;u(h,d)}(t.sham||d&&d.sham)&&o(h,"sham",!0),a(f,l,h,t)}}},"241c":function(t,e,n){var r=n("ca84"),i=n("7839"),o=i.concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},2626:function(t,e,n){"use strict";var r=n("d066"),i=n("9bf2"),o=n("b622"),a=n("83ab"),c=o("species");t.exports=function(t){var e=r(t),n=i.f;a&&e&&!e[c]&&n(e,c,{configurable:!0,get:function(){return this}})}},"2b3d":function(t,e,n){"use strict";n("3ca3");var r,i=n("23e7"),o=n("83ab"),a=n("0d3b"),c=n("da84"),u=n("37e8"),s=n("6eeb"),f=n("19aa"),l=n("5135"),d=n("60da"),h=n("4df4"),p=n("6547").codeAt,v=n("5fb2"),g=n("d44e"),m=n("9861"),b=n("69f3"),y=c.URL,x=m.URLSearchParams,w=m.getState,E=b.set,S=b.getterFor("URL"),P=Math.floor,T=Math.pow,R="Invalid authority",L="Invalid scheme",j="Invalid host",O="Invalid port",C=/[A-Za-z]/,k=/[\d+\-.A-Za-z]/,A=/\d/,M=/^(0x|0X)/,I=/^[0-7]+$/,_=/^\d+$/,U=/^[\dA-Fa-f]+$/,F=/[\u0000\u0009\u000A\u000D #%/:?@[\\]]/,D=/[\u0000\u0009\u000A\u000D #/:?@[\\]]/,B=/^[\u0000-\u001F ]+|[\u0000-\u001F ]+$/g,q=/[\u0009\u000A\u000D]/g,N=function(t,e){var n,r,i;if("["==e.charAt(0)){if("]"!=e.charAt(e.length-1))return j;if(n=W(e.slice(1,-1)),!n)return j;t.host=n}else if(J(t)){if(e=v(e),F.test(e))return j;if(n=$(e),null===n)return j;t.host=n}else{if(D.test(e))return j;for(n="",r=h(e),i=0;i4)return t;for(n=[],r=0;r1&&"0"==i.charAt(0)&&(o=M.test(i)?16:8,i=i.slice(8==o?1:2)),""===i)a=0;else{if(!(10==o?_:8==o?I:U).test(i))return t;a=parseInt(i,o)}n.push(a)}for(r=0;r=T(256,5-e))return null}else if(a>255)return null;for(c=n.pop(),r=0;r6)return;r=0;while(d()){if(i=null,r>0){if(!("."==d()&&r<4))return;l++}if(!A.test(d()))return;while(A.test(d())){if(o=parseInt(d(),10),null===i)i=o;else{if(0==i)return;i=10*i+o}if(i>255)return;l++}u[s]=256*u[s]+i,r++,2!=r&&4!=r||s++}if(4!=r)return;break}if(":"==d()){if(l++,!d())return}else if(d())return;u[s++]=e}else{if(null!==f)return;l++,s++,f=s}}if(null!==f){a=s-f,s=7;while(0!=s&&a>0)c=u[s],u[s--]=u[f+a-1],u[f+--a]=c}else if(8!=s)return;return u},V=function(t){for(var e=null,n=1,r=null,i=0,o=0;o<8;o++)0!==t[o]?(i>n&&(e=r,n=i),r=null,i=0):(null===r&&(r=o),++i);return i>n&&(e=r,n=i),e},G=function(t){var e,n,r,i;if("number"==typeof t){for(e=[],n=0;n<4;n++)e.unshift(t%256),t=P(t/256);return e.join(".")}if("object"==typeof t){for(e="",r=V(t),n=0;n<8;n++)i&&0===t[n]||(i&&(i=!1),r===n?(e+=n?":":"::",i=!0):(e+=t[n].toString(16),n<7&&(e+=":")));return"["+e+"]"}return t},z={},X=d({},z,{" ":1,'"':1,"<":1,">":1,"`":1}),H=d({},X,{"#":1,"?":1,"{":1,"}":1}),K=d({},H,{"/":1,":":1,";":1,"=":1,"@":1,"[":1,"\\":1,"]":1,"^":1,"|":1}),Y=function(t,e){var n=p(t,0);return n>32&&n<127&&!l(e,t)?t:encodeURIComponent(t)},Z={ftp:21,file:null,http:80,https:443,ws:80,wss:443},J=function(t){return l(Z,t.scheme)},Q=function(t){return""!=t.username||""!=t.password},tt=function(t){return!t.host||t.cannotBeABaseURL||"file"==t.scheme},et=function(t,e){var n;return 2==t.length&&C.test(t.charAt(0))&&(":"==(n=t.charAt(1))||!e&&"|"==n)},nt=function(t){var e;return t.length>1&&et(t.slice(0,2))&&(2==t.length||"/"===(e=t.charAt(2))||"\\"===e||"?"===e||"#"===e)},rt=function(t){var e=t.path,n=e.length;!n||"file"==t.scheme&&1==n&&et(e[0],!0)||e.pop()},it=function(t){return"."===t||"%2e"===t.toLowerCase()},ot=function(t){return t=t.toLowerCase(),".."===t||"%2e."===t||".%2e"===t||"%2e%2e"===t},at={},ct={},ut={},st={},ft={},lt={},dt={},ht={},pt={},vt={},gt={},mt={},bt={},yt={},xt={},wt={},Et={},St={},Pt={},Tt={},Rt={},Lt=function(t,e,n,i){var o,a,c,u,s=n||at,f=0,d="",p=!1,v=!1,g=!1;n||(t.scheme="",t.username="",t.password="",t.host=null,t.port=null,t.path=[],t.query=null,t.fragment=null,t.cannotBeABaseURL=!1,e=e.replace(B,"")),e=e.replace(q,""),o=h(e);while(f<=o.length){switch(a=o[f],s){case at:if(!a||!C.test(a)){if(n)return L;s=ut;continue}d+=a.toLowerCase(),s=ct;break;case ct:if(a&&(k.test(a)||"+"==a||"-"==a||"."==a))d+=a.toLowerCase();else{if(":"!=a){if(n)return L;d="",s=ut,f=0;continue}if(n&&(J(t)!=l(Z,d)||"file"==d&&(Q(t)||null!==t.port)||"file"==t.scheme&&!t.host))return;if(t.scheme=d,n)return void(J(t)&&Z[t.scheme]==t.port&&(t.port=null));d="","file"==t.scheme?s=yt:J(t)&&i&&i.scheme==t.scheme?s=st:J(t)?s=ht:"/"==o[f+1]?(s=ft,f++):(t.cannotBeABaseURL=!0,t.path.push(""),s=Pt)}break;case ut:if(!i||i.cannotBeABaseURL&&"#"!=a)return L;if(i.cannotBeABaseURL&&"#"==a){t.scheme=i.scheme,t.path=i.path.slice(),t.query=i.query,t.fragment="",t.cannotBeABaseURL=!0,s=Rt;break}s="file"==i.scheme?yt:lt;continue;case st:if("/"!=a||"/"!=o[f+1]){s=lt;continue}s=pt,f++;break;case ft:if("/"==a){s=vt;break}s=St;continue;case lt:if(t.scheme=i.scheme,a==r)t.username=i.username,t.password=i.password,t.host=i.host,t.port=i.port,t.path=i.path.slice(),t.query=i.query;else if("/"==a||"\\"==a&&J(t))s=dt;else if("?"==a)t.username=i.username,t.password=i.password,t.host=i.host,t.port=i.port,t.path=i.path.slice(),t.query="",s=Tt;else{if("#"!=a){t.username=i.username,t.password=i.password,t.host=i.host,t.port=i.port,t.path=i.path.slice(),t.path.pop(),s=St;continue}t.username=i.username,t.password=i.password,t.host=i.host,t.port=i.port,t.path=i.path.slice(),t.query=i.query,t.fragment="",s=Rt}break;case dt:if(!J(t)||"/"!=a&&"\\"!=a){if("/"!=a){t.username=i.username,t.password=i.password,t.host=i.host,t.port=i.port,s=St;continue}s=vt}else s=pt;break;case ht:if(s=pt,"/"!=a||"/"!=d.charAt(f+1))continue;f++;break;case pt:if("/"!=a&&"\\"!=a){s=vt;continue}break;case vt:if("@"==a){p&&(d="%40"+d),p=!0,c=h(d);for(var m=0;m65535)return O;t.port=J(t)&&x===Z[t.scheme]?null:x,d=""}if(n)return;s=Et;continue}return O}d+=a;break;case yt:if(t.scheme="file","/"==a||"\\"==a)s=xt;else{if(!i||"file"!=i.scheme){s=St;continue}if(a==r)t.host=i.host,t.path=i.path.slice(),t.query=i.query;else if("?"==a)t.host=i.host,t.path=i.path.slice(),t.query="",s=Tt;else{if("#"!=a){nt(o.slice(f).join(""))||(t.host=i.host,t.path=i.path.slice(),rt(t)),s=St;continue}t.host=i.host,t.path=i.path.slice(),t.query=i.query,t.fragment="",s=Rt}}break;case xt:if("/"==a||"\\"==a){s=wt;break}i&&"file"==i.scheme&&!nt(o.slice(f).join(""))&&(et(i.path[0],!0)?t.path.push(i.path[0]):t.host=i.host),s=St;continue;case wt:if(a==r||"/"==a||"\\"==a||"?"==a||"#"==a){if(!n&&et(d))s=St;else if(""==d){if(t.host="",n)return;s=Et}else{if(u=N(t,d),u)return u;if("localhost"==t.host&&(t.host=""),n)return;d="",s=Et}continue}d+=a;break;case Et:if(J(t)){if(s=St,"/"!=a&&"\\"!=a)continue}else if(n||"?"!=a)if(n||"#"!=a){if(a!=r&&(s=St,"/"!=a))continue}else t.fragment="",s=Rt;else t.query="",s=Tt;break;case St:if(a==r||"/"==a||"\\"==a&&J(t)||!n&&("?"==a||"#"==a)){if(ot(d)?(rt(t),"/"==a||"\\"==a&&J(t)||t.path.push("")):it(d)?"/"==a||"\\"==a&&J(t)||t.path.push(""):("file"==t.scheme&&!t.path.length&&et(d)&&(t.host&&(t.host=""),d=d.charAt(0)+":"),t.path.push(d)),d="","file"==t.scheme&&(a==r||"?"==a||"#"==a))while(t.path.length>1&&""===t.path[0])t.path.shift();"?"==a?(t.query="",s=Tt):"#"==a&&(t.fragment="",s=Rt)}else d+=Y(a,H);break;case Pt:"?"==a?(t.query="",s=Tt):"#"==a?(t.fragment="",s=Rt):a!=r&&(t.path[0]+=Y(a,z));break;case Tt:n||"#"!=a?a!=r&&("'"==a&&J(t)?t.query+="%27":t.query+="#"==a?"%23":Y(a,z)):(t.fragment="",s=Rt);break;case Rt:a!=r&&(t.fragment+=Y(a,X));break}f++}},jt=function(t){var e,n,r=f(this,jt,"URL"),i=arguments.length>1?arguments[1]:void 0,a=String(t),c=E(r,{type:"URL"});if(void 0!==i)if(i instanceof jt)e=S(i);else if(n=Lt(e={},String(i)),n)throw TypeError(n);if(n=Lt(c,a,null,e),n)throw TypeError(n);var u=c.searchParams=new x,s=w(u);s.updateSearchParams(c.query),s.updateURL=function(){c.query=String(u)||null},o||(r.href=Ct.call(r),r.origin=kt.call(r),r.protocol=At.call(r),r.username=Mt.call(r),r.password=It.call(r),r.host=_t.call(r),r.hostname=Ut.call(r),r.port=Ft.call(r),r.pathname=Dt.call(r),r.search=Bt.call(r),r.searchParams=qt.call(r),r.hash=Nt.call(r))},Ot=jt.prototype,Ct=function(){var t=S(this),e=t.scheme,n=t.username,r=t.password,i=t.host,o=t.port,a=t.path,c=t.query,u=t.fragment,s=e+":";return null!==i?(s+="//",Q(t)&&(s+=n+(r?":"+r:"")+"@"),s+=G(i),null!==o&&(s+=":"+o)):"file"==e&&(s+="//"),s+=t.cannotBeABaseURL?a[0]:a.length?"/"+a.join("/"):"",null!==c&&(s+="?"+c),null!==u&&(s+="#"+u),s},kt=function(){var t=S(this),e=t.scheme,n=t.port;if("blob"==e)try{return new URL(e.path[0]).origin}catch(r){return"null"}return"file"!=e&&J(t)?e+"://"+G(t.host)+(null!==n?":"+n:""):"null"},At=function(){return S(this).scheme+":"},Mt=function(){return S(this).username},It=function(){return S(this).password},_t=function(){var t=S(this),e=t.host,n=t.port;return null===e?"":null===n?G(e):G(e)+":"+n},Ut=function(){var t=S(this).host;return null===t?"":G(t)},Ft=function(){var t=S(this).port;return null===t?"":String(t)},Dt=function(){var t=S(this),e=t.path;return t.cannotBeABaseURL?e[0]:e.length?"/"+e.join("/"):""},Bt=function(){var t=S(this).query;return t?"?"+t:""},qt=function(){return S(this).searchParams},Nt=function(){var t=S(this).fragment;return t?"#"+t:""},$t=function(t,e){return{get:t,set:e,configurable:!0,enumerable:!0}};if(o&&u(Ot,{href:$t(Ct,(function(t){var e=S(this),n=String(t),r=Lt(e,n);if(r)throw TypeError(r);w(e.searchParams).updateSearchParams(e.query)})),origin:$t(kt),protocol:$t(At,(function(t){var e=S(this);Lt(e,String(t)+":",at)})),username:$t(Mt,(function(t){var e=S(this),n=h(String(t));if(!tt(e)){e.username="";for(var r=0;rn)e.push(arguments[n++]);return x[++y]=function(){("function"==typeof t?t:Function(t)).apply(void 0,e)},r(y),y},v=function(t){delete x[t]},"process"==u(g)?r=function(t){g.nextTick(S(t))}:b&&b.now?r=function(t){b.now(S(t))}:m&&!d?(i=new m,o=i.port2,i.port1.onmessage=P,r=s(o.postMessage,o,1)):!a.addEventListener||"function"!=typeof postMessage||a.importScripts||c(T)?r=w in l("script")?function(t){f.appendChild(l("script"))[w]=function(){f.removeChild(this),E(t)}}:function(t){setTimeout(S(t),0)}:(r=T,a.addEventListener("message",P,!1))),t.exports={set:p,clear:v}},"2d00":function(t,e,n){var r,i,o=n("da84"),a=n("342f"),c=o.process,u=c&&c.versions,s=u&&u.v8;s?(r=s.split("."),i=r[0]+r[1]):a&&(r=a.match(/Edge\/(\d+)/),(!r||r[1]>=74)&&(r=a.match(/Chrome\/(\d+)/),r&&(i=r[1]))),t.exports=i&&+i},"342f":function(t,e,n){var r=n("d066");t.exports=r("navigator","userAgent")||""},"35a1":function(t,e,n){var r=n("f5df"),i=n("3f8c"),o=n("b622"),a=o("iterator");t.exports=function(t){if(void 0!=t)return t[a]||t["@@iterator"]||i[r(t)]}},"37e8":function(t,e,n){var r=n("83ab"),i=n("9bf2"),o=n("825a"),a=n("df75");t.exports=r?Object.defineProperties:function(t,e){o(t);var n,r=a(e),c=r.length,u=0;while(c>u)i.f(t,n=r[u++],e[n]);return 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}},"3ca3":function(t,e,n){"use strict";var r=n("6547").charAt,i=n("69f3"),o=n("7dd0"),a="String Iterator",c=i.set,u=i.getterFor(a);o(String,"String",(function(t){c(this,{type:a,string:String(t),index:0})}),(function(){var t,e=u(this),n=e.string,i=e.index;return i>=n.length?{value:void 0,done:!0}:(t=r(n,i),e.index+=t.length,{value:t,done:!1})}))},"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"),i=n("c6b6"),o="".split;t.exports=r((function(){return!Object("z").propertyIsEnumerable(0)}))?function(t){return"String"==i(t)?o.call(t,""):Object(t)}:Object},"44d2":function(t,e,n){var r=n("b622"),i=n("7c73"),o=n("9bf2"),a=r("unscopables"),c=Array.prototype;void 0==c[a]&&o.f(c,a,{configurable:!0,value:i(null)}),t.exports=function(t){c[a][t]=!0}},"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))}},"44e7":function(t,e,n){var r=n("861d"),i=n("c6b6"),o=n("b622"),a=o("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[a])?!!e:"RegExp"==i(t))}},4840:function(t,e,n){var r=n("825a"),i=n("1c0b"),o=n("b622"),a=o("species");t.exports=function(t,e){var n,o=r(t).constructor;return void 0===o||void 0==(n=r(o)[a])?e:i(n)}},4930:function(t,e,n){var r=n("d039");t.exports=!!Object.getOwnPropertySymbols&&!r((function(){return!String(Symbol())}))},"4d64":function(t,e,n){var r=n("fc6a"),i=n("50c4"),o=n("23cb"),a=function(t){return function(e,n,a){var c,u=r(e),s=i(u.length),f=o(a,s);if(t&&n!=n){while(s>f)if(c=u[f++],c!=c)return!0}else for(;s>f;f++)if((t||f in u)&&u[f]===n)return t||f||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},"4df4":function(t,e,n){"use strict";var r=n("0366"),i=n("7b0b"),o=n("9bdd"),a=n("e95a"),c=n("50c4"),u=n("8418"),s=n("35a1");t.exports=function(t){var e,n,f,l,d,h,p=i(t),v="function"==typeof this?this:Array,g=arguments.length,m=g>1?arguments[1]:void 0,b=void 0!==m,y=s(p),x=0;if(b&&(m=r(m,g>2?arguments[2]:void 0,2)),void 0==y||v==Array&&a(y))for(e=c(p.length),n=new v(e);e>x;x++)h=b?m(p[x],x):p[x],u(n,x,h);else for(l=y.call(p),d=l.next,n=new v;!(f=d.call(l)).done;x++)h=b?o(l,m,[f.value,x],!0):f.value,u(n,x,h);return n.length=x,n}},"50c4":function(t,e,n){var r=n("a691"),i=Math.min;t.exports=function(t){return t>0?i(r(t),9007199254740991):0}},5135:function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},5692:function(t,e,n){var r=n("c430"),i=n("c6cd");(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:"3.6.4",mode:r?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},"56ef":function(t,e,n){var r=n("d066"),i=n("241c"),o=n("7418"),a=n("825a");t.exports=r("Reflect","ownKeys")||function(t){var e=i.f(a(t)),n=o.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}}},"5fb2":function(t,e,n){"use strict";var r=2147483647,i=36,o=1,a=26,c=38,u=700,s=72,f=128,l="-",d=/[^\0-\u007E]/,h=/[.\u3002\uFF0E\uFF61]/g,p="Overflow: input needs wider integers to process",v=i-o,g=Math.floor,m=String.fromCharCode,b=function(t){var e=[],n=0,r=t.length;while(n=55296&&i<=56319&&n>1,t+=g(t/e);t>v*a>>1;r+=i)t=g(t/v);return g(r+(v+1)*t/(t+c))},w=function(t){var e=[];t=b(t);var n,c,u=t.length,d=f,h=0,v=s;for(n=0;n=d&&cg((r-h)/P))throw RangeError(p);for(h+=(S-d)*P,d=S,n=0;nr)throw RangeError(p);if(c==d){for(var T=h,R=i;;R+=i){var L=R<=v?o:R>=v+a?a:R-v;if(Tf){var h,p=s(arguments[f++]),v=l?o(p).concat(l(p)):o(p),g=v.length,m=0;while(g>m)h=v[m++],r&&!d.call(p,h)||(n[h]=p[h])}return n}:f},6547:function(t,e,n){var r=n("a691"),i=n("1d80"),o=function(t){return function(e,n){var o,a,c=String(i(e)),u=r(n),s=c.length;return u<0||u>=s?t?"":void 0:(o=c.charCodeAt(u),o<55296||o>56319||u+1===s||(a=c.charCodeAt(u+1))<56320||a>57343?t?c.charAt(u):o:t?c.slice(u,u+2):a-56320+(o-55296<<10)+65536)}};t.exports={codeAt:o(!1),charAt:o(!0)}},"69f3":function(t,e,n){var r,i,o,a=n("7f9a"),c=n("da84"),u=n("861d"),s=n("9112"),f=n("5135"),l=n("f772"),d=n("d012"),h=c.WeakMap,p=function(t){return o(t)?i(t):r(t,{})},v=function(t){return function(e){var n;if(!u(e)||(n=i(e)).type!==t)throw TypeError("Incompatible receiver, "+t+" required");return n}};if(a){var g=new h,m=g.get,b=g.has,y=g.set;r=function(t,e){return y.call(g,t,e),e},i=function(t){return m.call(g,t)||{}},o=function(t){return b.call(g,t)}}else{var x=l("state");d[x]=!0,r=function(t,e){return s(t,x,e),e},i=function(t){return f(t,x)?t[x]:{}},o=function(t){return f(t,x)}}t.exports={set:r,get:i,has:o,enforce:p,getterFor:v}},"6eeb":function(t,e,n){var r=n("da84"),i=n("9112"),o=n("5135"),a=n("ce4e"),c=n("8925"),u=n("69f3"),s=u.get,f=u.enforce,l=String(String).split("String");(t.exports=function(t,e,n,c){var u=!!c&&!!c.unsafe,s=!!c&&!!c.enumerable,d=!!c&&!!c.noTargetGet;"function"==typeof n&&("string"!=typeof e||o(n,"name")||i(n,"name",e),f(n).source=l.join("string"==typeof e?e:"")),t!==r?(u?!d&&t[e]&&(s=!0):delete t[e],s?t[e]=n:i(t,e,n)):s?t[e]=n:a(e,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&s(this).source||c(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))}},"7c73":function(t,e,n){var r,i=n("825a"),o=n("37e8"),a=n("7839"),c=n("d012"),u=n("1be4"),s=n("cc12"),f=n("f772"),l=">",d="<",h="prototype",p="script",v=f("IE_PROTO"),g=function(){},m=function(t){return d+p+l+t+d+"/"+p+l},b=function(t){t.write(m("")),t.close();var e=t.parentWindow.Object;return t=null,e},y=function(){var t,e=s("iframe"),n="java"+p+":";return e.style.display="none",u.appendChild(e),e.src=String(n),t=e.contentWindow.document,t.open(),t.write(m("document.F=Object")),t.close(),t.F},x=function(){try{r=document.domain&&new ActiveXObject("htmlfile")}catch(e){}x=r?b(r):y();var t=a.length;while(t--)delete x[h][a[t]];return x()};c[v]=!0,t.exports=Object.create||function(t,e){var n;return null!==t?(g[h]=i(t),n=new g,g[h]=null,n[v]=t):n=x(),void 0===e?n:o(n,e)}},"7dd0":function(t,e,n){"use strict";var r=n("23e7"),i=n("9ed3"),o=n("e163"),a=n("d2bb"),c=n("d44e"),u=n("9112"),s=n("6eeb"),f=n("b622"),l=n("c430"),d=n("3f8c"),h=n("ae93"),p=h.IteratorPrototype,v=h.BUGGY_SAFARI_ITERATORS,g=f("iterator"),m="keys",b="values",y="entries",x=function(){return this};t.exports=function(t,e,n,f,h,w,E){i(n,e,f);var S,P,T,R=function(t){if(t===h&&k)return k;if(!v&&t in O)return O[t];switch(t){case m:return function(){return new n(this,t)};case b:return function(){return new n(this,t)};case y:return function(){return new n(this,t)}}return function(){return new n(this)}},L=e+" Iterator",j=!1,O=t.prototype,C=O[g]||O["@@iterator"]||h&&O[h],k=!v&&C||R(h),A="Array"==e&&O.entries||C;if(A&&(S=o(A.call(new t)),p!==Object.prototype&&S.next&&(l||o(S)===p||(a?a(S,p):"function"!=typeof S[g]&&u(S,g,x)),c(S,L,!0,!0),l&&(d[L]=x))),h==b&&C&&C.name!==b&&(j=!0,k=function(){return C.call(this)}),l&&!E||O[g]===k||u(O,g,k),d[e]=k,h)if(P={values:R(b),keys:w?k:R(m),entries:R(y)},E)for(T in P)!v&&!j&&T in O||s(O,T,P[T]);else r({target:e,proto:!0,forced:v||j},P);return P}},"7f9a":function(t,e,n){var r=n("da84"),i=n("8925"),o=r.WeakMap;t.exports="function"===typeof o&&/native code/.test(i(o))},"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]}))},8418:function(t,e,n){"use strict";var r=n("c04e"),i=n("9bf2"),o=n("5c6c");t.exports=function(t,e,n){var a=r(e);a in t?i.f(t,a,o(0,n)):t[a]=n}},"861d":function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},"881d":function(t,e,n){"use strict";var r=n("c25b"),i=n.n(r);i.a},8925:function(t,e,n){var r=n("c6cd"),i=Function.toString;"function"!=typeof r.inspectSource&&(r.inspectSource=function(t){return i.call(t)}),t.exports=r.inspectSource},"8aa5":function(t,e,n){"use strict";var r=n("6547").charAt;t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},"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"),i=n("9bf2"),o=n("5c6c");t.exports=r?function(t,e,n){return i.f(t,e,o(1,n))}:function(t,e,n){return t[e]=n,t}},9263:function(t,e,n){"use strict";var r=n("ad6d"),i=n("9f7f"),o=RegExp.prototype.exec,a=String.prototype.replace,c=o,u=function(){var t=/a/,e=/b*/g;return o.call(t,"a"),o.call(e,"a"),0!==t.lastIndex||0!==e.lastIndex}(),s=i.UNSUPPORTED_Y||i.BROKEN_CARET,f=void 0!==/()??/.exec("")[1],l=u||f||s;l&&(c=function(t){var e,n,i,c,l=this,d=s&&l.sticky,h=r.call(l),p=l.source,v=0,g=t;return d&&(h=h.replace("y",""),-1===h.indexOf("g")&&(h+="g"),g=String(t).slice(l.lastIndex),l.lastIndex>0&&(!l.multiline||l.multiline&&"\n"!==t[l.lastIndex-1])&&(p="(?: "+p+")",g=" "+g,v++),n=new RegExp("^(?:"+p+")",h)),f&&(n=new RegExp("^"+p+"$(?!\\s)",h)),u&&(e=l.lastIndex),i=o.call(d?n:l,g),d?i?(i.input=i.input.slice(v),i[0]=i[0].slice(v),i.index=l.lastIndex,l.lastIndex+=i[0].length):l.lastIndex=0:u&&i&&(l.lastIndex=l.global?i.index+i[0].length:e),f&&i&&i.length>1&&a.call(i[0],n,(function(){for(c=1;c0?arguments[0]:void 0,f=this,h=[];if(L(f,{type:T,entries:h,updateURL:function(){},updateSearchParams:q}),void 0!==s)if(g(s))if(t=x(s),"function"===typeof t){e=t.call(s),n=e.next;while(!(r=n.call(e)).done){if(i=y(v(r.value)),o=i.next,(a=o.call(i)).done||(c=o.call(i)).done||!o.call(i).done)throw TypeError("Expected sequence with length 2");h.push({key:a.value+"",value:c.value+""})}}else for(u in s)d(s,u)&&h.push({key:u,value:s[u]+""});else B(h,"string"===typeof s?"?"===s.charAt(0)?s.slice(1):s:s+"")},V=W.prototype;c(V,{append:function(t,e){N(arguments.length,2);var n=j(this);n.entries.push({key:t+"",value:e+""}),n.updateURL()},delete:function(t){N(arguments.length,1);var e=j(this),n=e.entries,r=t+"",i=0;while(it.key){i.splice(e,0,t);break}e===n&&i.push(t)}r.updateURL()},forEach:function(t){var e,n=j(this).entries,r=h(t,arguments.length>1?arguments[1]:void 0,3),i=0;while(i1&&(e=arguments[1],g(e)&&(n=e.body,p(n)===T&&(r=e.headers?new S(e.headers):new S,r.has("content-type")||r.set("content-type","application/x-www-form-urlencoded;charset=UTF-8"),e=m(e,{body:b(0,String(n)),headers:b(0,r)}))),i.push(e)),E.apply(this,i)}}),t.exports={URLSearchParams:W,getState:j}},"9a1f":function(t,e,n){var r=n("825a"),i=n("35a1");t.exports=function(t){var e=i(t);if("function"!=typeof e)throw TypeError(String(t)+" is not iterable");return r(e.call(t))}},"9bdd":function(t,e,n){var r=n("825a");t.exports=function(t,e,n,i){try{return i?e(r(n)[0],n[1]):e(n)}catch(a){var o=t["return"];throw void 0!==o&&r(o.call(t)),a}}},"9bf2":function(t,e,n){var r=n("83ab"),i=n("0cfb"),o=n("825a"),a=n("c04e"),c=Object.defineProperty;e.f=r?c:function(t,e,n){if(o(t),e=a(e,!0),o(n),i)try{return c(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}},"9ed3":function(t,e,n){"use strict";var r=n("ae93").IteratorPrototype,i=n("7c73"),o=n("5c6c"),a=n("d44e"),c=n("3f8c"),u=function(){return this};t.exports=function(t,e,n){var s=e+" Iterator";return t.prototype=i(r,{next:o(1,n)}),a(t,s,!1,!0),c[s]=u,t}},"9f7f":function(t,e,n){"use strict";var r=n("d039");function i(t,e){return RegExp(t,e)}e.UNSUPPORTED_Y=r((function(){var t=i("a","y");return t.lastIndex=2,null!=t.exec("abcd")})),e.BROKEN_CARET=r((function(){var t=i("^r","gy");return t.lastIndex=2,null!=t.exec("str")}))},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)}},ac1f:function(t,e,n){"use strict";var r=n("23e7"),i=n("9263");r({target:"RegExp",proto:!0,forced:/./.exec!==i},{exec:i})},ad6d:function(t,e,n){"use strict";var r=n("825a");t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},ae40:function(t,e,n){var r=n("83ab"),i=n("d039"),o=n("5135"),a=Object.defineProperty,c={},u=function(t){throw t};t.exports=function(t,e){if(o(c,t))return c[t];e||(e={});var n=[][t],s=!!o(e,"ACCESSORS")&&e.ACCESSORS,f=o(e,0)?e[0]:u,l=o(e,1)?e[1]:void 0;return c[t]=!!n&&!i((function(){if(s&&!r)return!0;var t={length:-1};s?a(t,1,{enumerable:!0,get:u}):t[1]=1,n.call(t,f,l)}))}},ae93:function(t,e,n){"use strict";var r,i,o,a=n("e163"),c=n("9112"),u=n("5135"),s=n("b622"),f=n("c430"),l=s("iterator"),d=!1,h=function(){return this};[].keys&&(o=[].keys(),"next"in o?(i=a(a(o)),i!==Object.prototype&&(r=i)):d=!0),void 0==r&&(r={}),f||u(r,l)||c(r,l,h),t.exports={IteratorPrototype:r,BUGGY_SAFARI_ITERATORS:d}},b041:function(t,e,n){"use strict";var r=n("00ee"),i=n("f5df");t.exports=r?{}.toString:function(){return"[object "+i(this)+"]"}},b0c0:function(t,e,n){var r=n("83ab"),i=n("9bf2").f,o=Function.prototype,a=o.toString,c=/^\s*function ([^ (]*)/,u="name";!r||u in o||i(o,u,{configurable:!0,get:function(){try{return a.call(this).match(c)[1]}catch(t){return""}}})},b575:function(t,e,n){var r,i,o,a,c,u,s,f,l=n("da84"),d=n("06cf").f,h=n("c6b6"),p=n("2cf4").set,v=n("1cdc"),g=l.MutationObserver||l.WebKitMutationObserver,m=l.process,b=l.Promise,y="process"==h(m),x=d(l,"queueMicrotask"),w=x&&x.value;w||(r=function(){var t,e;y&&(t=m.domain)&&t.exit();while(i){e=i.fn,i=i.next;try{e()}catch(n){throw i?a():o=void 0,n}}o=void 0,t&&t.enter()},y?a=function(){m.nextTick(r)}:g&&!v?(c=!0,u=document.createTextNode(""),new g(r).observe(u,{characterData:!0}),a=function(){u.data=c=!c}):b&&b.resolve?(s=b.resolve(void 0),f=s.then,a=function(){f.call(s,r)}):a=function(){p.call(l,r)}),t.exports=w||function(t){var e={fn:t,next:void 0};o&&(o.next=e),i||(i=e,a()),o=e}},b622:function(t,e,n){var r=n("da84"),i=n("5692"),o=n("5135"),a=n("90e3"),c=n("4930"),u=n("fdbf"),s=i("wks"),f=r.Symbol,l=u?f:f&&f.withoutSetter||a;t.exports=function(t){return o(s,t)||(c&&o(f,t)?s[t]=f[t]:s[t]=l("Symbol."+t)),s[t]}},b680:function(t,e,n){"use strict";var r=n("23e7"),i=n("a691"),o=n("408a"),a=n("1148"),c=n("d039"),u=1..toFixed,s=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)},l=function(t){var e=0,n=t;while(n>=4096)e+=12,n/=4096;while(n>=2)e+=1,n/=2;return e},d=u&&("0.000"!==8e-5.toFixed(3)||"1"!==.9.toFixed(0)||"1.25"!==1.255.toFixed(2)||"1000000000000000128"!==(0xde0b6b3a7640080).toFixed(0))||!c((function(){u.call({})}));r({target:"Number",proto:!0,forced:d},{toFixed:function(t){var e,n,r,c,u=o(this),d=i(t),h=[0,0,0,0,0,0],p="",v="0",g=function(t,e){var n=-1,r=e;while(++n<6)r+=t*h[n],h[n]=r%1e7,r=s(r/1e7)},m=function(t){var e=6,n=0;while(--e>=0)n+=h[e],h[e]=s(n/t),n=n%t*1e7},b=function(){var t=6,e="";while(--t>=0)if(""!==e||0===t||0!==h[t]){var n=String(h[t]);e=""===e?n:e+a.call("0",7-n.length)+n}return e};if(d<0||d>20)throw RangeError("Incorrect fraction digits");if(u!=u)return"NaN";if(u<=-1e21||u>=1e21)return String(u);if(u<0&&(p="-",u=-u),u>1e-21)if(e=l(u*f(2,69,1))-69,n=e<0?u*f(2,-e,1):u/f(2,e,1),n*=4503599627370496,e=52-e,e>0){g(0,n),r=d;while(r>=7)g(1e7,0),r-=7;g(f(10,r,1),0),r=e-1;while(r>=23)m(1<<23),r-=23;m(1<0?(c=v.length,v=p+(c<=d?"0."+a.call("0",d-c)+v:v.slice(0,c-d)+"."+v.slice(c-d))):v=p+v,v}})},c04e:function(t,e,n){var r=n("861d");t.exports=function(t,e){if(!r(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!r(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!r(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},c25b:function(t,e,n){},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"),i=n("ce4e"),o="__core-js_shared__",a=r[o]||i(o,{});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"),i=n("fc6a"),o=n("4d64").indexOf,a=n("d012");t.exports=function(t,e){var n,c=i(t),u=0,s=[];for(n in c)!r(a,n)&&r(c,n)&&s.push(n);while(e.length>u)r(c,n=e[u++])&&(~o(s,n)||s.push(n));return s}},cc12:function(t,e,n){var r=n("da84"),i=n("861d"),o=r.document,a=i(o)&&i(o.createElement);t.exports=function(t){return a?o.createElement(t):{}}},cdf9:function(t,e,n){var r=n("825a"),i=n("861d"),o=n("f069");t.exports=function(t,e){if(r(t),i(e)&&e.constructor===t)return e;var n=o.f(t),a=n.resolve;return a(e),n.promise}},ce4e:function(t,e,n){var r=n("da84"),i=n("9112");t.exports=function(t,e){try{i(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"),i=n("da84"),o=function(t){return"function"==typeof t?t:void 0};t.exports=function(t,e){return arguments.length<2?o(r[t])||o(i[t]):r[t]&&r[t][e]||i[t]&&i[t][e]}},d1e7:function(t,e,n){"use strict";var r={}.propertyIsEnumerable,i=Object.getOwnPropertyDescriptor,o=i&&!r.call({1:2},1);e.f=o?function(t){var e=i(this,t);return!!e&&e.enumerable}:r},d2bb:function(t,e,n){var r=n("825a"),i=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(o){}return function(n,o){return r(n),i(o),e?t.call(n,o):n.__proto__=o,n}}():void 0)},d3b7:function(t,e,n){var r=n("00ee"),i=n("6eeb"),o=n("b041");r||i(Object.prototype,"toString",o,{unsafe:!0})},d44e:function(t,e,n){var r=n("9bf2").f,i=n("5135"),o=n("b622"),a=o("toStringTag");t.exports=function(t,e,n){t&&!i(t=n?t:t.prototype,a)&&r(t,a,{configurable:!0,value:e})}},d784:function(t,e,n){"use strict";n("ac1f");var r=n("6eeb"),i=n("d039"),o=n("b622"),a=n("9263"),c=n("9112"),u=o("species"),s=!i((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$")})),f=function(){return"$0"==="a".replace(/./,"$0")}(),l=o("replace"),d=function(){return!!/./[l]&&""===/./[l]("a","$0")}(),h=!i((function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2!==n.length||"a"!==n[0]||"b"!==n[1]}));t.exports=function(t,e,n,l){var p=o(t),v=!i((function(){var e={};return e[p]=function(){return 7},7!=""[t](e)})),g=v&&!i((function(){var e=!1,n=/a/;return"split"===t&&(n={},n.constructor={},n.constructor[u]=function(){return n},n.flags="",n[p]=/./[p]),n.exec=function(){return e=!0,null},n[p](""),!e}));if(!v||!g||"replace"===t&&(!s||!f||d)||"split"===t&&!h){var m=/./[p],b=n(p,""[t],(function(t,e,n,r,i){return e.exec===a?v&&!i?{done:!0,value:m.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}}),{REPLACE_KEEPS_$0:f,REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE:d}),y=b[0],x=b[1];r(String.prototype,t,y),r(RegExp.prototype,p,2==e?function(t,e){return x.call(t,this,e)}:function(t){return x.call(t,this)})}l&&c(RegExp.prototype[p],"sham",!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")()}).call(this,n("c8ba"))},ddb0:function(t,e,n){var r=n("da84"),i=n("fdbc"),o=n("e260"),a=n("9112"),c=n("b622"),u=c("iterator"),s=c("toStringTag"),f=o.values;for(var l in i){var d=r[l],h=d&&d.prototype;if(h){if(h[u]!==f)try{a(h,u,f)}catch(v){h[u]=f}if(h[s]||a(h,s,l),i[l])for(var p in o)if(h[p]!==o[p])try{a(h,p,o[p])}catch(v){h[p]=o[p]}}}},df75:function(t,e,n){var r=n("ca84"),i=n("7839");t.exports=Object.keys||function(t){return r(t,i)}},e163:function(t,e,n){var r=n("5135"),i=n("7b0b"),o=n("f772"),a=n("e177"),c=o("IE_PROTO"),u=Object.prototype;t.exports=a?Object.getPrototypeOf:function(t){return t=i(t),r(t,c)?t[c]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?u:null}},e177:function(t,e,n){var r=n("d039");t.exports=!r((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},e260:function(t,e,n){"use strict";var r=n("fc6a"),i=n("44d2"),o=n("3f8c"),a=n("69f3"),c=n("7dd0"),u="Array Iterator",s=a.set,f=a.getterFor(u);t.exports=c(Array,"Array",(function(t,e){s(this,{type:u,target:r(t),index:0,kind:e})}),(function(){var t=f(this),e=t.target,n=t.kind,r=t.index++;return!e||r>=e.length?(t.target=void 0,{value:void 0,done:!0}):"keys"==n?{value:r,done:!1}:"values"==n?{value:e[r],done:!1}:{value:[r,e[r]],done:!1}}),"values"),o.Arguments=o.Array,i("keys"),i("values"),i("entries")},e2cc:function(t,e,n){var r=n("6eeb");t.exports=function(t,e,n){for(var i in e)r(t,i,e[i],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,i,o,a,c=n("23e7"),u=n("c430"),s=n("da84"),f=n("d066"),l=n("fea9"),d=n("6eeb"),h=n("e2cc"),p=n("d44e"),v=n("2626"),g=n("861d"),m=n("1c0b"),b=n("19aa"),y=n("c6b6"),x=n("8925"),w=n("2266"),E=n("1c7e"),S=n("4840"),P=n("2cf4").set,T=n("b575"),R=n("cdf9"),L=n("44de"),j=n("f069"),O=n("e667"),C=n("69f3"),k=n("94ca"),A=n("b622"),M=n("2d00"),I=A("species"),_="Promise",U=C.get,F=C.set,D=C.getterFor(_),B=l,q=s.TypeError,N=s.document,$=s.process,W=f("fetch"),V=j.f,G=V,z="process"==y($),X=!!(N&&N.createEvent&&s.dispatchEvent),H="unhandledrejection",K="rejectionhandled",Y=0,Z=1,J=2,Q=1,tt=2,et=k(_,(function(){var t=x(B)!==String(B);if(!t){if(66===M)return!0;if(!z&&"function"!=typeof PromiseRejectionEvent)return!0}if(u&&!B.prototype["finally"])return!0;if(M>=51&&/native code/.test(B))return!1;var e=B.resolve(1),n=function(t){t((function(){}),(function(){}))},r=e.constructor={};return r[I]=n,!(e.then((function(){}))instanceof n)})),nt=et||!E((function(t){B.all(t)["catch"]((function(){}))})),rt=function(t){var e;return!(!g(t)||"function"!=typeof(e=t.then))&&e},it=function(t,e,n){if(!e.notified){e.notified=!0;var r=e.reactions;T((function(){var i=e.value,o=e.state==Z,a=0;while(r.length>a){var c,u,s,f=r[a++],l=o?f.ok:f.fail,d=f.resolve,h=f.reject,p=f.domain;try{l?(o||(e.rejection===tt&&ut(t,e),e.rejection=Q),!0===l?c=i:(p&&p.enter(),c=l(i),p&&(p.exit(),s=!0)),c===f.promise?h(q("Promise-chain cycle")):(u=rt(c))?u.call(c,d,h):d(c)):h(i)}catch(v){p&&!s&&p.exit(),h(v)}}e.reactions=[],e.notified=!1,n&&!e.rejection&&at(t,e)}))}},ot=function(t,e,n){var r,i;X?(r=N.createEvent("Event"),r.promise=e,r.reason=n,r.initEvent(t,!1,!0),s.dispatchEvent(r)):r={promise:e,reason:n},(i=s["on"+t])?i(r):t===H&&L("Unhandled promise rejection",n)},at=function(t,e){P.call(s,(function(){var n,r=e.value,i=ct(e);if(i&&(n=O((function(){z?$.emit("unhandledRejection",r,t):ot(H,t,r)})),e.rejection=z||ct(e)?tt:Q,n.error))throw n.value}))},ct=function(t){return t.rejection!==Q&&!t.parent},ut=function(t,e){P.call(s,(function(){z?$.emit("rejectionHandled",t):ot(K,t,e.value)}))},st=function(t,e,n,r){return function(i){t(e,n,i,r)}},ft=function(t,e,n,r){e.done||(e.done=!0,r&&(e=r),e.value=n,e.state=J,it(t,e,!0))},lt=function(t,e,n,r){if(!e.done){e.done=!0,r&&(e=r);try{if(t===n)throw q("Promise can't be resolved itself");var i=rt(n);i?T((function(){var r={done:!1};try{i.call(n,st(lt,t,r,e),st(ft,t,r,e))}catch(o){ft(t,r,o,e)}})):(e.value=n,e.state=Z,it(t,e,!1))}catch(o){ft(t,{done:!1},o,e)}}};et&&(B=function(t){b(this,B,_),m(t),r.call(this);var e=U(this);try{t(st(lt,this,e),st(ft,this,e))}catch(n){ft(this,e,n)}},r=function(t){F(this,{type:_,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:Y,value:void 0})},r.prototype=h(B.prototype,{then:function(t,e){var n=D(this),r=V(S(this,B));return r.ok="function"!=typeof t||t,r.fail="function"==typeof e&&e,r.domain=z?$.domain:void 0,n.parent=!0,n.reactions.push(r),n.state!=Y&&it(this,n,!1),r.promise},catch:function(t){return this.then(void 0,t)}}),i=function(){var t=new r,e=U(t);this.promise=t,this.resolve=st(lt,t,e),this.reject=st(ft,t,e)},j.f=V=function(t){return t===B||t===o?new i(t):G(t)},u||"function"!=typeof l||(a=l.prototype.then,d(l.prototype,"then",(function(t,e){var n=this;return new B((function(t,e){a.call(n,t,e)})).then(t,e)}),{unsafe:!0}),"function"==typeof W&&c({global:!0,enumerable:!0,forced:!0},{fetch:function(t){return R(B,W.apply(s,arguments))}}))),c({global:!0,wrap:!0,forced:et},{Promise:B}),p(B,_,!1,!0),v(_),o=f(_),c({target:_,stat:!0,forced:et},{reject:function(t){var e=V(this);return e.reject.call(void 0,t),e.promise}}),c({target:_,stat:!0,forced:u||et},{resolve:function(t){return R(u&&this===o?B:this,t)}}),c({target:_,stat:!0,forced:nt},{all:function(t){var e=this,n=V(e),r=n.resolve,i=n.reject,o=O((function(){var n=m(e.resolve),o=[],a=0,c=1;w(t,(function(t){var u=a++,s=!1;o.push(void 0),c++,n.call(e,t).then((function(t){s||(s=!0,o[u]=t,--c||r(o))}),i)})),--c||r(o)}));return o.error&&i(o.value),n.promise},race:function(t){var e=this,n=V(e),r=n.reject,i=O((function(){var i=m(e.resolve);w(t,(function(t){i.call(e,t).then(n.resolve,r)}))}));return i.error&&r(i.value),n.promise}})},e893:function(t,e,n){var r=n("5135"),i=n("56ef"),o=n("06cf"),a=n("9bf2");t.exports=function(t,e){for(var n=i(e),c=a.f,u=o.f,s=0;sthis.videoEdit.duration||this.videoEdit.duration-t<10)&&(t=0),this.videoEdit.start=t},get:function(){return this.timeTranslate(this.videoEdit.start).split(":")[0]}},inputStartRightTime:{set:function(t){t=60*this.toInt(document.getElementById("range-0").value)+t,(t>this.videoEdit.duration||this.videoEdit.duration-t<10)&&(t=0),this.videoEdit.start=t},get:function(){return this.timeTranslate(this.videoEdit.start).split(":")[1]}},inputEndLeftTime:{set:function(t){t=60*t+this.toInt(document.getElementById("range-3").value),(t>this.videoEdit.duration||t-this.videoEdit.start<10)&&(t=this.videoEdit.duration),this.videoEdit.end=t},get:function(){return this.timeTranslate(this.videoEdit.end).split(":")[0]}},inputEndRightTime:{set:function(t){t=60*this.toInt(document.getElementById("range-2").value)+t,(t>this.videoEdit.duration||t-this.videoEdit.start<10)&&(t=this.videoEdit.duration),this.videoEdit.end=t},get:function(){return this.timeTranslate(this.videoEdit.end).split(":")[1]}}},watch:{"videoEdit.start":{handler:function(t){this.currentTime=t,this.videoEdit.currentPosition=this.currentTime/this.videoEdit.duration*100,this.leftMovePercentage=this.videoEdit.currentPosition,this.$emit("getTime",{start:t,end:this.videoEdit.end})},deep:!0},"videoEdit.end":{handler:function(t){this.currentTime=t,this.videoEdit.currentPosition=this.currentTime/this.videoEdit.duration*100,this.rightMovePercentage=100-this.videoEdit.currentPosition,this.$emit("getTime",{start:this.videoEdit.start,end:t})},deep:!0}},methods:{throttle:function(t,e,n){var r;return function(){var i=n||this,o=arguments;r||(r=setTimeout((function(){t.apply(i,o),r=null}),e))}},init:function(){var t=this;this.videoDom=this.$refs["custom-video"],this.leftIconDom=this.$refs["move-left-icon"],this.rightIconDom=this.$refs["move-right-icon"],this.thumbsWidth=this.$refs.thumbs.clientWidth,this.leftMoveInit=this.getOffset(this.leftIconDom).left+5,this.rightMoveInit=this.getOffset(this.rightIconDom).left+5,this.minWidthPercentage=(20/this.thumbsWidth*100).toFixed(4),this.initMedaData(),this.transformBlob(),document.addEventListener("mouseup",(function(e){t.handleMoveStatus=!1})),document.addEventListener("mousemove",(function(e){if(t.handleMoveStatus){if("left"===t.handleMoveDirection){var n=e.clientX-t.leftMoveInit;t.leftMovePercentage=n>0?(n/(t.thumbsWidth-20)*100).toFixed(4):0,t.leftMovePercentage>100-t.rightMovePercentage-t.minWidthPercentage&&(t.leftMovePercentage=100-t.rightMovePercentage-t.minWidthPercentage),t.videoEdit.start=(t.videoEdit.duration*t.leftMovePercentage/100).toFixed(4)}if("right"===t.handleMoveDirection){var r=t.rightMoveInit-e.clientX;t.rightMovePercentage=r>0?(r/(t.thumbsWidth-20)*100).toFixed(4):0,t.rightMovePercentage>100-t.leftMovePercentage-t.minWidthPercentage&&(t.rightMovePercentage=100-t.leftMovePercentage-t.minWidthPercentage),t.videoEdit.end=(t.videoEdit.duration*(1-t.rightMovePercentage/100)).toFixed(4)}t.handleClick(e,t.handleMoveDirection)}}))},toInt:function(t){return parseInt(t)||0},togglePlayStatus:function(){this.videoEdit.play?this.toggleVideoPause():this.toggleVideoPlay()},toggleVideoPlay:function(){var t=this;this.videoEdit.end-this.currentTime<.01&&(this.videoDom.currentTime=this.videoEdit.start),setTimeout((function(){t.videoDom.play(),t.videoEdit.play=!0}),50)},toggleVideoPause:function(){this.videoDom.pause(),this.videoEdit.play=!1},playEnd:function(){this.videoDom.currentTime=this.videoEdit.start,this.videoDom.pause(),this.videoEdit.play=!1},transformBlob:function(){var t=this;fetch(this.url).then((function(t){return t.blob()})).then((function(e){t.objectURL=URL.createObjectURL(e)}))},initMedaData:function(){var t=this;this.videoDom.addEventListener("loadedmetadata",(function(){t.videoEdit.duration=t.videoDom.duration,t.videoEdit.end=t.videoEdit.duration}));var e=this;this.videoDom.addEventListener("canplay",(function(){e.videoRatio=this.videoHeight/this.videoWidth,e.isPortraitVideo=e.videoRatio>1.5,e.videoUnitWidth=e.isPortraitVideo?28:88,e.thumbCount=Math.ceil(e.thumbsWidth/e.videoUnitWidth),e.videoUnit=e.videoEdit.duration/e.thumbCount;var t=Math.round((e.thumbCount*e.videoUnitWidth-e.thumbsWidth)/2);e.$nextTick((function(){e.$refs["thumbs-inner"].style.marginLeft="".concat(-t,"px")}))})),this.videoDom.addEventListener("timeupdate",(function(){t.videoEdit.currentPosition=t.videoDom.currentTime/t.videoEdit.duration*100,t.currentTime=t.videoDom.currentTime,t.videoEdit.end-t.currentTime<.01&&t.videoEdit.play&&t.playEnd()}))},handleMoveDown:function(t,e){this.handleMoveStatus=!0,this.handleMoveDirection=e,this.toggleVideoPause(),this.handleClick(t,e)},handleClick:function(t,e){this.videoEdit.currentPosition="left"===e?this.leftMovePercentage:"right"===e?100-this.rightMovePercentage:(t.clientX-this.leftMoveInit)/this.thumbsWidth*100,this.currentTime=(this.videoEdit.currentPosition*this.videoEdit.duration/100).toFixed(4),this.videoDom.currentTime=this.currentTime,"left"!==t.target.dataset.direction||this.handleMoveStatus||(this.leftMovePercentage=this.videoEdit.currentPosition,this.videoEdit.start=this.currentTime),"right"!==t.target.dataset.direction||this.handleMoveStatus||(this.rightMovePercentage=100-this.videoEdit.currentPosition,this.videoEdit.end=this.currentTime),this.videoEdit.currentPosition=this.videoEdit.currentPosition>100?100:this.videoEdit.currentPosition,this.videoEdit.currentPosition=this.videoEdit.currentPosition<0?0:this.videoEdit.currentPosition},getOffset:function(t,e){return e||(e={},e.left=0,e.top=0),t===document.body||null===t?e:(e.top+=t.offsetTop,e.left+=t.offsetLeft,this.getOffset(t.offsetParent,e))},timeTranslate:function(t){var e=Math.floor(t/60);return e<10&&(e="0"+e),e+":"+(t%60/100).toFixed(2).slice(-2)}}}),c=a;n("881d");function u(t,e,n,r,i,o,a,c){var u,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),o&&(s._scopeId="data-v-"+o),a?(u=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__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(a)},s._ssrRegister=u):i&&(u=c?function(){i.call(this,this.$root.$options.shadowRoot)}:i),u)if(s.functional){s._injectStyles=u;var f=s.render;s.render=function(t,e){return u.call(e),f(t,e)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,u):[u]}return{exports:t,options:s}}var s=u(c,i,o,!1,null,"07a83bdb",null),f=s.exports,l={install:function(t,e){t.component(f.name,f)}};"undefined"!==typeof window&&window.Vue&&window.Vue.use(l);var d=l;e["default"]=d},fb6a:function(t,e,n){"use strict";var r=n("23e7"),i=n("861d"),o=n("e8b5"),a=n("23cb"),c=n("50c4"),u=n("fc6a"),s=n("8418"),f=n("b622"),l=n("1dde"),d=n("ae40"),h=l("slice"),p=d("slice",{ACCESSORS:!0,0:0,1:2}),v=f("species"),g=[].slice,m=Math.max;r({target:"Array",proto:!0,forced:!h||!p},{slice:function(t,e){var n,r,f,l=u(this),d=c(l.length),h=a(t,d),p=a(void 0===e?d:e,d);if(o(l)&&(n=l.constructor,"function"!=typeof n||n!==Array&&!o(n.prototype)?i(n)&&(n=n[v],null===n&&(n=void 0)):n=void 0,n===Array||void 0===n))return g.call(l,h,p);for(r=new(void 0===n?Array:n)(m(p-h,0)),f=0;h 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 126 | 127 | 182 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | 2 | import vueVideoClip from './vueVideoClip.vue' 3 | 4 | const VideoClip = { 5 | install (Vue, options) { 6 | Vue.component(vueVideoClip.name, vueVideoClip) 7 | } 8 | } 9 | 10 | // if Vue is the window object, auto install it 11 | if (typeof window !== 'undefined' && window.Vue) { 12 | window.Vue.use(VideoClip) 13 | } 14 | 15 | export default VideoClip 16 | -------------------------------------------------------------------------------- /src/components/vueVideoClip.vue: -------------------------------------------------------------------------------- 1 | 136 | 492 | 715 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import videoClip from './components/index' 4 | 5 | Vue.config.productionTip = false 6 | Vue.use(videoClip) 7 | 8 | new Vue({ 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /src/static/fonts/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/static/fonts/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 |
    21 |
  • Unicode
    • 22 |
  • Font class
    • 23 |
  • Symbol
    • 24 |
25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    全屏
    36 |
    &#xe660;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    播放
    42 |
    &#xe63a;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    暂停
    48 |
    &#xe60a;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    声音
    54 |
    &#xe617;
    55 |
    • 56 | 57 |
  • 58 | 59 |
    声音关闭
    60 |
    &#xe8b8;
    61 |
    • 62 | 63 |
64 |
65 |

Unicode 引用

66 |
67 | 68 |

Unicode 是字体在网页端最原始的应用方式，特点是：

69 |
    70 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 71 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 72 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 73 |
74 |
75 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

76 |
77 |

Unicode 使用步骤如下：

78 |

第一步：拷贝项目下面生成的 @font-face

79 | 
@font-face {
 81 |   font-family: 'iconfont';
 82 |   src: url('iconfont.eot');
 83 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
 84 |       url('iconfont.woff2') format('woff2'),
 85 |       url('iconfont.woff') format('woff'),
 86 |       url('iconfont.ttf') format('truetype'),
 87 |       url('iconfont.svg#iconfont') format('svg');
 88 | }
 89 |
90 |

第二步：定义使用 iconfont 的样式

91 | 
.iconfont {
 93 |   font-family: "iconfont" !important;
 94 |   font-size: 16px;
 95 |   font-style: normal;
 96 |   -webkit-font-smoothing: antialiased;
 97 |   -moz-osx-font-smoothing: grayscale;
 98 | }
 99 |
100 |

第三步：挑选相应图标并获取字体编码，应用于页面

101 | 
102 | <span class="iconfont">&#x33;</span>
104 |
105 |
106 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

107 |
108 |
109 |
110 |
111 |
    112 | 113 |
  • 114 | 115 |
    116 | 全屏 117 |
    118 |
    .icon-quanping 119 |
    120 |
    • 121 | 122 |
  • 123 | 124 |
    125 | 播放 126 |
    127 |
    .icon-bofang 128 |
    129 |
    • 130 | 131 |
  • 132 | 133 |
    134 | 暂停 135 |
    136 |
    .icon-zanting 137 |
    138 |
    • 139 | 140 |
  • 141 | 142 |
    143 | 声音 144 |
    145 |
    .icon-shengyin 146 |
    147 |
    • 148 | 149 |
  • 150 | 151 |
    152 | 声音关闭 153 |
    154 |
    .icon-shengyinguanbi 155 |
    156 |
    • 157 | 158 |
159 |
160 |

font-class 引用

161 |
162 | 163 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

164 |

与 Unicode 使用方式相比，具有如下特点：

165 |
    166 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 167 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 168 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 169 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 170 |
171 |

使用步骤如下：

172 |

第一步：引入项目下面生成的 fontclass 代码：

173 | 
<link rel="stylesheet" href="./iconfont.css">
174 |
175 |

第二步：挑选相应图标并获取类名，应用于页面：

176 | 
<span class="iconfont icon-xxx"></span>
177 |
178 |
179 |

" 180 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

181 |
182 |
183 |
184 |
185 |
    186 | 187 |
  • 188 | 191 |
    全屏
    192 |
    #icon-quanping
    193 |
    • 194 | 195 |
  • 196 | 199 |
    播放
    200 |
    #icon-bofang
    201 |
    • 202 | 203 |
  • 204 | 207 |
    暂停
    208 |
    #icon-zanting
    209 |
    • 210 | 211 |
  • 212 | 215 |
    声音
    216 |
    #icon-shengyin
    217 |
    • 218 | 219 |
  • 220 | 223 |
    声音关闭
    224 |
    #icon-shengyinguanbi
    225 |
    • 226 | 227 |
228 |
229 |

Symbol 引用

230 |
231 | 232 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 233 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

234 |
    235 |
  • 支持多色图标了，不再受单色限制。
    • 236 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 237 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 238 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 239 |
240 |

使用步骤如下：

241 |

第一步：引入项目下面生成的 symbol 代码：

242 | 
<script src="./iconfont.js"></script>
243 |
244 |

第二步：加入通用 CSS 代码（引入一次就行）：

245 | 
<style>
246 | .icon {
247 |   width: 1em;
248 |   height: 1em;
249 |   vertical-align: -0.15em;
250 |   fill: currentColor;
251 |   overflow: hidden;
252 | }
253 | </style>
254 |
255 |

第三步：挑选相应图标并获取类名，应用于页面：

256 | 
<svg class="icon" aria-hidden="true">
257 |   <use xlink:href="#icon-xxx"></use>
258 | </svg>
259 |
260 |
261 |
262 | 263 |
264 |
265 | 284 | 285 | 286 | -------------------------------------------------------------------------------- /src/static/fonts/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1571664681339'); /* IE9 */ 3 | src: url('iconfont.eot?t=1571664681339#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAVEAAsAAAAAClwAAAT2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqHRIZEATYCJAMYCw4ABCAFhG0HYRsDCVGUTk6a7KcmTza0+tw5G4aBgQNwxKMAeAAgARMoAEA8PO3369yZeQ+VBkk0SVdPhEgySYROSGKlUzKhyO7mzf9q2vZbl4+88emS2lW1qXuX+7QyE0U3EqGxMQK6BuEYfj6vfH/G4WB3M1MJt4WS1Lit+NM6aR2W4KDUjWzYX3N0R4eqmbYtOM9iIYnhf+acFsBQ0gFSoDG2LSpYuRUrVkz7AM9wYQLvJ9BqmKCxun96AX2FoA1sOuHMhL7LpsSwQ7OxDjm3ZDQWcGpOs9ML8KD/fPyD2eiDpMogPOjweM+Bze/hdb5pYBiSMVyeB7eLyJgBCnEf6rvTMnMzWlo/v6FtG2jXLCnfw+YtZ1w3/uNSCaHQLv7LIyuSUBE1oK6dqbv5iu+hbJE/+jlaFNQvo0VCvYEigt96RAXqEvcZADEH4oVAm6Er4x9pknswvfQOiqJp+ROSCMShRJTEVCklDUNaQhDyJgC8XjG4UkLXpaUkqWwGwOtkHRWRmobN2BO2ICRtVLTEYkJVsQWarZ7tN8gqlMZiQkzOjkQkDuajUY4ixuMWaUwYNrDvWZHIIEFXwYY1TjSkyfK6BJu2XtmI7NIG0oEZY4az6xsG5ccP/JCMxYpOK5UTsrPlYyHAx+uTvFbti4ZLW4YIOkGI5EZOHDJYX2daiYejONJINRMje7ijcSTFuohhxOuE5Ohmhbt7e2nmZHHj/rAGDnNTPTlJIDacqIKWnmzIqwShJoDWq45E3jmW1/CmmL8jW5W3SJwo6CsPJvKisX95gnuq5/Cp/+EPdJwCKk6z4f+U8uzwEe9maeVFdortodOLdrVSCgpSaqXV3iUhDVnpWim103bRzJC2nQ/W2h88sK8VLQ8eKCp7uzpT9leOPu9BnvOjjbtk0bC9CVOTrEHWrNaSqkG1NBhNV83bNjxw3PH7t+OYiFTNcVba7eTdjmvssbhjNSNGpmk1f01olfOePhQ5qEIYPH9CgM3b6w7RvjEBWOgfU3fB3rm/E0z4raX/3bcUem17tn70uQ56g/r90+r2+6Z3mDiH9ebvaDWkQ8e2w56WTDBGfHTNSu1UobQrrlHkQtyMTd3nZWT1WRwH6B6f1mXWmTK2mfPxCPbi9TVGfrCYd4z1oXQ5zzt5geedl5jszbtR6eI9vDAr7A/PEnjBYoYMDX/NHMOeqzyefDSEj0EZAID/J/Npe78L71EWhryKXA8xbwDKY/oH5I/0fu7uZ3P/9FqfdfvvIY/npa/vSGOONmw/lSM7AfVSy89Ue/WmNNVXKdjr8lbJ0lSGkq9G7UAPMwmtYogGhXr9lmUYSN1IaDZgQ9JkCLJmI8RCnYFKm3lNzdQFaDXt4OI2fVItUbzAlEeE0O0Zkk6fkHV7JRbqD1QG/alrpEcLWh1F8JptxoIP+6Zo5ugQqyLcjkIqOfOh0XyGrPDN1KnUuVeYZjxJVEnxFg8wxLSME7KSaXlOCU2jgOzDw9D3IxKn0QLtXHLzPF6WZRr2QZIdBTC0IoVMOeQgLBWCs0VCVF2cG/q+/wxiCj5TGjP1I34FpTJ864RKoqQgHujCVFPb0pkpMZqcMhRBb42RALFPHuSLuQgRh++1gGw5iZsjE1sm0zyaVifVbwiW8gZoJTyrDhuyIwdyIhdyQ/NlYYYxD1l3VERNzdMrMaeoLGT9XBfVZMXDqaFhiaIWBwAAAA==') format('woff2'), 5 | url('iconfont.woff?t=1571664681339') format('woff'), 6 | url('iconfont.ttf?t=1571664681339') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1571664681339#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-quanping:before { 19 | content: "\e660"; 20 | } 21 | 22 | .icon-bofang:before { 23 | content: "\e63a"; 24 | } 25 | 26 | .icon-zanting:before { 27 | content: "\e60a"; 28 | } 29 | 30 | .icon-shengyin:before { 31 | content: "\e617"; 32 | } 33 | 34 | .icon-shengyinguanbi:before { 35 | content: "\e8b8"; 36 | } 37 | 38 | -------------------------------------------------------------------------------- /src/static/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/static/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/static/fonts/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(a){var t,c='',e=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(e&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}!function(t){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(t,0);else{var e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()};document.addEventListener("DOMContentLoaded",e,!1)}else document.attachEvent&&(n=t,o=a.document,i=!1,(l=function(){try{o.documentElement.doScroll("left")}catch(t){return void setTimeout(l,50)}c()})(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,c())});function c(){i||(i=!0,n())}var n,o,i,l}(function(){var t,e;(t=document.createElement("div")).innerHTML=c,c=null,(e=t.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",function(t,e){e.firstChild?function(t,e){e.parentNode.insertBefore(t,e)}(t,e.firstChild):e.appendChild(t)}(e,document.body))})}(window); -------------------------------------------------------------------------------- /src/static/fonts/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "1468000", 3 | "name": "video", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "807275", 10 | "name": "全屏", 11 | "font_class": "quanping", 12 | "unicode": "e660", 13 | "unicode_decimal": 58976 14 | }, 15 | { 16 | "icon_id": "1111441", 17 | "name": "播放", 18 | "font_class": "bofang", 19 | "unicode": "e63a", 20 | "unicode_decimal": 58938 21 | }, 22 | { 23 | "icon_id": "1458367", 24 | "name": "暂停", 25 | "font_class": "zanting", 26 | "unicode": "e60a", 27 | "unicode_decimal": 58890 28 | }, 29 | { 30 | "icon_id": "9459583", 31 | "name": "声音", 32 | "font_class": "shengyin", 33 | "unicode": "e617", 34 | "unicode_decimal": 58903 35 | }, 36 | { 37 | "icon_id": "11372697", 38 | "name": "声音关闭", 39 | "font_class": "shengyinguanbi", 40 | "unicode": "e8b8", 41 | "unicode_decimal": 59576 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /src/static/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/static/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/static/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/static/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/static/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/static/fonts/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/static/fonts/iconfont.woff2 -------------------------------------------------------------------------------- /src/static/media/mov_bbb.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/static/media/mov_bbb.mp4 -------------------------------------------------------------------------------- /src/static/media/videoPortrait.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RoiSoleil520/vueVideoClip/9df3e661419e243bac76b6c79eea9ec1c90abb6c/src/static/media/videoPortrait.mp4 -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: './' 3 | } 4 | --------------------------------------------------------------------------------