Я хочу получить текущее время из добавленного видео с помощью API YouTube (https://developers.google.com/youtube/iframe_api_reference).). И я хочу использовать эту информацию в другом компоненте, поэтому я даю свойство объекту окна так,Я могу получить доступ к информации в любом месте.
Код:
import React from 'react';
class VideoSingle extends React.Component {
constructor(props){
super(props);
this.state = {}
}
componentDidMount() {
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var YT;
window.onYouTubeIframeAPIReady = function() {
YT = window.YT;
window.player = new YT.Player('videoplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
origin:'http://localhost:3001',
events: {
}
});
}
}
componentDidUpdate() {
console.log(window.player,'logging window.player at componentDidUpdate')
}
render(){
console.log(window.player,'logging window.player at render')
return (
//1. The <iframe> (and video player) will replace this <div> tag.
<div id="videoplayer"></div>
);
}
};
export default VideoSingle;
Все места, которые я пытаюсь использовать console.log, дают значение «undefined» (в примере, который я console.logged в componentDidMount иrender):
Но когда я ввожу window.player.getCurrentTime () в консоли браузера, я на самом деле получаю значение
Я хочу понять, как можно получить доступ к window.player.getCurrentTime () в любом месте моего приложения.
Репозиторий приложения: https://github.com/phelpa/YouList