A while ago I created a tech/biz/gaming/entertainment news aggregator named JANA which stands for just another news aggregator created in Ionic and React. Video seems just right for an addition so here's how I made it.
npm i yt-player First, we need to install yt-player npm package. This does not have typings as I'm creating this with TypeScript so I generated one using this instruction. After generating, copy your *.ts files to the root of the yt-player folder.
This code below will be the main YT Frame API Component.
export const YTAPi = ({props, vid}:any) =>{ let o:any = null const [player, setPlayer] = useState(o) const [time, setTime] = useState(0) useEffect( () =>{ let p:any = document.querySelector('#playerMain') if(p == null) return if(player == null){ setPlayer(new YouTubePlayer('#playerMain',{autoplay:true})) }else{ player.load(vid ? vid : 'GKSRyLdjsPA') player.on('cued', ()=>{ player.play() }) } }, [player]) useEffect( () =>{ if(player == null) return player.load(vid) //player.setVolume(100) player.on('playing', () => { setTime(player.getDuration()) // => 351.521 }) player.on('ended', ()=>{ //alert('ended') }) player.on('cued', ()=>{ player.play() }) }, [vid]) return ( <> <div id="playerMain" className="mainPlayer"></div> </> ) } The "{props,vid}" arguments take object and a video ID string so we can play other videos as well.
Top comments (0)