0

I want to bind a video in carousel with source which is a hyperlink in the carousel.

I am able to bind images but not able to bind video as a source. How do I load videos with images?

<div style={ divStyle }>
  <div className={ styles.reactCarousel }>
    <Carousel dynamicHeight={ true } showThumbs = { false}  autoPlay = { true} >
      {
        this.state.items.map((imageList, key) => {
          return (<div>
            {/* <iframe src={imageList.Image? imageList.Image["Url"] : ''} width="560" height="315"></iframe>  */ }
            < video  src = { imageList.Image ? imageList.Image["Url"] : '' } > </video>
            {/* <img  src={imageList.Image? imageList.Image["Url"] : ''}  />  */ }
            <p className={ styles.legends } onClick = {() => { this._onClickItem(imageList.Title) }
        }> { imageList.Title } < /p>   
        < /div>)    
    })}
</Carousel>
  • Are you getting any error? Or you can add video but it is not playing automatically? – Ganesh Sanap Oct 14 '19 at 5:55
  • its showing blank black if i use i frame it is coming but i have to render video image both – kumar Oct 14 '19 at 6:09
1

You can try using this:

<video width="320" height="240" controls>
   <source src={ imageList.Image ? imageList.Image["Url"] : '' } type="video/mp4">  
   Text if video is not loaded
</video>

where type is optional.

instead of:

<video src = { imageList.Image ? imageList.Image["Url"] : '' }> </video>
  • Thank you i will ry this and update you soon – kumar Oct 14 '19 at 8:28
  • its is working but its mandatory height and width can i give it default carosuel size – kumar Oct 14 '19 at 8:45
  • No it is not mandatory. You can give urs – harshal gite Oct 14 '19 at 8:47
  • 1
    Please mark this as answer if the answer helped solve your issue/requirement. – harshal gite Oct 14 '19 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.