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)