问题描述
我想在 React 项目中的 youtube iframe 上实现自定义播放/暂停按钮,但是无法实现!它返回所有类型的错误,例如:当我按下我的自定义静音按钮时,它给出:player.mute is not a function
等等。
这是我正在使用的代码:
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute("onload","onYouTubeIframeReady()");
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
var player;
window.onYouTubeIframeReady = function () {
player = new YT.Player("player",{
videoId: "sGPrx9bjgC8",autoplay: true,events: {
onReady: onPlayerReady
}
});
};
function onPlayerReady(event) {
event.target.playVideo();
}
const playVid = () => {
player.playVideo();
};
const unMuteVid = () => {
player.unMute();
};
const muteVid = () => {
player.mute();
};
这是一个 CodeSandbox 。
非常感谢任何帮助!
解决方法
根本原因
您的代码在 App 组件渲染中运行。
在执行需要修改 DOM 或依赖于存在于 DOM 中的组件呈现的元素的操作时,您应该使用 useEffect
钩子。
在这种情况下,您可以将设置代码移动到 useEffect
中并使用 useState
钩子设置播放器。
这样可以确保 iframe 已安装并且引用正确。
看到它在这里工作:https://codesandbox.io/s/distracted-murdock-o96u5?file=/src/App.js
const [player,setPlayer] = useState();
useEffect(() => {
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute("onload","onYouTubeIframeReady()");
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
window.onYouTubeIframeReady = function () {
setPlayer(
new YT.Player("player",{
videoId: "sGPrx9bjgC8",autoplay: true,events: {
onReady: onPlayerReady
}
})
);
};
function onPlayerReady(event) {
event.target.playVideo();
}
},[]);
const playVid = () => {
console.log(player);
player.playVideo();
};
const unMuteVid = () => {
player.unMute();
};
const muteVid = () => {
player.mute();
};
带有变通方法的原始答案
虽然我仍然不确定根本原因,但似乎 new YT.Player
没有返回与 onReady 事件中引用的对象相同的对象。
一种解决方法是将 playerReady 事件上的 event.target 引用保存到 player 变量并使用它。
function onPlayerReady(event) {
player = event.target;
这里正在工作: https://codesandbox.io/s/distracted-dream-n2qmi?file=/src/App.js