如何嵌入多个Facebook视频（使用React） [英] How to embed multiple Facebook videos (with React)
问题描述
从 Facebook文档阅读，嵌入Facebook视频似乎很容易。但是，< div id =fb-root>< / div> 必须在脚本和 fb-video之前 class div（从我观察到的）。所以如果我想嵌入一个视频，我必须做一些像：
Reading from Facebook docs, it seems very easy to embed a Facebook video. However, the <div id="fb-root"></div> must be just before the script and the fb-video class div (from what I've observed). So if I want to embed a video I have to do something like:
<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> ，脚本应该在打开正文标签之后，而以这种方式，视频会隐藏在页面的顶部。
I first thougth that the <div id="fb-root"></div> and the script should go just after the opening body tag, but in this way the video keeps hidden at the top of the page.
当我想嵌入多个Facebook视频时，问题出现在：
The problem comes when I want to embed multiple Facebook videos like:
<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-1" data-show-text="false" data-autoplay="true"></div>
</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-2" data-show-text="false" data-autoplay="true"></div>
</div>
在这种情况下，第二个不显示。
In this case, the second one is not displayed.
可能的是，< div id =fb-root>< / div> 被放置一次，但正如我所说，然后视频被隐藏。我们来看一个例子：
Probably, <div id="fb-root"></div> is supoposed to be placed once, but as I've said, then the video is hidden. Let's see an example:
<body>
<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="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 层：
Inspecting with the navigator console I see these styles applied to the childs of fb-root layer:
position: absolute;
top: -10000px;
height: 0px;
width: 0px;
继续嵌入多个Facebook视频的方式是什么？
What is the way to proceed to embed multiple Facebook videos?
编辑：
有人会认为它必须与CSS相关。然而，即使删除所有CSS规则，我也看到同样的问题，当< div id =fb-root>< / div> ，脚本放在起始body标签之后。
One would think that it has to be related to CSS. However, even removing all CSS rules I see the same problem, the videos are not shown (even just one video) when the <div id="fb-root"></div> and the script are placed after the starting body tag.
另一方面，我已经用一个简单的页面（如@hackerrdave建议），它的作品。现在我想知道可能是什么问题。这是一个React应用程序，使用一些Framework7组件（我不知道这可能是否相关）。
On the other hand, I've tested it with a simple page (as @hackerrdave suggested), and it works. Now I'm wondering what could be the problem. It's a React application, using some Framework7 components (I'm not sure if this could be relevant).
推荐答案
React 是相关的，因为第一个DOM渲染不包含任何 fb-video 元素。
The use of React is relevant, because the first DOM rendering does not contain any fb-video element.
问题是当组件接收要呈现的元素时，会呈现 fb-video 元素。然后，当SDK加载时，没有要呈现的视频。如果我收到元素后加载了SDK，则会显示视频。
The problem is that the fb-video element is rendered when the component receives the elements to render. Then, when the SDK loads, there are no videos to render. If I load the SDK once the elements are received, then the videos are shown.
编辑
感谢@CBroe的提示。一个更好的解决方案是在 FB.XFBML.parse（）; component.html＃componentdidmountrel =nofollow noreferrer> componentDidMount 和/或 componentDidUpdate 功能。这样，我可以在body标签之后放置< div id =fb-root>< / div> 脚本。
Thanks to @CBroe for the tip. A better solution is to use FB.XFBML.parse(); in the componentDidMount and/or componentDidUpdate function. In this way, I can put the <div id="fb-root"></div> and the script after the body tag.
componentDidMount() {
FB.XFBML.parse();
}
componentDidUpdate() {
FB.XFBML.parse();
}
这篇关于如何嵌入多个Facebook视频（使用React）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
