CODEWITHSUNDEEP
javascriptvideoreactjsinstagramredux
huv1k
huv1k

Reputation: 294

React video rendering

i am having problems with rendering videos with react. Its somehow overlapping videos. In source code its right, but in page view its not correct. It happens only to one video. Every time it happens to different video etc.

When you check in object inspector. I have working stuff in php, but with react is doing this rendering problem i don't exactly know if its browser rendering problem or reactjs. I tried it on all browsers and doing same thing.

Rendering problem on image

Source of video in second row and column:

<a href="https://instagram.com/p/9QfapSvLHD/" target="_blank" class="life-one-photo table-cell modal" data-reactid=".0.0.$5">
   <video loop="" autoplay="" muted="" poster="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/e15/12145465_444078379115659_399268826_n.jpg" class="life-one-photo-video" data-reactid=".0.0.$5.0">
     <source src="https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/12136722_988951267856293_201072634_n.mp4" data-reactid=".0.0.$5.0.0">
  </video>
</a>

Source of second row and fourth column:

<a href="https://instagram.com/p/9HYbUYvLIT/" target="_blank" class="life-one-photo table-cell modal" data-reactid=".0.0.$7">
  <video loop="" autoplay="" muted="" poster="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/e15/12142112_830542177065598_1671839696_n.jpg" class="life-one-photo-video" data-reactid=".0.0.$7.0">
    <source src="https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/12125856_1718151458404599_30943699_n.mp4" data-reactid=".0.0.$7.0.0">
  </video>
</a>

You can seee source is different but still video is same, i don't rly know whats happening here. Plus if takes a lot more of cpu when is rendered with react but not in php. I have same stuff rendered by php and it works good, React snippet of code creating posts:

export default class Post extends Component {
  render() {
    const data = this.props.image.type === 'video' ?
      <video loop autoPlay muted poster={this.props.image.source} className="life-one-photo-video">
        <source src={this.props.image.sourceVideo}/>
      </video> :

    <img src={this.props.image.source} className="life-one-photo-img"/>

    return (
      <a href={this.props.image.link} target="_blank" className="life-one-photo table-cell modal">
        {data}
      </a>
    );
  }
}

When there is only images not video everything works correct, but with video is doing strange things multiple same videos on page etc..

You can check source and test it yourself: https://github.com/Huvik/InstagramScroll

Upvotes: 2

Views: 8169

Answers (1)

huv1k
huv1k

Reputation: 294

I fixed it,

React don't update 

 <video> from <source>

there should be only

 <video src=""/>

Then react change video source

Upvotes: 10

Related Questions