reactjs - 如何将视频添加到 React 响应式轮播 Npm 包？

Question

我正在尝试创建图像轮播和嵌入的 Youtube 视频（第一项是 youtube 视频，其余是图像）我正在使用 React Responsive Carusel npm 包，但我找不到创建我想要的轮播的方法没有错误。

我在这里看到了一个解决方案，但它仅适用于视频。

这是我目前的代码：

import React from 'react'
import 'react-responsive-carousel/lib/styles/carousel.min.css' // requires a loader
import { Carousel } from 'react-responsive-carousel'
import ReactPlayer from 'react-player'
const ModalImagesPreview = () => {
    
  return (
    <div>
      <Carousel>
        <div>
          <ReactPlayer
            url='https://www.youtube.com/watch?v=ysz5S6PUM-U'
            volume='1'
            muted
            width='100%'
            playing={true}
          />
        </div>
        <div>
          <img src='https://cdn.dribbble.com/users/2146089/screenshots/12387473/media/bf9ffb522fe68ba57ebdc62bc3f16cc5.png' />
        </div>
        <div>
          <img src='https://cdn.dribbble.com/users/427857/screenshots/12318706/media/f30f662dbf160022412812881b2afb43.jpg' />
        </div>
      </Carousel>
    </div>
  )
}

export default ModalImagesPreview

感谢帮助者！

Answer 1

这是我在 react-responsive-carousel 网站上找到的

import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
import React from 'react';
import ReactPlayer from 'react-player';
import { Carousel } from 'react-responsive-carousel';
import { PropTypes } from 'prop-types';
import { Grid, makeStyles } from '@material-ui/core';

const DUMMY_VIDEOS = [
  {
   _id: '5fd025a181e2c80897c14ae1',
   videoUrl: 'https://www.youtube.com/embed/AVn-Yjr7kDc'
  }
];

const useStyles = makeStyles(theme => ({
  carousel: {
  margin: theme.spacing(2)
 }
}));

const YoutubeSlide = ({ url, isSelected }) => (
  <ReactPlayer width="100%" height="276px" url={url} playing={isSelected} />
);

const CarouselVideo = ({ data }) => {
  const classes = useStyles();

  const customRenderItem = (item, props) => (
    <item.type {...item.props} {...props} />
  );

  const getVideoThumb = videoId =>`https://img.youtube.com/vi/${videoId}/default.jpg`;

  const getVideoId = url =>url.substr('https://www.youtube.com/watch?v='.length, url.length);

  const customRenderThumb = children =>
    children.map(item => {
      const videoId = getVideoId(item.props.url);
  
      return <img key={videoId} src={getVideoThumb(videoId)} />;
  });

  return (
    <Grid item md={6} xs={12}>
      <Carousel
       autoPlay={false}
       className={classes.carousel}
       emulateTouch={true}
       showArrows={true}
       showThumbs={true}
       showStatus={false}
       infiniteLoop={true}
       renderItem={customRenderItem}
       renderThumbs={customRenderThumb}
     >
      {data.map(v => (
        <YoutubeSlide
          url={v.videoUrl}
          muted
          playing={false}
          key={v._id ? v._id : v.id}
        />
      ))}
     </Carousel>
   </Grid>
  );
 };

 YoutubeSlide.propTypes = {
   url: PropTypes.string,
   isSelected: PropTypes.bool
 };

 CarouselVideo.propTypes = {
   data: PropTypes.array
 };

 CarouselVideo.defaultProps = {
  data: DUMMY_VIDEOS
 };

export default CarouselVideo;

最后一步是调用这个CarouselVideo，你想用你的数据作为道具进行渲染，或者直接调用它而不传递任何东西 => 这将显示我在那里添加的虚拟视频。所以你可以这样称呼它：

 // DisplayVideo.js file with default videos as shown below
 const DisplayVideo = () => {
   render( <CarouselVideo />)
 }

 // or with your data
 const DisplayVideo = ({PASS_YOU_DATA_HERE}) => {
   render( <CarouselVideo data={PASS_YOU_DATA_HERE} />)
 }

结果：（ 来源：https ://www.npmjs.com/package/react-responsive-carousel ）