<template>
  <div class="cut-video-container">
    <iframe
      ref="iframeRef"
      :src="iframeUrl"
      frameborder="0"
      width="100%"
      height="100%"
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      allowfullscreen
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'CutVideo',
  data() {
    return {
      iframeUrl: 'http://118.145.148.169:7777/'
    }
  },
  mounted() {
    // 添加消息事件监听器，用于处理iframe的跨域通信
    window.addEventListener('message', this.handleMessage)
  },
  beforeDestroy() {
    // 组件销毁前移除事件监听器
    window.removeEventListener('message', this.handleMessage)
  },
  methods: {
    handleMessage(event) {
      // 验证消息来源
      if (event.origin !== 'http://118.145.148.169:7777') {
        return
      }
      // 处理来自iframe的消息
      console.log('Received message from iframe:', event.data)
      // 根据需要处理接收到的消息
      // this.processMessage(event.data)
    },
    // 向iframe发送消息的方法
    sendMessageToIframe(message) {
      const iframe = this.$refs.iframeRef
      if (iframe) {
        iframe.contentWindow.postMessage(message, 'http://118.145.148.169:7777')
      }
    }
  }
}
</script>

<style scoped>
.cut-video-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>