免费视频直播、点播H5播放器SkeyeWebPlayer 联合vue-baidu-map百度地图组件实现电子地图播放性能，最终成果如图所示：

SkeyeWebPlayer播放器如何在vue-baidu-map百度地图组件中联合覆盖物 点(bm-marker)、自定义覆盖物(bm-overlay)等，实现在百度地图上方播放实时视频流，（反对FLV、HLS、RTSP、WS-FLV/WS-RTSP、WEBRTC、HEVC/H265）
1、将SkeyeWebPlayer.js文件拷到static目录下

SkeyeWebPlayer.js 资源

libVSS.wasm 文件用于解码h265 ,和快照截取下载

2、引入形式 static/SkeyeWebPlayer/SkeyeWebPlayer.js
<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <title>vue-map-skeye-player</title>    <script src="static/SkeyeWebPlayer/SkeyeWebPlayer.js"></script>   </head>  <body>    <div id="app"></div>    <!-- built files will be auto injected -->  </body></html>
3、在我的项目中按装 vue-baidu-map
npm install vue-baidu-map --save
部分引入 vue-baidu-map
import {BaiduMap, BmView, BmLocalSearch, BmMarker, BmInfoWindow} from "vue-baidu-map";components: {    BaiduMap, BmView, BmLocalSearch, BmMarker, BmInfoWindow  },
渲染地图我想大家应该都会吧，间接上代码：
<template>  <div class="bmap">    <baidu-map      class="map"      ak="ydtz9Gf75Pt9swZvc0bWa8t0UWUSxW5I"      :mapStyle="mapStyle"      :center="mapcenter"      :zoom="mapZoom"      :scroll-wheel-zoom="true"      :double-click-zoom="false"      @ready="mapReady">      <template v-for="(item, index) in markerPointData">        <bm-marker          :key="index"          :position="item.markerPoint"          :icon="{url: item.markerIcon, size: {width: 30, height: 30}}"          @click="lookInfo(item, false)">        </bm-marker>      </template>      <!-- 信息窗体 -->      <InfoWindow ref="InfoWindow" @preview="preview"></InfoWindow>      <!-- 监控窗体 -->      <VideoWindow ref="videoWindow"></VideoWindow>    </baidu-map>  </div></template>
在监控点数据中绑定好经纬度坐标，和监控点相机图片；监控点数据格式 如下:
markerPointData: [    {      cameraId: 1,      url: 'rtsp://39.101.128.80:5540/34020000001310000071/0',      name: '监控点位一',      indexCode: '000001',      ipaddr: '192.168.0.111',      markerPoint: { lng: 103.99104, lat: 30.627748 },      markerIcon: require(`@/assets/camera/camera_0.png`)    }  ]
再利用bm-marker在地图上渲染出监控点，如下图：

在点击摄像机（监控点）的时候再弹出信息窗口，通过以下办法将地图中的监控点地位主动居中显示：
this.map.centerAndZoom(new this.BMap.Point(lng, lat), this.map.getZoom());
在VideoWindow InfoWindow 组件中封装好自定义覆盖物，此时要用到 { BmOverlay }组件，实现成果，如下图：

在组件外部 有show() ,hide()这两个办法，不便在内部调用，管制显示与暗藏，在敞开播放器窗口时还须要销毁播放器实例，
4、在实现好所有的筹备工作后，咱们把自定义覆盖物放到地图中就实现了图一所示的样子。相干代码资源下载
须要留神的是，在应用快照截取和H265播放时，须要用到结尾说到的libVSS.wasm解码，要在webpack.base.conf.js中配置如下：
plugins: [    new CopyWebpackPlugin([      {        from: path.resolve(__dirname, '../static/SkeyeWebPlayer/libVSS.wasm'),        to: './'      }    ])],