从
Facebook docs开始,嵌入Facebook视频似乎很容易.但是,< div id =“fb-root”>< / div>必须在脚本和fb-video类div之前(从我观察到的).因此,如果我想要嵌入视频,我必须做以下事情：
<div className="card-video-wrapper">
<div id="fb-root"></div>
<script>(function(d,s,id) {
var js,fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js,fjs);
}(document,'script','facebook-jssdk'));</script>
<div className="fb-video" data-href="my-video-url" data-show-text="false" data-autoplay="true"></div>
</div>
我首先要知道< div id =“fb-root”>< / div>并且脚本应该在开始的body标签之后,但是以这种方式,视频保持隐藏在页面的顶部.
当我想嵌入多个Facebook视频时问题就出现了：
<div className="card-video-wrapper">
<div id="fb-root"></div>
<script>(function(d,'facebook-jssdk'));</script>
<div className="fb-video" data-href="my-video-url-1" data-show-text="false" data-autoplay="true"></div>
</div>
<div className="card-video-wrapper">
<div id="fb-root"></div>
<script>(function(d,'facebook-jssdk'));</script>
<div className="fb-video" data-href="my-video-url-2" data-show-text="false" data-autoplay="true"></div>
</div>
在这种情况下,不显示第二个.
可能是< div id =“fb-root”>< / div>超过一次放置,但正如我所说,视频是隐藏的.我们来看一个例子：
<body>
<div id="fb-root"></div>
<script>(function(d,'facebook-jssdk'));</script>
...
<div className="card-video-wrapper">
<div className="fb-video" data-href="my-video-url-1" data-show-text="false" data-autoplay="true"></div>
</div>
<div className="card-video-wrapper">
<div className="fb-video" data-href="my-video-url-2" data-show-text="false" data-autoplay="true"></div>
</div>
...
</body>
使用导航器控制台检查我看到这些样式应用于fb-root层的子节点：
position: absolute; top: -10000px; height: 0px; width: 0px;
嵌入多个Facebook视频的方法是什么？
编辑：
人们会认为它必须与CSS相关.但是,即使删除所有CSS规则,我也会看到相同的问题,当< div id =“fb-root”>< / div>时,视频不会显示(即使只是一个视频)并且脚本放在起始正文标记之后.
另一方面,我用一个简单的页面测试它(如@hackerrdave建议的那样),并且它有效.现在我想知道可能是什么问题.它是一个React应用程序,使用一些Framework7组件(我不确定这是否相关).
解决方法
使用React是相关的,因为第一个DOM渲染不包含任何fb-video元素.
问题是当组件接收要渲染的元素时,将呈现fb-video元素.然后,当SDK加载时,没有要呈现的视频.如果我在收到元素后加载SDK,则会显示视频.
编辑：
感谢@CBroe的提示.更好的解决方案是使用FB.XFBML.parse();在componentDidMount和/或componentDidUpdate功能.通过这种方式,我可以把< div id =“fb-root”>< / div>和身体标签后的脚本.
componentDidMount() {
FB.XFBML.parse();
}
componentDidUpdate() {
FB.XFBML.parse();
}
