youtube-to-html5-loader
youtube-to-html5-loader copied to clipboard
How can this be initialized with React.js?
There seems to be no examples of this with React.js, but there is a package for it.
Has anyone been able to configure this properly?
My error in console shows as: _thelevicole_youtube_to_html5_loader__WEBPACK_IMPORTED_MODULE_0___default(...) is not a constructor
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Popover from 'react-bootstrap/Popover';
import YouTubeToHtml5 from '@thelevicole/youtube-to-html5-loader';
import { useState, useEffect, useRef } from 'react';
const Music = () => {
const [ src, setSrc ] = useState("https://www.youtube.com/watch?v=cI4ryatVkKw");
const videoRef = useRef();
useEffect(() => {
var video = new YouTubeToHtml5();
})
const popover = (
<Popover id="popover-basic">
<Popover.Header as="h3">Music Player</Popover.Header>
<Popover.Body>
<h6>Pick a song:</h6>
<button className="btn btn-dark me-2"
disabled={src === "https://www.youtube.com/watch?v=cI4ryatVkKw"}
onClick={() => setSrc("https://www.youtube.com/watch?v=cI4ryatVkKw")}>
Song 1
</button>
<button className="btn btn-dark me-2"
onClick={() => setSrc("https://www.youtube.com/watch?v=qsEBaIMCKl4")}>
Song 2
</button>
<button className="btn btn-dark mt-2"
onClick={() => setSrc("https://www.youtube.com/watch?v=koRbYQyPU0U")}>
Song 3
</button>
</Popover.Body>
</Popover>
);
return(
<>
<div id="musicWidget">
<OverlayTrigger
placement="left"
trigger="click"
overlay={popover}>
<button className="btn btn-light bi-music-note"></button>
</OverlayTrigger>
</div>
<video src={src} ref={videoRef}></video>
</>
);
};
export default Music;
Hi @pixelRena! Did you manage to fix it? I have the same error when trying to use it with React.js. Thanks a lot!
Hi @pixelRena! Did you manage to fix it? I have the same error when trying to use it with React.js. Thanks a lot!
I never had any luck with it unfortunately! :[
@pixelRena!、@jsundev! use 4.0.1 is work for me