I m trying to autoPlay my ReactJS's video.

I have googled and it seems to me that all thing are okay, I have added the muted option together with autoPlay in camelCase, also I have added a play() function in my life cycle's componentDidMount(),

but it still doesn t works.

Here my ReactJS's snippet:

  componentDidMount(){ 
    document.getElementsByTagName("body")[0].style = "overflow-y:hidden;"
    // document.getElementsByClassName('start').style.animation = 'ToggleStart 0.3s ease-out 0s 2 normal forwards '
    // this.refs.start.style.animation = 'ToggleStart 0.3s ease-out 0s 2 normal forwards '
    console.log("this.refs.start: ", this.refs.start.style )

    let video =this.refs.video
    console.log("video: ", video )
    console.log("video.play: ", video.play)
    video.play(); 
  }  



  <div
            id={style.presentation_video}
          > 
            <video  
            ref="video"
            autoPlay
            muted
            loop        
            >

              <source src={burgerVideoWebm} type="video/webm"/>
              <source src={burgerVideoMp4} type="video/mp4"/>

              error: video module fails to display 
            </video> 
          </div>

Any hint would be great, thanks

0 Answers