反应视频播放器轮播不显示视频答案

【问题标题】：react video player carousel not showing videos反应视频播放器轮播不显示视频
【发布时间】：2021-07-28 03:00:40
【问题描述】：

我正在使用 react-elastic-carousel 和 reactjs-media npm 包来显示 youtube 视频的轮播。但是我的视频没有显示，如果我点击一个我会得到"Error appeared . Try again later "

enter image description here

我的代码：

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>
  )

}

感谢您的帮助。

【问题讨论】：

如果文件存储在本地，YouTube有时会显示播放视频错误，因此我建议您在w3schools、Codepen、JS Fiddle等在线编辑器上尝试一次。

标签： reactjs youtube video-player

【解决方案1】：

您的视频链接地址错误。

正确的 URL 应该是 -> 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

【讨论】：