使用react-player API导致无法在控制台中的“ DOMWindow”上执行“ postMessage”错误吗？

问题描述

我已经按照用户的建议安装了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>
)

}

解决方法

错误说明了一切。您提供的URL与您的网站的来源/地址不匹配。

这称为cross origin resource sharing，如果网站不允许您在其他网站上显示其内容，这是一个警告。幸运的是，YouTube确实允许您使用他们的视频。就我而言，警告似乎是由于其广告嵌入的内容。内容应该可以正常工作。

一个CodeSandbox example here。

---

哦，顺便说一句，我不认为您需要将<ReactPlayer />嵌入<iframe />中。足够了：

import React from "react";
import ReactPlayer from "react-player/youtube";

const MyPlayer = () => {
  return (
    <ReactPlayer
      url="http://www.youtube.com/watch?v=q76bMs-NwRk"
      muted={true}
      controls={false}
    />
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MyPlayer />
    </div>
  );
}

,

我不得不禁用我的添加拦截器。