{"version":3,"sources":["webpack:///./node_modules/wdn-pc/node_modules/@wd/cms-pc/plugin/block/components/VideoBannerCom.vue","webpack:///node_modules/wdn-pc/node_modules/@wd/cms-pc/plugin/block/components/VideoBannerCom.vue","webpack:///./node_modules/wdn-pc/node_modules/@wd/cms-pc/plugin/block/components/VideoBannerCom.vue?f56b","webpack:///./node_modules/wdn-pc/node_modules/@wd/cms-pc/plugin/block/components/VideoBannerCom.vue?3fbf","webpack:///./node_modules/wdn-pc/node_modules/@wd/cms-pc/plugin/block/components/VideoBannerCom.vue?7c10"],"names":["render","_vm","this","_c","_self","staticClass","ref","attrs","playerOptions","staticRenderFns","Vue","use","VideoPlayer","props","videoUrl","type","String","default","isAuto","Boolean","data","playbackRates","autoplay","muted","loop","preload","language","aspectRatio","fluid","sources","src","poster","notSupportedMessage","controlBar","timeDivider","durationDisplay","remainingTimeDisplay","fullscreenToggle","created","url","mounted","console","log","document","getElementsByClassName","innerHTML","require","component"],"mappings":"2KAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,YAAY,mBAAmB,CAACF,EAAG,eAAe,CAACG,IAAI,cAAcD,YAAY,+BAA+BE,MAAM,CAAC,aAAc,EAAK,QAAUN,EAAIO,kBAAkB,IAEnPC,EAAkB,G,qDCatBC,aAAAC,IAAAC,KACA,OACAC,MAAA,CACAC,SAAA,CACAC,KAAAC,OACAC,QAAA,IAEAC,OAAA,CACAH,KAAAI,QACAF,SAAA,IAGAG,OACA,OACAZ,cAAA,CAEAa,cAAA,aAEAC,WAAA,KAAAJ,OAEAK,QAAA,KAAAL,OAEAM,OAAA,KAAAN,OAEAO,QAAA,OACAC,SAAA,QAEAC,YAAA,OAEAC,OAAA,EACAC,QAAA,EAEAd,KAAA,YAEAe,IAAA,KAGAC,OAAA,GAEAC,oBAAA,iBACAC,WAAA,CACAC,aAAA,EACAC,iBAAA,EACAC,sBAAA,EAEAC,kBAAA,MAKAC,UACA,IAAAC,EAAA,KAAAzB,SACA,KAAAN,cAAAqB,QAAA,GAAAC,IAAAS,GAEAC,UACAC,QAAAC,IAAA,kBAAAxB,QACAyB,SAAAC,uBAAA,0BAAAC,UAAA,kDACAC,EAAA,qCCxEgY,I,wBCQ5XC,EAAY,eACd,EACA/C,EACAS,GACA,EACA,KACA,WACA,MAIa,aAAAsC,E,2CCnBf","file":"js/chunk-42932d0e.26047a9c.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{staticClass:\"video-component\"},[_c('video-player',{ref:\"videoPlayer\",staticClass:\"video-player vjs-custom-skin\",attrs:{\"playsinline\":true,\"options\":_vm.playerOptions}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n    <div class='video-component'>\r\n        <video-player\r\n          class=\"video-player vjs-custom-skin\"\r\n          ref=\"videoPlayer\"\r\n          :playsinline=\"true\"\r\n          :options=\"playerOptions\">\r\n        </video-player>\r\n    </div>\r\n</template>\r\n<script>\r\nimport Vue from 'vue';\r\nimport VideoPlayer from 'vue-video-player'\r\nimport 'vue-video-player/src/custom-theme.css'\r\nimport 'video.js/dist/video-js.css'\r\nVue.use(VideoPlayer)\r\n  export default {\r\n    props:{\r\n      videoUrl: { // PC预览模块传入组件--->videoBanner\r\n        type: String,\r\n        default: ''\r\n      },\r\n      isAuto:{\r\n          type: Boolean,\r\n          default: true\r\n      }\r\n    },\r\n    data() {\r\n      return {\r\n        playerOptions: {\r\n          //播放速度\r\n          playbackRates: [0.5, 1.0, 1.5, 2.0],\r\n          //如果true,浏览器准备好时开始回放。\r\n          autoplay: this.isAuto?true:false,\r\n          // 默认情况下将会消除任何音频。\r\n          muted: this.isAuto? true: false,\r\n          // 导致视频一结束就重新开始。\r\n          loop: this.isAuto?true: false,\r\n          // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）\r\n          preload: 'auto',\r\n          language: 'zh-CN',\r\n            // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如\"16:9\"或\"4:3\"）\r\n          aspectRatio: '16:9',\r\n            // 当true时，Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。\r\n          fluid: true,\r\n          sources: [{\r\n            //类型\r\n            type: \"video/mp4\",\r\n            //url地址\r\n            src: ''\r\n          }],\r\n          //你的封面地址\r\n          poster: '',\r\n            //允许覆盖Video.js无法播放媒体源时显示的默认信息。\r\n          notSupportedMessage: '此视频暂无法播放，请稍后再试',\r\n          controlBar: {\r\n            timeDivider: true,\r\n            durationDisplay: true,\r\n            remainingTimeDisplay: false,\r\n            //全屏按钮\r\n            fullscreenToggle: true\r\n          }\r\n        }\r\n      }\r\n    },\r\n    created() {\r\n      let url = this.videoUrl;\r\n      this.playerOptions.sources[0].src = url;\r\n    },\r\n    mounted(){\r\n        console.log('thisisauto', this.isAuto)\r\n         document.getElementsByClassName('vjs-big-play-button')[0].innerHTML = `<div class=\"video-btn\">\r\n            <img src=\"${require('../../asset/images/video-btn.png')}\" alt=\"\">\r\n        </div>`\r\n    }\r\n  }\r\n</script>\r\n<style lang=\"stylus\" scoped>\r\n  .video-component {\r\n    width: 1200px;\r\n    text-align: center;\r\n    line-height: 100px;\r\n    // border: 1px solid transparent;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    background: #fff;\r\n    position: relative;\r\n    // box-shadow: 0 1px 1px rgba(0, 0, 0, .2);\r\n    margin: 0px auto;\r\n    /deep/.video-btn{\r\n        width: 120px;\r\n        height: 120px;\r\n        display inline-block;\r\n        img{\r\n            width 100%;\r\n            height 100%\r\n        }\r\n\r\n    }\r\n    /deep/.video-player {\r\n      .vjs-big-play-button {\r\n        left: 50%;\r\n        top: 50%;\r\n        .vjs-icon-placeholder:before {\r\n            font-size: 30px;\r\n        }\r\n      }\r\n    }\r\n    /deep/ .vjs-control-bar{\r\n      display: none;\r\n    }\r\n    /deep/ .vjs-big-play-button{\r\n        // display flex;\r\n        // justify-content center;\r\n        // align-items center;\r\n        width 120px;\r\n        height 120px!important;\r\n        border none;\r\n        background none;\r\n        text-align center;\r\n        line-height 120px!important;\r\n        margin -60px 0 0 -60px!important;\r\n    }\r\n  }\r\n</style>\r\n","import mod from \"-!../../../../../../../cache-loader/dist/cjs.js??ref--13-0!../../../../../../../thread-loader/dist/cjs.js!../../../../../../../babel-loader/lib/index.js!../../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoBannerCom.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../../cache-loader/dist/cjs.js??ref--13-0!../../../../../../../thread-loader/dist/cjs.js!../../../../../../../babel-loader/lib/index.js!../../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoBannerCom.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./VideoBannerCom.vue?vue&type=template&id=4f2927c0&scoped=true&\"\nimport script from \"./VideoBannerCom.vue?vue&type=script&lang=js&\"\nexport * from \"./VideoBannerCom.vue?vue&type=script&lang=js&\"\nimport style0 from \"./VideoBannerCom.vue?vue&type=style&index=0&id=4f2927c0&prod&lang=stylus&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../../@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"4f2927c0\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../../../../mini-css-extract-plugin/dist/loader.js??ref--12-oneOf-1-0!../../../../../../../css-loader/dist/cjs.js??ref--12-oneOf-1-1!../../../../../../../@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../../postcss-loader/src/index.js??ref--12-oneOf-1-2!../../../../../../../stylus-loader/index.js??ref--12-oneOf-1-3!../../../../../../../cache-loader/dist/cjs.js??ref--1-0!../../../../../../../@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./VideoBannerCom.vue?vue&type=style&index=0&id=4f2927c0&prod&lang=stylus&scoped=true&\""],"sourceRoot":""}