反应视频渲染

Question

我在使用 React 渲染视频时遇到问题。它以某种方式重叠的视频。在源代码中它是正确的，但在页面视图中它不正确。它只发生在一个视频上。每次发生在不同的视频等。

当您签入对象检查器时。我在 php 中有一些工作，但是 React 正在解决这个渲染问题我不完全知道它的浏览器渲染问题还是 reactjs。我在所有浏览器上都试过并做同样的事情。

第二行第二列的视频来源：

<a href="https://instagram.com/p/9QfapSvLHD/" target="_blank" class="life-one-photo table-cell modal" data-reactid=".0.0.">
   <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..0">
     <source src="https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/12136722_988951267856293_201072634_n.mp4" data-reactid=".0.0..0.0">
  </video>
</a>

第二行第四列来源：

<a href="https://instagram.com/p/9HYbUYvLIT/" target="_blank" class="life-one-photo table-cell modal" data-reactid=".0.0.">
  <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..0">
    <source src="https://scontent.cdninstagram.com/hphotos-xaf1/t50.2886-16/12125856_1718151458404599_30943699_n.mp4" data-reactid=".0.0..0.0">
  </video>
</a>

你可以看到来源不同但视频仍然相同，我不知道这里发生了什么。另外，如果用 React 渲染而不是在 php 中需要更多的 cpu。我有相同的东西由 php 渲染并且效果很好， React 创建帖子的代码片段：

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>
    );
  }
}

当只有图像而没有视频时，一切正常，但是视频在页面上出现多个相同的视频等时会做一些奇怪的事情。

你可以查源码自己测试一下： https://github.com/Huvik/InstagramScroll

Answer 1

我修好了，

React 不更新

 <video> from <source>

应该只有

 <video src=""/>

然后反应改变视频源

反应视频渲染

React video rendering

javascript

video

instagram

reactjs

redux