[FE]feat:增加视频回放组件

security-protection-platform/package.json

@@ -61,8 +61,7 @@
    "stylelint-order": "^0.7.0",
    "stylelint-scss": "^2.1.0",
    "vue-loader": "^14.2.3",
    "vue-template-compiler": "^2.2.1",
    "vuedraggable": "2.19"
    "vue-template-compiler": "^2.2.1"
  },
  "dependencies": {
    "aid-elements-desktop": "latest",
@@ -75,6 +74,9 @@
    "vuex": "^2.3.1",
    "vuex-router-sync": "^4.1.2",
    "js-cookie": "",
    "element-ui": "2.14.1"
    "element-ui": "2.14.1",
    "vuedraggable": "2.19",
    "video.js": "7.10.2",
    "videojs-playlist": "4.3.1"
  }
}
}

security-protection-platform/src/components/VideoPlayer/index.vue

@@ -0,0 +1,128 @@
<template>
  <div>
    <video ref="player" class="video-js vjs-default-skin vjs-big-play-centered"></video>
  </div>
</template>
<script>
import videojs from 'video.js'
window.videojs = videojs
require('videojs-playlist')
require('video.js/dist/lang/zh-CN.js')
require('video.js/dist/video-js.min.css')
const defaultPlayerOptions = {
  controls: true,
  autoplay: false,
  muted: false,
  language: 'zh-CN',
  fluid: true,
  // liveui: true,
  controlBar: {
    children: [
      {name: 'playToggle'}, // 播放按钮
      {name: 'currentTimeDisplay'}, // 当前已播放时间
      {name: 'progressControl'}, // 播放进度条
      {name: 'durationDisplay'}, // 总时间
      { // 倍数播放
        name: 'playbackRateMenuButton',
        playbackRates: [0.5, 1, 1.5, 2, 2.5]
      },
      {
        name: 'volumePanel', // 音量控制
        inline: false // 不使用水平方式
      },
      {name: 'FullscreenToggle'} // 全屏
    ]
  }
}
export default {
  name: 'VideoPlayer',
  props: {
    sources: {
      type: Array,
      default: () => []
    },
    options: {
      type: Object,
      default() { return {} }
    },
    autoadvance: {
      type: Number,
      default: null
    }
  },
  data() {
    const playerOptions = Object.assign({}, defaultPlayerOptions, this.options)
    return {
      player: null,
      playerOptions
    }
  },
  computed: {
    playlist() {
      return this.sources
    }
  },
  watch: {
    playlist: {
      handler(list) {
        if (!this.player) return
        this.player.playlist(list)
        if (list.length > 0) {
          this.player.playlist.autoadvance(this.autoadvance)
          // this.player.playlist.first();
        }
        this.$emit('playlistchange', list)
      },
      immediate: true
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    init() {
      const player = videojs(this.$refs.player, this.playerOptions)
      this.player = player
      this.player.on('playlistitem', (...args) => {
        this.$emit('playlistitem', ...args)
      })
      this.$emit('player-inited', player)
    }
  }
}
</script>
<style lang="scss">
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}
.vjs-slider-vertical .vjs-volume-level:before {
  top: -.4em;
  left: -.4em;
}
.video-js {
  .vjs-play-progress:before {
    top: -.5em;
    transform-origin: center;
  }
  .vjs-progress-control:hover {
      .vjs-play-progress:before {
        transform: translateY(0.17em);
      }
    }
}
</style>

security-protection-platform/src/modules/videoSurveillance/components/ReplayDialog/index.vue

