{"version":3,"sources":["webpack:///./src/views/videoPlay/test.vue","webpack:///src/views/videoPlay/test.vue","webpack:///./src/views/videoPlay/test.vue?f93d","webpack:///./src/views/videoPlay/test.vue?ef4a","webpack:///./src/views/videoPlay/test.vue?adea"],"names":["render","_vm","this","_c","_self","staticClass","initVideo","play","_e","on","playVideo","attrs","videoLength","changeVideoTime","model","value","currentTime","callback","$$v","$set","expression","_v","_s","_f","staticRenderFns","name","props","data","url","lastTime","initAudio","audioLength","urlcurrentTime","videoTime","methods","Math","videoTimeUpdate","console","getAudioLength","handPlay","status","component"],"mappings":"kJAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,aAAa,CAAGJ,EAAIK,UAAUC,KAA0EN,EAAIO,KAAxEL,EAAG,MAAM,CAACE,YAAY,iBAAiBI,GAAG,CAAC,MAAQR,EAAIS,aAAsBP,EAAG,MAAM,CAACE,YAAY,iBAAiB,CAACF,EAAG,MAAM,CAACE,YAAY,YAAY,CAACF,EAAG,YAAY,CAACE,YAAY,eAAeM,MAAM,CAAC,gBAAe,EAAM,IAAMV,EAAIK,UAAUM,aAAaH,GAAG,CAAC,OAASR,EAAIY,iBAAiBC,MAAM,CAACC,MAAOd,EAAIK,UAAUU,YAAaC,SAAS,SAAUC,GAAMjB,EAAIkB,KAAKlB,EAAIK,UAAW,cAAeY,IAAME,WAAW,2BAA2BjB,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,OAAO,CAACF,EAAIoB,GAAGpB,EAAIqB,GAAGrB,EAAIsB,GAAG,YAAPtB,CAAoBA,EAAIK,UAAUU,iBAAiBb,EAAG,OAAO,CAACF,EAAIoB,GAAGpB,EAAIqB,GAAGrB,EAAIsB,GAAG,YAAPtB,CAAoBA,EAAIK,UAAUM,oBAAoB,QAE1uBY,EAAkB,GCkBP,GACfC,oBACAC,SAMAC,OACA,OAEArB,WACAC,QACAK,cACAgB,OACAZ,cACAa,cACAJ,SAGAK,WACAvB,QACAwB,cACAH,OACAI,iBACAH,cACAJ,SAEAQ,cAGAC,SACAxB,YAEA,oBACA,0BAEAyB,+HACA,wBACA,4BAGAC,kBAEA,iBACA,MACA,0DACA,qBACA,mCACA,6BAEA,4BAGAvB,mBAEAwB,uBACA,mBACA,iCAGAC,kBAEA,OACA,qGAEA,OACA,sGAGAC,cAEA,KACAC,yBAEAA,4BC/F6V,I,wBCQzVC,EAAY,eACd,EACAzC,EACAwB,GACA,EACA,KACA,KACA,MAIa,aAAAiB,E,2CCnBf","file":"js/chunk-6ba2ff3f.50a6f122.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"video-box\"},[(!_vm.initVideo.play)?_c('div',{staticClass:\"video_playIcon\",on:{\"click\":_vm.playVideo}}):_vm._e(),_c('div',{staticClass:\"video_control\"},[_c('div',{staticClass:\"progress\"},[_c('el-slider',{staticClass:\"commonSlider\",attrs:{\"show-tooltip\":false,\"max\":_vm.initVideo.videoLength},on:{\"change\":_vm.changeVideoTime},model:{value:(_vm.initVideo.currentTime),callback:function ($$v) {_vm.$set(_vm.initVideo, \"currentTime\", $$v)},expression:\"initVideo.currentTime\"}}),_c('div',{staticClass:\"time\"},[_c('span',[_vm._v(_vm._s(_vm._f(\"videoTime\")(_vm.initVideo.currentTime)))]),_c('span',[_vm._v(_vm._s(_vm._f(\"videoTime\")(_vm.initVideo.videoLength)))])])],1)])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"video-box\">\n    <div class=\"video_playIcon\" v-if=\"!initVideo.play\" @click=\"playVideo\">\n    </div>\n\n    </video>\n    <div class=\"video_control\">\n        <div class=\"progress\">\n            <el-slider class=\"commonSlider\" :show-tooltip=\"false\" v-model=\"initVideo.currentTime\":max=\"initVideo.videoLength\" @change=\"changeVideoTime\">\n            </el-slider>\n            <div class=\"time\">\n                <span>{{initVideo.currentTime | videoTime}}</span>\n                <span>{{initVideo.videoLength | videoTime}}</span>\n            </div>\n        </div>\n    </div>\n  </div>\n</template>\n<script>\n// import Watcher from \"../../../webSocket/watcher\";\nexport default {\n  name: \"trailerModal\",\n  props: {\n    // videoUrl: {\n    //   type: String,\n    //   default: \"\",\n    // },\n  },\n  data() {\n    return {\n            //视频\n            initVideo: {\n                play: false,//播放还是暂停 true播放中\n                videoLength: 0,//时长\n                url: \"\",//视频课件Url\n                currentTime: 0,//当前播放时间\n                lastTime: null,//标记时间戳\n                name: \"\",\n            },\n            //音频\n            initAudio: {\n                play: false,//播放还是暂停 true播放中\n                audioLength: 0,//audio时长\n                url: \"\",//音频课件\n                urlcurrentTime: 0,//当前播放时间\n                lastTime: null,//标记时间戳\n                name: \"\",\n            },\n            videoTime:0,\n        }\n    },\n    methods: {\n        playVideo() {\n            //播放视频\n            if (this.initVideo.play) {\n                this.$refs.video.pause();\n            } else {\n                Math.abs(this.initVideo.currentTime - this.$refs.video.currentTime) > 2 ? this.$refs.video.currentTime = this.initVideo.currentTime : '';\n                this.$refs.video.play();\n                this.$refs.video.muted = false\n            }\n        },\n        videoTimeUpdate() {\n            //更新视频时间。节流，每秒触发一次\n            let nowTime = Date.now()\n            let gapTime = 1000;\n            if (!this.initVideo.lastTime || nowTime - this.initVideo.lastTime > gapTime) {\n                if (this.$refs.video) {\n                    let time = this.$refs.video.currentTime;\n                    this.initVideo.currentTime = time;\n                }\n                this.initVideo.lastTime = nowTime\n            }\n        },\n        changeVideoTime(val) {\n            //改变视频时间\n            console.log(val, 'video')\n            if (this.$refs.video) {\n                this.$refs.video.currentTime = val;\n            }\n        },\n        getAudioLength(type) {\n            //获取音视频时长 1音频 2视频\n            if (type == 1) {\n                this.initAudio.audioLength = this.$refs.audio.durationconsole.log('获取音频时长', this.$refs.audio.duration)\n            }\n            if (type == 2) {\n                this.initVideo.videoLength = this.$refs.video.durationconsole.log('获取视频时长', this.$refs.video.duration)\n            }\n        },\n        handPlay(type, status) {\n            //音视频播放暂停 type:1 音频 2视频 status 1播放 2暂停\n            if (type == 1) {\n                status == 1 ? this.initAudio.play = true : this.initAudio.play = false;\n            } else {\n                status == 1 ? this.initVideo.play = true : this.initVideo.play = false;\n            }\n        },\n  }\n  \n  \n \n};\n</script>\n\n<style lang=\"scss\">\n.trailer_video_box {\n   width:100%;\n   height: 100%;\n  height: calc(100% - 100px);\n  position: absolute;\n  top: 8px;\n  left: 0;\n  z-index: 1000;\n  background: #292c32;\n  border-radius: 12px;\n  .trailer_box {\n    width:100%;\n   height: 100%;\n    height: calc(100% - 143px);\n    padding: 0;\n    object-fit: initial;\n    border-radius: 12px 12px 0 0;\n  }\n  .trailer_progress_bar {\n    width:100%;\n   height: 100%;\n    overflow: hidden;\n    position: relative;\n    .proress_title {\n      width:100%;\n  \n      height: 100px;\n      overflow: hidden;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      img {\n         width:32px;\n        height: 32px;\n        margin-right: 8px;\n      }\n      p {\n        color: #fff;\n        font-size: 12px;\n        font-weight: 600;\n      }\n    }\n    .proress_content_box {\n      width: 100%;\n      overflow: hidden;\n      display: flex;\n      padding: 0 24px;\n      justify-content: center;\n      p {\n        color: #fff;\n        font-weight: 400;\n        font-size: 12px;\n      }\n      .pro_pone {\n      }\n      .progress_bar_box {\n        flex: 1;\n        margin: 6px 16px 0 16px;\n        height: 8px;\n        background: rgba(205, 206, 209, 0.2);\n        border-radius: 5px;\n        box-sizing: border-box;\n        position: relative;\n        .on_progress_bar_child {\n          width: 0;\n          height: 100%;\n          background: #cdced1;\n          border-radius: 4px 0px 0px 4px;\n          // overflow: hidden;\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 1001;\n          .mouse_down {\n            position: absolute;\n            width: 5px;\n            height: 16px;\n            top: 50%;\n            margin-top: -8px;\n            left: 100%;\n            background: #ff5001;\n            border-radius: 3px;\n            z-index: 1002;\n            cursor: pointer;\n          }\n        }\n        .on_progress_bar_child.border_Radius {\n          border-radius: 4px;\n        }\n      }\n    }\n  }\n}\n</style>","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./test.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./test.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./test.vue?vue&type=template&id=74fb6640&\"\nimport script from \"./test.vue?vue&type=script&lang=js&\"\nexport * from \"./test.vue?vue&type=script&lang=js&\"\nimport style0 from \"./test.vue?vue&type=style&index=0&id=74fb6640&prod&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  null,\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./test.vue?vue&type=style&index=0&id=74fb6640&prod&lang=scss&\""],"sourceRoot":""}