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

Question

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

从Facebook文档阅读,嵌入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>

Run Code Online (Sandbox Code Playgroud)

我首先想知道<div id="fb-root"></div>脚本应该在开始的body标签之后,但是这样视频会隐藏在页面的顶部.

当我想嵌入多个Facebook视频时问题就出现了:

<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>

Run Code Online (Sandbox Code Playgroud)

在这种情况下,不显示第二个.

可能<div id="fb-root"></div>会被放置一次,但正如我所说的那样,视频被隐藏了.我们来看一个例子:

<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>

Run Code Online (Sandbox Code Playgroud)

使用导航器控制台检查我看到这些样式应用于fb-root图层的子项:

position: absolute;
top: -10000px;
height: 0px;
width: 0px;

Run Code Online (Sandbox Code Playgroud)

嵌入多个Facebook视频的方法是什么？

编辑:

人们会认为它必须与CSS相关.但是,即使删除所有CSS规则,我也会看到相同的问题,当<div id="fb-root"></div>脚本放在起始正文标记之后,视频不会显示(甚至只显示一个视频).

另一方面,我用一个简单的页面测试它(如@hackerrdave建议的那样),它可以工作.现在我想知道可能是什么问题.它是一个React应用程序,使用一些Framework7组件(我不确定这是否相关).

Answer 1

Man*_*olo 6

React的使用是相关的，因为第一个 DOM 渲染不包含任何fb-video元素。

问题是fb-video当组件接收到要渲染的元素时才渲染元素。然后，当 SDK 加载时，没有要渲染的视频。如果我在收到元素后加载 SDK，则会显示视频。

编辑：

感谢@CBroe 的提示。更好的解决方案是FB.XFBML.parse();在componentDidMount和/或componentDidUpdate函数中使用。这样，我就可以将<div id="fb-root"></div>和脚本放在 body 标签之后。

componentDidMount() {
    FB.XFBML.parse();
}
componentDidUpdate() {
    FB.XFBML.parse();
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年前
查看次数：	1264 次
最近记录：	9 年前