| 1 |
- {"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>"]}]}
|
