使用 react-player API 导致 Failed to execute 'postMessage' on 'DOMWindow' 控制台错误?
Using react-player API causing Failed to execute 'postMessage' on 'DOMWindow' error in the console?
我已经按照用户的推荐安装了 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 确实允许您使用他们的视频。就我而言,警告似乎是由于它们的 ad-embedded 内容。否则内容应该有效。
一个代码沙箱example here。
我不得不禁用我的 Add-Blocker。
我已经按照用户的推荐安装了 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 确实允许您使用他们的视频。就我而言,警告似乎是由于它们的 ad-embedded 内容。否则内容应该有效。
一个代码沙箱example here。
我不得不禁用我的 Add-Blocker。