fb-video change url and reload player at runtime (without page refresh)

问题

How do I change the video URL of fb-video at runtime and make the player reload the video without page refresh:

    <div id="fb-root" style="height: auto"></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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-video"
         data-href="https://www.facebook.com/abcxyz/videos/vb.123/123/?type=1"
         data-allowfullscreen="true"></div>

That is the code I have now in the HTML that works as the page is loaded. I just want to know now if its possible to somehow change the data-href then make the Facebook embedded video player point to a new video.

回答1:

Call the JavaScript SDK's FB.XFBML.parse() method after changing the data-href attribute's value.

Here's some documentation:

http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

I tried to create a CodePen or JSBin example, but Facebook's SDK script doesn't play nicely with sandboxed iframes (it tries to change document.domain, which isn't allowed), so nothing would load. This approach does work for me in a current project, though.

来源：https://stackoverflow.com/questions/32564069/fb-video-change-url-and-reload-player-at-runtime-without-page-refresh