How to autoplay embedded Facebook videos?

前端 未结 8 943
北海茫月
北海茫月 2020-12-17 19:53

This page shows how to create the embed code for any Facebook video to embed them in external websites.

Is there a way to start the playback automatically on page lo

相关标签:
8条回答
  • 2020-12-17 20:28

    As of the latest Facebook SDK today, you are able to autoplay videos passively by adding data-autoplay="true" to the div tag of the embed code.

    Reference: https://developers.facebook.com/docs/plugins/embedded-video-player

    I've just implemented this on my own project and it does work but as of right now it will only play passively (in mute mode). This is a similar experience as what you would see if you were scrolling through your news feed on Facebook. The user has to manually unmute the video.

    I hope this helps.

    0 讨论(0)
  • The answers here are slightly outdated, so just the have the updated answer around, you can see the Facebook Documentation for all the details.

    TL;DR:

    This is how embedding a video from Facebook Looks like:

    <html>
    <head>
      <title>Your Website Title</title> 
    </head>
    <body>
    
      <!-- Load Facebook SDK for JavaScript -->
      <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/en_US/sdk.js#xfbml=1&version=v2.6";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
    
      <!-- Your embedded video player code -->
      <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
        <div class="fb-xfbml-parse-ignore">
          <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
            <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
            <p>How to share with just friends.</p>
            Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
          </blockquote>
        </div>
      </div>
    
    </body>
    </html>
    

    The following html tag lets you set autoplay to true:

    <div class="fb-video" data-href="<video-post-url>" data-autoplay="true">
    

    Default value for data-autoplay is of course false.

    0 讨论(0)
  • 2020-12-17 20:30

    Unfortunately for you Facebook's policies forbid the autoplaying of content (thank god).

    I have attempted to track down the actual policy document but it's been drowned out in the SERPS noise of people talking about it being banned on Facebook!! You can find questions that back this notion up on StackOverflow and WebApps.

    StackOverflow is the official Facebook developer support channel so their users may know more on the topic.

    It's also possible some whizzy jQuery might be able to fake the click, - but facebook updates it's code so often that I doubt any hack would last long.

    Best answer is use YouTube or another channel that allows you so share outside their network. Don't rely on a hacky solution for a network that clearly isn't interested in video being shared beyond it's own borders.

    Users can easily change the privacy settings on their videos, and Facebook will probably try and disrupt the ability to embed their content if it becomes a popular thing to do.

    0 讨论(0)
  • 2020-12-17 20:31

    Since I don't have a video ID, I can't test it, but adding a "play" or "autoplay" parameter may work:

    <object width="400" height="224" >
     <param name="allowfullscreen" value="true" />
     <param name="allowscriptaccess" value="always" />
     <param name="movie" value="http://www.facebook.com/v/xxx" />
     <param name="autoplay" value="true" />
     <embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
       allowscriptaccess="always" allowfullscreen="true" width="400" height="224" autoplay="true">
     </embed>
    </object> 
    
    0 讨论(0)
  • 2020-12-17 20:36

    The best way for me is to use Facebook URL like this: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey

    It's better than the embed url. The video fits in viewport, you can control autoplay with a query string/param.

    0 讨论(0)
  • 2020-12-17 20:42

    For Youtube, add &autoplay=1 at the end of the URL used to autoplay the video. For example:

    If the URL to get to the video is:

    http://www.youtube.com/v/xxx

    The autoplay URL is:

    http://www.youtube.com/v/xxx&autoplay=1

    The above works for Youtube, but Facebook is a little different:

    In the embed portion of the code to autoplay the video on your site add the following parameter:

    <param name="autoplay" value="true">
    

    This method works on other sites as well, mostly those that use a Flash-based video player.

    0 讨论(0)
提交回复
热议问题