【发布时间】：2015-10-29 11:27:44
【问题描述】：
我在渲染视频时遇到问题。它以某种方式重叠的视频。在源代码中它是正确的，但在页面视图中它不正确。它只发生在一个视频上。每次都发生在不同的视频等上。
当您签入对象检查器时。我在php中有工作的东西，但是react正在做这个渲染问题，我不完全知道它的浏览器渲染问题还是reactjs。我在所有浏览器上都试过了，做同样的事情。
第二行第二列的视频来源：
<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>
第二行第四列的来源：
<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>
您可以看到来源不同但视频仍然相同，我不知道这里发生了什么。另外，如果在使用 react 渲染但不在 php 中渲染时会占用更多的 cpu。我有同样的东西由 php 渲染，效果很好， React sn-p 的代码创建帖子：
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
【问题讨论】：
-
请包含您的部分代码和错误回溯（如果有）。这样我们就可以看到发生了什么。
-
我将编辑帖子和一些图片以发布以查看发生了什么，因为我看不到任何错误
标签： javascript video reactjs instagram redux