| 1 |
- {"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=style&index=0&id=1a71642b&lang=scss&scoped=true&","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\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\100zone\\Desktop\\baizong\\community\\SmartCommunity\\videoSurveillance\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\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",{"version":3,"sources":["myVideoPlayer.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA;AACA;AACA;AACA;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>"]}]}
|
