<template>
  <iframe :onload="onloadCode" style="width:460rpx;height:100%;border:1px solid #fff;background: #000;border-radius: 20rpx;"></iframe>
</template>

<script>
export default {
  name: "myVideo",
  props: {
    videoUrl: {
      // 确定按钮颜色
      type: String,
      default: "",
    },
  },
  data() {
    return {
      onloadCode: `
		                  const url = '${this.videoUrl}'
		                  this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';
		                  const iframe = top.document.getElementsByTagName('iframe')[0]
		                  var evObj = document.createEvent('MouseEvents');
		                  evObj.initEvent( 'event1', true, false );
		                  iframe.dispatchEvent(evObj)
		                  `
      // onloadCode: `
      //                 const url = 'https://vd3.bdstatic.com/mda-mja2qsy47mbyh1xc/sc/cae_h264_clips/1633918903861514556/mda-mja2qsy47mbyh1xc.mp4?auth_key=1634030413-0-0-7898726f7bd328302e2119fdf694fd5e&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest='
      //                 this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="'+url+'"></video>';
      //                 const iframe = top.document.getElementsByTagName('iframe')[0]
      //                 var evObj = document.createEvent('MouseEvents');
      //                 evObj.initEvent( 'event1', true, false );
      //                 iframe.dispatchEvent(evObj)
      //                 `
    };
  }
}
</script>
