是否使用react-player API导致在控制台中对'DOMWindow‘执行'postMessage’失败？

Question

我已经按照用户的建议安装了react-player，它解决了我最初的问题，但现在我在chrome Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').的控制台上遇到了这个错误，我不知道该怎么办？我的代码如下(只是我完整代码的一小段)：

import React, { useRef, useState, useEffect } from 'react';
import ReactPlayer from 'react-player/youtube'

function Webapps() {

const autoplayChange = () => {
        console.log('playing!')
    }
return(
<div className='iframeContainer'><ReactPlayer url={Projects.videoAddress} muted={true} controls={false} onPlay={autoplayChange} onPause={autoplayChange} onEnded={autoplayChange}/></div>
)

}

Answer 1

此错误表示您使用的URL与您网站的来源/地址不匹配。

这被称为cross origin resource sharing，它是一个警告，以防一个网站不允许你在另一个网站上显示他们的内容。幸运的是，youtube确实允许你使用他们的视频。在我看来，警告似乎是由于他们的广告嵌入内容造成的。否则，内容应该是有效的。

​

​

A CodeSandbox example here。

Answer 2

我不得不关闭我的加载项阻止程序。