index.vue

<template>
  <div class="vion-player">
    <!-- http://localhost:8080/jplayer -->
    <iframe ref="vplayer" src="/jplayer/index.html?ip=52.130.155.147&id=20000000001310000005" frameborder="0"></iframe>

    <div class="footer">
      <button @click="handleStop">停止播放</button>
      <button @click="handleScreenshot">抓拍</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VionPlayer',
  data() {
    return {
      // eslint-disable-next-line
      _playerEl: null,
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this._playerEl = this.$refs.vplayer;
      console.log('vplayer', this._playerEl);
    },
    handleStop() {
      this._playerEl.contentWindow.stopPlayer();
    },
    handleScreenshot() {
      const imgData = this._playerEl.contentWindow.screenshotBase64();
      console.log('handleScreenshot', imgData);
    },
  },
}
</script>

<style scoped lang="scss">
.vion-player {
  > iframe {
    width: 800px;
    height: 480px;
  }
  .footer {
    > button {
      margin-right: 10px;
    }
  }
}
</style>