1，直接把demo整个放入public目录下：ps：我懒别学我

2，在index。html里引入h5player.min.js

3，在监控页面创建视图容器div

4,引入h5player.min.js

5、把demo.html里需要的功能模块代码复制过来，比如我这只需要预览的功能，所以只要一下这些代码

//data里定义的数据
mode:1,
      isMoveDevice: IS_MOVE_DEVICE,
      splitNum: IS_MOVE_DEVICE ? 1 : 2,
      urls: {
        realplay: 'ws://60.30.137.2:559/openUrl/uFjw1wI',
        talk: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S',
        playback: 'wss://10.41.163.126:6014/proxy/10.41.163.126:559/EUrl/6gFx47S'
      },
      
      //
       mounted() {
    this.initChart()
    this.init()
    this.createPlayer()
    this.realplay()
  },
////////////
  methods: {
    //初始化视频监控
    init() {
      // 设置播放容器的宽高并监听窗口大小变化
      window.addEventListener('resize', () => {
        this.player.JS_Resize()
      })
    },
    createPlayer() {
      this.player = new window.JSPlugin({
        szId: 'player',
        szBasePath: "/demo/",//需要注意这里要放刚刚pubilc里demo的相对位置
        iMaxSplit: 1,
        iWidth: 800,
        iHeight: 500,
        iCurrentSplit: IS_MOVE_DEVICE ? 1 : 2,
            openDebug: true,
            oStyle: {
              borderSelect: IS_MOVE_DEVICE ? '#000' : '#FFCC00',
            }
      })

      // 事件回调绑定
      this.player.JS_SetWindowControlCallback({
        windowEventSelect: function (iWndIndex) {  //插件选中窗口回调
          console.log('windowSelect callback: ', iWndIndex);
        },
        pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {  //插件错误回调
          console.log('pluginError callback: ', iWndIndex, iErrorCode, oError);
        },
        windowEventOver: function (iWndIndex) {  //鼠标移过回调
          //console.log(iWndIndex);
        },
        windowEventOut: function (iWndIndex) {  //鼠标移出回调
          //console.log(iWndIndex);
        },
        windowEventUp: function (iWndIndex) {  //鼠标mouseup事件回调
          //console.log(iWndIndex);
        },
        windowFullCcreenChange: function (bFull) {  //全屏切换回调
          console.log('fullScreen callback: ', bFull);
        },
        firstFrameDisplay: function (iWndIndex, iWidth, iHeight) {  //首帧显示回调
          console.log('firstFrame loaded callback: ', iWndIndex, iWidth, iHeight);
        },
        performanceLack: function () {  //性能不足回调
          console.log('performanceLack callback: ');
        }
      });
    },
    /* 预览&对讲 */
    realplay() {
      let { player, mode, urls } = this,
        index = player.currentWindowIndex,
        playURL = urls.realplay

      player.JS_Play(playURL, { playURL, mode }, index).then(
        () => { console.log('realplay success') },
        e => { console.error(e) }
      )
    },
    }

6.最后成品展示