1

I am trying to have a loop of several background videos for my react page. I thought of using this : 

<video className={classes.videobg} autoPlay loop muted>
   <source src={videourl1} type='video/mp4' />
   <source src={videourl2} type='video/mp4' />
   Your browser does not support the video tag
</video>

but it's not working, it only shows a loop of the first video. Is there a way to have it done?

Thank you!

Linir
  • 379
  • 1
  • 3
  • 12

2 Answers2

0

The <source/> inside the <video/> specifies that you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands. So using two sources of different video url won't work. It will take the first one that is compatible with the browser.

Jagrati
  • 11,474
  • 9
  • 35
  • 56
  • Thank you, I figured its not working.. do you know of a different way to achieve the desired result? – Linir May 02 '20 at 17:45
0

Though I know I am a little late to answer this question

const Clip = (props: {url: string}) => {
    let url = props.url;
    const [index, setIndex] = React.useState(0);
    const videos = ['URL1', 'URL2']
    return (
        <video key={videos[index] || props.url } autoPlay playsInline onEnded={() => {setIndex((idx) => idx + 1);}}>
          <source src={videos[index] || props.url} />
        </video>
    );
}

For my use case, I need to play video in an array and this solution is for Typescript, but it can be easily extended to Javascript.

I have extended it to work for ReactJS

https://leetcode.com/playground/LvSB5JQF

However, please note for my use case, I had a default static animation that I was required to play if the loop ended, so it may not work as well for your use case.

This was based on this approach [here][1]

Anshuman Kumar
  • 464
  • 1
  • 6
  • 20