{"remainingRequest":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\babel-loader\\lib\\index.js!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js??ref--0-0!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js??ref--0-2!C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\views\\videoSurveillance\\myVideoPlayer.vue?vue&type=script&lang=js&","dependencies":[{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\src\\views\\videoSurveillance\\myVideoPlayer.vue","mtime":1664262678633},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\babel.config.js","mtime":1663828782900},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\style-vw-loader\\index.js","mtime":1540864632000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\nimport { videoPlayer } from 'vue-video-player';\nimport 'video.js/dist/video-js.css';\nimport 'vue-video-player/src/custom-theme.css';\nimport 'videojs-contrib-hls';\nexport default {\n  components: {\n    videoPlayer: videoPlayer\n  },\n  props: {\n    videoData: Array\n  },\n  data: function data() {\n    return {\n      uid: \"videoPlayer_\".concat(this._uid)\n    };\n  },\n  computed: {\n    playerOption: function playerOption() {\n      return {\n        playbackRates: [0.5, 1.0, 1.5, 2.0],\n        // 可选的播放速度\n        autoplay: false,\n        // 如果为true,浏览器准备好时开始回放。\n        muted: false,\n        // 默认情况下将会消除任何音频。\n        loop: false,\n        // 是否视频一结束就重新开始。\n        preload: 'auto',\n        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）\n        language: 'zh-CN',\n        aspectRatio: '16:9',\n        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如\"16:9\"或\"4:3\"）\n        fluid: true,\n        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。\n        sources: this.videoData,\n        hls: true,\n        poster: '',\n        // 封面地址\n        notSupportedMessage: '此视频暂无法播放，请稍后再试',\n        // 允许覆盖Video.js无法播放媒体源时显示的默认信息。\n        controlBar: {\n          timeDivider: true,\n          // 当前时间和持续时间的分隔符\n          durationDisplay: true,\n          // 显示持续时间\n          remainingTimeDisplay: false,\n          // 是否显示剩余时间功能\n          fullscreenToggle: true // 是否显示全屏按钮\n\n        }\n      };\n    }\n  },\n  methods: {\n    // 播放回调\n    onPlayerPlay: function onPlayerPlay(player) {\n      this.$refs[this.uid].player.play();\n    },\n    // 暂停回调\n    onPlayerPause: function onPlayerPause(player) {},\n    // 视频播完回调\n    onPlayerEnded: function onPlayerEnded($event) {},\n    // DOM元素上的readyState更改导致播放停止\n    onPlayerWaiting: function onPlayerWaiting($event) {},\n    // 已开始播放回调\n    onPlayerPlaying: function onPlayerPlaying($event) {},\n    // 当播放器在当前播放位置下载数据时触发\n    onPlayerLoadeddata: function onPlayerLoadeddata($event) {},\n    // 当前播放位置发生变化时触发。\n    onPlayerTimeupdate: function onPlayerTimeupdate($event) {},\n    //媒体的readyState为HAVE_FUTURE_DATA或更高\n    onPlayerCanplay: function onPlayerCanplay(player) {},\n    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。\n    onPlayerCanplaythrough: function onPlayerCanplaythrough(player) {},\n    //播放状态改变回调\n    playerStateChanged: function playerStateChanged(playerCurrentState) {},\n    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。\n    playerReadied: function playerReadied(player) {}\n  }\n};",{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA;AACA;AACA;AACA;AAEA;AACAA;AACAC;AADA,GADA;AAIAC;AACAC;AADA,GAJA;AAOAC,MAPA,kBAOA;AACA;AACAC;AADA;AAGA,GAXA;AAYAC;AACAC,gBADA,0BACA;AACA;AACAC,2CADA;AACA;AACAC,uBAFA;AAEA;AACAC,oBAHA;AAGA;AACAC,mBAJA;AAIA;AACAC,uBALA;AAKA;AACAC,yBANA;AAOAC,2BAPA;AAOA;AACAC,mBARA;AAQA;AACAC,+BATA;AAUAC,iBAVA;AAWAC,kBAXA;AAWA;AACAC,6CAZA;AAYA;AACAC;AACAC,2BADA;AACA;AACAC,+BAFA;AAEA;AACAC,qCAHA;AAGA;AACAC,gCAJA,CAIA;;AAJA;AAbA;AAoBA;AAtBA,GAZA;AAoCAC;AACA;AACAC,gBAFA,wBAEAC,MAFA,EAEA;AACA;AACA,KAJA;AAMA;AACAC,iBAPA,yBAOAD,MAPA,EAOA,EAPA;AASA;AACAE,iBAVA,yBAUAC,MAVA,EAUA,EAVA;AAYA;AACAC,mBAbA,2BAaAD,MAbA,EAaA,EAbA;AAeA;AACAE,mBAhBA,2BAgBAF,MAhBA,EAgBA,EAhBA;AAkBA;AACAG,sBAnBA,8BAmBAH,MAnBA,EAmBA,EAnBA;AAqBA;AACAI,sBAtBA,8BAsBAJ,MAtBA,EAsBA,EAtBA;AAwBA;AACAK,mBAzBA,2BAyBAR,MAzBA,EAyBA,EAzBA;AA2BA;AACAS,0BA5BA,kCA4BAT,MA5BA,EA4BA,EA5BA;AA8BA;AACAU,sBA/BA,8BA+BAC,kBA/BA,EA+BA,EA/BA;AAiCA;AACAC,iBAlCA,yBAkCAZ,MAlCA,EAkCA;AAlCA;AApCA","names":["components","videoPlayer","props","videoData","data","uid","computed","playerOption","playbackRates","autoplay","muted","loop","preload","language","aspectRatio","fluid","sources","hls","poster","notSupportedMessage","controlBar","timeDivider","durationDisplay","remainingTimeDisplay","fullscreenToggle","methods","onPlayerPlay","player","onPlayerPause","onPlayerEnded","$event","onPlayerWaiting","onPlayerPlaying","onPlayerLoadeddata","onPlayerTimeupdate","onPlayerCanplay","onPlayerCanplaythrough","playerStateChanged","playerCurrentState","playerReadied"],"sourceRoot":"src/views/videoSurveillance","sources":["myVideoPlayer.vue"],"sourcesContent":["<template>\r\n    <video-player\r\n        class=\"video-player vjs-custom-skin\"\r\n        :ref=\"uid\"\r\n        :playsinline=\"true\"\r\n        :options=\"playerOption\"\r\n        @play=\"onPlayerPlay($event)\"\r\n        @pause=\"onPlayerPause($event)\"\r\n        @ended=\"onPlayerEnded($event)\"\r\n        @waiting=\"onPlayerWaiting($event)\"\r\n        @playing=\"onPlayerPlaying($event)\"\r\n        @loadeddata=\"onPlayerLoadeddata($event)\"\r\n        @timeupdate=\"onPlayerTimeupdate($event)\"\r\n        @canplay=\"onPlayerCanplay($event)\"\r\n        @canplaythrough=\"onPlayerCanplaythrough($event)\"\r\n        @statechanged=\"playerStateChanged($event)\"\r\n        @ready=\"playerReadied\"\r\n    >\r\n    </video-player>\r\n</template>\r\n<script >\r\nimport { videoPlayer } from 'vue-video-player';\r\nimport 'video.js/dist/video-js.css';\r\nimport 'vue-video-player/src/custom-theme.css';\r\nimport 'videojs-contrib-hls';\r\n\r\nexport default {\r\n    components: {\r\n        videoPlayer\r\n    },\r\n    props: {\r\n        videoData: Array\r\n    },\r\n    data() {\r\n        return {\r\n            uid: `videoPlayer_${this._uid}`\r\n        };\r\n    },\r\n    computed: {\r\n        playerOption() {\r\n            return {\r\n                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度\r\n                autoplay: false, // 如果为true,浏览器准备好时开始回放。\r\n                muted: false, // 默认情况下将会消除任何音频。\r\n                loop: false, // 是否视频一结束就重新开始。\r\n                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）\r\n                language: 'zh-CN',\r\n                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如\"16:9\"或\"4:3\"）\r\n                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。\r\n                sources: this.videoData,\r\n                hls: true,\r\n                poster: '', // 封面地址\r\n                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。\r\n                controlBar: {\r\n                    timeDivider: true, // 当前时间和持续时间的分隔符\r\n                    durationDisplay: true, // 显示持续时间\r\n                    remainingTimeDisplay: false, // 是否显示剩余时间功能\r\n                    fullscreenToggle: true // 是否显示全屏按钮\r\n                }\r\n            };\r\n        }\r\n    },\r\n    methods: {\r\n        // 播放回调\r\n        onPlayerPlay(player) {\r\n            this.$refs[this.uid].player.play();\r\n        },\r\n\r\n        // 暂停回调\r\n        onPlayerPause(player) {},\r\n\r\n        // 视频播完回调\r\n        onPlayerEnded($event) {},\r\n\r\n        // DOM元素上的readyState更改导致播放停止\r\n        onPlayerWaiting($event) {},\r\n\r\n        // 已开始播放回调\r\n        onPlayerPlaying($event) {},\r\n\r\n        // 当播放器在当前播放位置下载数据时触发\r\n        onPlayerLoadeddata($event) {},\r\n\r\n        // 当前播放位置发生变化时触发。\r\n        onPlayerTimeupdate($event) {},\r\n\r\n        //媒体的readyState为HAVE_FUTURE_DATA或更高\r\n        onPlayerCanplay(player) {},\r\n\r\n        //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。\r\n        onPlayerCanplaythrough(player) {},\r\n\r\n        //播放状态改变回调\r\n        playerStateChanged(playerCurrentState) {},\r\n\r\n        //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。\r\n        playerReadied(player) {}\r\n    }\r\n};\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.video-player{\r\n    height: 100% !important;\r\n}\r\n/deep/ .vjs_video_3-dimensions.vjs-fluid{\r\n    padding-top: 0 !important;\r\n    height: 100%;\r\n}\r\n\r\n</style>"]}]}