我正在使用 react-elastic-carousel
和 reactjs-media
npm 包来显示 youtube 视频的轮播。但是我的视频没有显示,如果我点击一个,我会得到 "Error appeared . Try again later "
我的代码:
VideoSlider.js
import Carousel from "react-elastic-carousel";
import {YoutubePlayer} from 'reactjs-media';
export default function VideoSlider() {
const links = [
'https://www.youtube.com/watch?v=_ng_bVJMm88',
'https://www.youtube.com/watch?v=5Zmx5D7dOYA&feature=emb_title',
'https://www.youtube.com/watch?v=nKzXUTvn2es',
'https://www.youtube.com/watch?v=Wk97ev-M2Nw',
'https://www.youtube.com/watch?v=FZta8t2L1pk',
'https://www.youtube.com/watch?v=BOmSrKRWJS0',
]
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2, itemsToScroll: 2 },
{ width: 768, itemsToShow: 2 },
{ width: 1200, itemsToShow: 3 }
];
return (
<div className="bg-FQAItem h-84 p-4">
<div className="carousel-wrapper">
<Carousel breakPoints={breakPoints} isRTL ={false} >
{links.map((item,index) => (
<YoutubePlayer src="https://www.youtube.com/watch?v=5Zmx5D7dOYA&feature=emb_title" height={350} key = {index}/>
))}
</Carousel>
</div>
</div>
)
}
非常感谢您的帮助。
答案 0 :(得分:1)
您的视频链接网址错误。
正确的网址应该是 -> https://youtu.be/5Zmx5D7dOYA
代替
https://www.youtube.com/watch?v=5Zmx5D7dOYA&feature=emb_title
建议通过右键点击视频来获取视频链接,而不是从浏览器地址栏中复制。
参考:SRC prop note here --> https://cranom.com/reactjs-media/api/youtube-player-props