vue项目中实现maptalks地图上弹框使用videojs播放实时视频rtmp流

不限制于vue项目，区别只是相关文件的引入

最终实现效果如下：

 

1、首先引入需要的资源：vue-video-player、maptalks相关

npm install vue-video-player --save

npm install maptalks --save

2、以vue cli3.0为例，在vue.conig.js文件中添加配置

chainWebpack: config => {
    config.module
      .rule('swf')
      .test(/\.swf$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000
      })
  },

3、在地图页面引入

import * as maptalks from 'maptalks'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'

videojs.options.flash.swf = SWF_URL // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件

4、在地图上打点标注点位并给点位添加弹框

markerInMap() {
  const that = this
  for (var m = 0; m < that.monitor.length; m++) {
    var markerm = new maptalks.Marker(
      that.monitor[m].position, // lon and lat in here
      { // 图形样式
        'symbol': {
          'markerFile': require('./../../assets/baseImg/monitor_map.png'),
          'markerWidth': 28,
          'markerHeight': 36,
          'markerDx': 0,
          'markerDy': 0,
          'markerOpacity': 1
        }
      }
    ).addTo(that.layer_monitor)
    markerm.setInfoWindow({
      'autoPan': true,
      'width': 485,
      'minHeight': 330,
      'dy': 4,
      'custom': false, // 只使用定制自定义true
      'autoOpenOn': 'click', // set to null if not to open when clicking on marker
      'autoCloseOn': 'click',
      // 支持自定义html内容
      'content': '
' +
        '
' +
        '
' + that.monitor[m].name + '查看更多
' +
        '
'
    }).on('mousedown', onClick)
    function onClick(e) {
      setTimeout(function() {
        const moreMonitor = document.getElementById('moreMonitor')
        moreMonitor.onclick = function() {
          that.$router.push({ path: '/video/realMonitor', query: { id: moreMonitor.dataset.id }})
        }
        that.videoPlayer = videojs(document.getElementById('video_' + moreMonitor.dataset.id), {}, function() {
          this.play()
        })
      }, 1000)
    }
  }

5、下面这段代码就实现了点击播放视频

function onClick(e) {
  setTimeout(function() {
    const moreMonitor = document.getElementById('moreMonitor')
    moreMonitor.onclick = function() {
      that.$router.push({ path: '/video/realMonitor', query: { id: moreMonitor.dataset.id }})
    }
    that.videoPlayer = videojs(document.getElementById('video_' + moreMonitor.dataset.id), {}, function() {
      this.play()
    })
  }, 1000)
}

6、但其实这时候是有一个bug的，就是当我不论以什么方式关闭了这个弹框都会开始大量报错

 

要解决这个问题需要在弹框关闭的时候销毁之前创建的video对象，解决方案为监听地图点击事件，只要地图有点击操作我们就判断是否有video对象并对其销毁置null

我们在mounted里加上下面的代码

// 监听地图点击事件
this.map.on('click', function(e) {
  if (that.videoPlayer) {
    that.videoPlayer.dispose()
    that.videoPlayer = null
  }
})

1. 整个页面代码如下