javascript – 如何嵌入多个Facebook视频(使用React)

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

javascript – 如何嵌入多个Facebook视频(使用React)

解决方法

相关推荐