Question

我正在使用Vue.js开发网页。

并且此站点需要显示Facebook Live Video。

所以我正在关注Facebook文档：https://developers.facebook.com/docs/plugins/embedded-video-player#example

这很容易，下面的代码可以正常工作。此代码与在facebook文档中编写的代码相同。

<v-layout pt-3>
   <!-- Load Facebook SDK for JavaScript -->
   <div id="fb-root"></div>

   <!-- Your embedded video player code -->
   <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-show-text="false"> 
   </div>
</v-layout>

...

<script>
export default {
    methods: {
        addVideo(url) {
            this.facebookVideoUrl = url;
        }
    }
}
</script>

但是有一个问题。我想像下面那样动态更改Facebook视频。

<v-layout pt-3>
   <!-- Load Facebook SDK for JavaScript -->
   <div id="fb-root"></div>

   <!-- Your embedded video player code -->
   <div class="fb-video" :data-href="videoUrl" data-show-text="false"> 
   </div>
</v-layout>

...

<script>
export default {
    methods: {
        addVideo(url) {
            this.facebookVideoUrl = url;
            FB.XFBML.parse(); // I added this line, but it same...
        }
    }
}
</script>

只有一个文本字段，因此用户可以更改视频URL。然后，我应该展示新视频。但这不起作用...

硬编码的“ data-href”工作正常。但是，当我动态更改它时，它不起作用。

我该如何解决这个问题？

Answer 1

Facebook处理该元素并将其替换为其嵌入代码。在那之后，他们将看不到任何更改。

您可以致电：

 FB.XFBML.parse();

更改data-href的值后，告诉Facebook重新查找嵌入代码。

（文档：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/）

Vue.js，未显示嵌入式Facebook视频

1 个答案: