{"remainingRequest":"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\\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//\n\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",{"version":3,"sources":["myVideoPlayer.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA","file":"myVideoPlayer.vue","sourceRoot":"src/views/videoSurveillance","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>"]}]}