@@ -0,0 +1,173 @@
<template>
  <t-modal :visibled.sync="visible" :header-visibled="false" :footer-visibled="false" :no-padding="true" width="100%">
    <div class="replayer">
      <div class="replayer-list">
        <t-tabs v-model="currentTab" mode="scrollY" orientation="vertical" width="150px" @change="handleTabChange">
          <t-tab-panel v-for="item in list" :key="item.fileId" :label="item.fileName" :panel-id="item.fileId" />
        </t-tabs>
      </div>
      <div class="replayer-video">
        <t-loading v-model="loadVideo">
          <span class="text-md text-info">获取视频资源...</span>
        </t-loading>
        <video-player
          :sources="videoList"
          :autoadvance="0"
          :style="{opacity: loadVideo ? 0: 1}"
          @player-inited="handlePlayerInited"
          @playlistitem="handlePlayerCurrentChange"
        />
      </div>
    </div>
  </t-modal>
</template>
<script>
import VideoPlayer from '@/components/VideoPlayer'
export default {
  components: { VideoPlayer },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    visibled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentTab: null,
      loadVideo: false,
      videoList: [],
      $player: null
    }
  },
  computed: {
    visible: {
      get() { return this.visibled },
      set(val) {
        if (!val) this.$player.pause()
        this.$emit('update:visibled', val)
      }
    }
  },
  watch: {
    list: {
      handler(val) {
        console.warn(`list Change`)
        this.resetVideoList()
        if (val.length > 0) {
          this.currentTab = val[0].fileId
          // 手动触发第一个tab点击事件
          this.handleTabChange(null, 0)
        }
      },
      immediate: true
    }
  },
  methods: {
    handlePlayerInited(player) {
      this.$player = player
      window.player = this
    },
    async handleTabChange(name, index) {
      this.$player.pause()
      await this.preloadOriVideoUrl(index)
      this.play(index)
    },
    handlePlayerCurrentChange(e, item) {
      const { index, fileId } = item
      this.currentTab = fileId
      this.preloadOriVideoUrl(index)
    },
    resetVideoList() {
      const videoList = this.list.map((item, index) => {
        const { fileId, fileType } = item
        return {
          index,
          fileId,
          fileType,
          loaded: false
        }
      })
      this.videoList = videoList
    },
    play(index) {
      console.log(`播放:index=${index}`)
      // 调用额外的currentItem方法以避免currentItem在首次不生效
      // https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md
      this.$player.playlist.currentItem()
      this.$player.playlist.currentItem(index)
      this.$player.play()
    },
    /**
     *  从index开始预载videoList的视频地址
     *  此方法将在获取index对应的地址后就立即返回
     */
    preloadOriVideoUrl(index = 0, maxLength = 5) {
      return new Promise((resolve, reject) => {
        for (let i = index; i in this.videoList && i - index < maxLength; i++) {
          console.log(`预载地址:index=${i}`)
          const item = this.videoList[i]
          const task = item.loaded
            ? Promise.resolve()
            : this.getOriVideoUrl(item.fileId).then(resp => {
              console.log(`预载完成,更新播放源:index=${i}`)
              item.loaded = true
              item.sources = [{
                src: resp.url,
                type: item.fileType
              }]
            })
          if (i === index) {
            this.loadVideo = !item.loaded
            task.then(() => {
              resolve()
            }).finally(() => {
              this.loadVideo = false
            })
          }
        }
      })
    },
    /*
     * 获取真实视频地址
     */
    getOriVideoUrl(fileId) {
      console.log(`请求地址:${fileId}`)
      // fake
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          const x = Math.random()
          const url = x > 0.5
            ? 'http://10.19.90.34:19000/tool-image/tool-image_7d359725fac4464fb248284caf321993.mp4'
            : 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4'
          resolve({
            url
          })
        }, 1000)
      })
    }
  }
}
</script>
<style lang="scss">
.replayer {
  display: flex;
  &-list {
    margin-right: 20px;
    // width: 200px;
  }
  &-video {
    position: relative;
    flex: auto;
  }
}
</style>

security-protection-platform/src/modules/videoSurveillance/index.vue

