问题描述
我正在尝试使用react-youtube软件包创建一个基于 Electron 的Youtube播放器。
完成所需的操作,但继续获取:
GET chrome-extension://pkedcjkdefgpdelpbcmbmeomcjbeemfm/cast_sender.js net::ERR_Failed
我为此创建了一个组件,该组件从父组件获取src,宽度,高度等。
我还看到了一些有关webPreferences
的内容,因此我也为webview
添加了browserWindow
标签。
我不在乎切换,但是那个lib很棒。
有人知道可能是什么问题吗?
我的组件(TypeScript):
import * as React from "react";
import { createStyles,makeStyles } from "@material-ui/core/styles";
import YouTube,{ Options } from "react-youtube";
export const YoutubeMediaPlayer = ({
width,height,src,autoplay,numberOfSecondsToStartFrom,onPlayerError,}: {
width: string;
height: string;
src: string;
autoplay: 0 | 1 | undefined;
numberOfSecondsToStartFrom?: number;
onPlayerError: (errorMsg: string) => void;
}): null | JSX.Element => {
const classes = useStyles();
const [error,setError] = React.useState(false);
const [videoSource,setVideoSource] = React.useState("");
React.useEffect(() => {
const srcVidId = src.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
if (!srcVidId) {
onPlayerError("Invalid source from youtube");
setError(true);
} else {
setError(false);
setVideoSource(srcVidId[1]);
}
},[onPlayerError,src]);
const opts: Options = {
height: height,width: width,playerVars: {
autoplay: autoplay,},};
const onReady = (event: any) => {
const player = event.target;
console.log(src);
player.seekTo(numberOfSecondsToStartFrom || 0);
};
return (
<>
{!error && (
<div className={classes.YoutubeMediaPlayerRoot}>
<YouTube
id={"youtubeIframePlayer"}
videoId={videoSource}
opts={opts}
onReady={(e) => onReady(e)}
></YouTube>
</div>
)}
</>
);
};
const useStyles = makeStyles(() =>
createStyles({
YoutubeMediaPlayerRoot: {
width: "100%",height: "100%",})
);
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)