3

I am developing a web page using Vue.js.

And this site need to show Facebook Live Video.

So I am following facebook document: https://developers.facebook.com/docs/plugins/embedded-video-player#example

It's easy and below code works fine. This code is the same code written in facebook doc.

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

But there is one problem. I want to change the Facebook video dynamically like below.

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

There is one text field, so the user can change the video URL. Then I should show the new video. But it doesn't work...

The hard coded "data-href" works fine. But when I change it dynamically, it doesn't work.

How can I solve this problem???

yoonhok
  • 1,800
  • 2
  • 18
  • 36
  • 1
    I would suggest wiping out the dom element and re-injecting it with the new URL. Look at this answer for more details. https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag – Chris Hawkes Jul 17 '19 at 15:01

1 Answers1

1

Facebook processes the element and replaces it with their embed code. They won't see changes made after that point.

You can call:

 FB.XFBML.parse();

after changing the data-href value to tell Facebook to look for embed codes again.

(Docs: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/)

ceejayoz
  • 165,698
  • 38
  • 268
  • 341
  • @yoonhok I suspect Facebook's blowing away your DOM elements and replacing them with the embed code. You may be able to put the embed within another element, and force it to be recreated. – ceejayoz Jul 17 '19 at 15:43