@@ -12,13 +12,13 @@
    </div>
    <div class="page-bottom">
      <div v-for="(item,index) in videoList" :key="index">
        <t-card :class="index%3===0?'card-video-first':'card-video'">
        <t-card class="card-video">
          <img :src="item.url" class="card-image">
          <div slot="foot" class="bottom">
            <span v-tooltip="item.videoDetail">{{ item.videoDetail.content | handleText }}</span>
            <div style="margin-left:auto">
              <t-button v-tooltip="item.options1" class="bottom-btn" @click="goDistinguishRecord(item.videoId)"><t-icon size="16" icon="image-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn"><t-icon size="16" icon="piechart-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options2" class="bottom-btn" @click="handleReview(item.videoId)"><t-icon size="16" icon="piechart-outline"></t-icon></t-button>
              <t-button v-tooltip="item.options3" class="bottom-btn"><t-icon size="16" icon="arrow-expand-all-outline"></t-icon></t-button>
            </div>
          </div>
@@ -26,12 +26,16 @@
      </div>
    </div>
    <t-pager :page-size="videoPageSize" :current="videoCurrent" :total="videoTotal" :sizer-range="[ 5, 10, 20, 30 ]" class="pager" show-elevator @on-change="onChangeGate"></t-pager>
    <replay-dialog :list="replayList" :visibled.sync="showReplayDialog" />
  </div>
</template>
<script>
import sysapi from '@/api/videoSurveillance'
import commonapi from '@/api/common'
import ReplayDialog from './components/ReplayDialog'
export default {
  components: { ReplayDialog },
  filters: {
    handleText(value) {
      if (!value) return ''
@@ -56,7 +60,10 @@ export default {
      gateFieldData: 101101,
      videoList: [],
      totalList: [],
      roomList: []
      roomList: [],
      showReplayDialog: false,
      replayList: []
    }
  },
  mounted() {
@@ -64,6 +71,45 @@ export default {
    this.getVideoSurveillanceData() // 获取视频监控界面数据
  },
  methods: {
    handleReview() {
      this.replayList = [{
        fileName: '12月14 16:55',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165526.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:56',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165527.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:57',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165528.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:58',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165529.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 16:59',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165530.mp4',
        fileType: 'video/mp4'
      }, {
        fileName: '12月14 17:00',
        fileId: 'ai-video_5A02296PAKA885B-video20201214165531.mp4',
        fileType: 'video/mp4'
      }]
      // this.replayList = [{
      //   sources: [{
      //     src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
      //     type: 'video/mp4'
      //   }]
      // }, {
      //   sources: [{
      //     src: 'http://10.19.90.34:19000/tool-image/tool-image_7fa1f7b30f0640f2a67ac8b4c2e0b574.mp4',
      //     type: 'video/mp4'
      //   }]
      // }]
      this.showReplayDialog = true
    },
    async tabClick(id) {
      this.paramsObj.page = 0
      this.videoList = []
@@ -136,9 +182,10 @@ export default {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-left: -24px;
        .card-video-first, .card-video{
          width:397px;
          height:245px;
          width:354px;
          height:240px;
          margin-top: 20px;
            .card-image{
                width: 100%;
@@ -162,28 +209,15 @@ export default {
                }
            }
        }
        .card-video-first{
          .card-footer{
             padding: 0px !important;
             background: none;
             width: 100%;
             position: absolute;
             border-top: none;
             bottom: 0px;
             }
            .card-block{
              padding:0 !important;
            }
        }
        .card-video{
          .card-footer{
             padding: 0px 0 0 24px !important;
             background: none;
             width: 100%;
             position: absolute;
             border-top: none;
             bottom: 0px;
             }
            padding: 0px 0 0 24px !important;
            background: none;
            width: 100%;
            position: absolute;
            border-top: none;
            bottom: 0px;
            }
            .card-block, .card-video-block{
              margin-left: 24px;
              padding:0 !important;

security-protection-platform/src/styles/index.scss

@@ -25,6 +25,7 @@ html {
*,
*:before,
*:after {
  font-family: inherit;
  box-sizing: inherit;
}