Facebook的开放图嵌入视频问题

问题描述:

我在我的网站上的其中一个网页上有一个Facebook分享按钮,这个分享按钮用于分享我的网站上的另一个页面。除了分享网站之外,我唯一不想做的特定任务是包含一个嵌入的Vimeo视频,该视频也位于该特定页面上。因此,有一个Facebook共享文章,链接到我的特定页面,但也有一个视频播放。到目前为止,我在这个过程中已经走得很远了,现在我的问题是共享帖子看起来有正确的标题,描述,图像和视频,但是当按下Facebook帖子上的“播放”按钮时。它开始缓冲,并且具有正确的长度和正确的Vimeo标题,但它只是保持缓冲,并且从不实际播放。Facebook的开放图嵌入视频问题

如果我想说什么是错的,我调查它是Flash播放器链接,这是错误的,但我无法弄清楚视频的Vimeo Flash播放器链接的位置。目前我的代码如下所示。

在页面我不想分享我有以下“打开图”标签。

<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

+0

您使用的两个“视频”网址都会返回HTML文档 - 不是您声明的Flash或mp4。 – CBroe

+0

@CBroe我明白了,但我不完全确定如何包含Vimeo视频,因为我无法找到Flash链接。我可以在其他答案中看到他们有一些特定的Flash网络播放器链接,其中我无法找到我上传的Vimeo视频。 – Sm00rf9000

我想通了,Vimeo的有必要环节,他们都试图分享视频时,你需要打开的图形标记的一个例子,让它链接到你的网站。 This is that 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"> 

我希望这会有所帮助,如果任何人有和我一样的问题。