使用 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>'). 的控制台中出现了这个错误，我不知道该怎么办？ 我的代码如下（我的完整代码只有sn-ps）：

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 确实允许您使用他们的视频。就我而言，警告似乎是由于他们的广告嵌入内容。内容应该可以正常工作。

一个代码沙盒example here。