Facebook 开放图嵌入视频问题

Question

我网站的一个页面上有一个 Facebook 分享按钮，这个分享按钮用于分享我网站上的另一个页面。除了共享网站之外，我不希望它执行的唯一特定任务是包含一个嵌入的 Vimeo 视频，该视频也在该特定页面上。因此，有一个 Facebook 共享 post，link 到我的特定页面，但也有一个视频播放。到目前为止，我在这个过程中已经走了很远，现在我的问题只是共享的 post 似乎有正确的标题、描述、图像和视频，但是当按下 "play" 按钮时脸书post。它开始缓冲并具有正确的长度和正确的 Vimeo 标题，但它只是保持缓冲而从未真正播放。

如果我要说出了什么问题，我发现是 Flash 播放器 link，这是错误的，但我无法弄清楚视频的 Vimeo Flash 播放器 link 在哪里.目前我的代码如下所示。

在我不想分享的页面上，我有以下 "open graph" 标签。

<meta property="og:title" content="Test title" />
    <meta property="og:type" content="movie" /> 
    <meta property="og:url" content="http://website.com/siteNum1.html" />
    <meta property="og:description" content="Test description" />

    <meta property="og:image" content="https://i.vimeocdn.com/filter/specialThumbnailImage.png"/>
    <meta property="og:video" content="https://vimeo.com/moogaloop.swf?clip_id=specialID" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:video:width" content="640" />
    <meta property="og:video:height" content="360" />

    <meta property="og:video" content="https://player.vimeo.com/video/specialID?autoplay=1&title=0&byline=0&portrait=0" />
    <meta property="og:video:type" content="video/mp4"/>
    <meta property="og:video:width" content="640" />
    <meta property="og:video:height" content="360" />

在页面上，我有分享按钮的地方集成如下。

<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.9";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="col-lg-4">
                <div class="faceBkShare">
                    <h3>Share on Facebook</h3>
                    <img src="fbPost1.png" alt="fb post inspiration" class="img-responsive center-block">
                    <p>Some text</p>
                    <div class="fb-share-button" data-href="http://website.com/siteNum1.html" data-layout="button" data-size="large" data-mobile-iframe="true">
                    </div>
                </div>
             </div>

我从下面得到灵感question/answer

Answer 1

我发现 Vimeo 有需求 link，他们有一个示例，其中包含您在尝试共享视频并将其 link 到您的网站时需要的所有开放图标签. This is that link

使用这个 link 下面的代码是我最终得到的。

    <meta property="og:site_name" content="My sites name">
<meta property="og:url" content="http://website.com/siteNum1.html">
<meta property="og:type" content="video">
<meta property="og:title" content="Title of site/video">
<meta property="og:description" content="the description">
<meta property="og:image" content="https://longlinkforthumbnailimage.png">
<meta property="og:image:secure_url" content="https://longlinkforthumbnailimage.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
<meta property="og:video:url" content="https://player.vimeo.com/video/SpecialID?autoplay=1">
<meta property="og:video:secure_url" content="https://player.vimeo.com/video/SpecialID?autoplay=1">
<meta property="og:video:type" content="text/html">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
<meta property="og:video:url" content="https://vimeo.com/moogaloop.swf?clip_id=SpecialID&amp;autoplay=1">
<meta property="og:video:secure_url" content="https://vimeo.com/moogaloop.swf?clip_id=SpecialID&amp;autoplay=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">

如果有人遇到和我一样的问题，我希望这对您有所帮助。

Facebook 开放图嵌入视频问题

Facebook open graph embed video issue

javascript

embed

share

facebook

facebook-graph-api