28

我有一个 H.264 编码的 mp4 文件,当提供它的页面被点赞或共享时,我试图将其嵌入到 Facebook 帖子中。

我的理解是,我只需要在被喜欢/共享的 URL 上放置正确的 Open Graph<meta>标签。但是,我尝试了几组不同的<meta>标签,当我将 URL 粘贴到我的状态更新并发布时,视频仍然没有嵌入。它确实嵌入了og:image属性中的图像,但是单击图像只会将用户传递给og:url.

当我使用Facebook Debugger 工具时,它为Raw Open Graph Document Information显示的内容如下:

Meta Tag:   <meta property="fb:app_id" content="000000000000000" />
Meta Tag:   <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag:   <meta property="og:title" content="Example Page" />
Meta Tag:   <meta property="og:description" content="Example Description" />
Meta Tag:   <meta property="og:site_name" content="Example" />
Meta Tag:   <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag:   <meta property="og:type" content="video.other" />
Meta Tag:   <meta property="og:video:width" content="400" />
Meta Tag:   <meta property="og:video:height" content="300" />
Meta Tag:   <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag:   <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag:   <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag:   <meta property="og:video:type" content="video/mp4" />
Meta Tag:   <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag:   <meta property="og:video:type" content="text/html" />

上面的值已被替换为虚拟值,但它们都是有效的链接。

Facebook 似乎正确地解析了这一点,因为它显示在Type of Share -> Video下:

status: Video embedding on Facebook enabled
1:  application/x-shockwave-flash
2:  text/html

当我直接转到 Flash 播放器 url ( http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d) 时,视频可以正确播放(嵌入在 Flash 播放器中)。

我尝试过/考虑过的事情:

跳过 Flash 播放器

最初我什至在列表中都没有 Flash 播放器,og:video而是尝试先使用 mp4 文件。Facebook 没有选择它并将喜欢/分享视为普通链接分享。

白名单

在允许嵌入视频之前,必须将应用程序/域列入白名单。这不再是必要的了。我没有将我的域列入白名单。

HTTPS

一些消息来源说,正在使用的 Flash 播放器需要通过 HTTPS 托管。我的研究表明,这仅适用于用户通过 HTTPS 浏览 Facebook 的情况,而我在测试时没有这样做过。

我目前正在使用支持 HTTPS 的 Flash 播放器运行一些测试,以查看是否有任何变化。

旧标签

最糟糕的是,我尝试添加较旧的 Facebook <meta><link>标签(例如titlevideo_src),看看它是否会选择它们。它没有。

缓存刷新

?fbrefresh=1在 Facebook 调试器中传递了 URL 和 URL,以确保 URL 的缓存版本被清除。这确实导致最新的元信息被拉入,但仍然没有嵌入。

iPad

因为我的标签中有video/mp4后备og:video,所以我在 iPad 应用程序中查看了我的 Facebook 新闻提要。令人兴奋的是,缩略图上覆盖了一个小播放按钮。但是,触摸播放按钮会导致重定向到共享 URL,而不是内联播放视频。iPad 上的 Safari 具有相同的行为(但没有播放按钮覆盖)。

文档命名空间

我将适当的 Open Graph / Facebook 命名空间添加到我的标记中:

<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">

但它似乎没有效果。我不认为他们是必需的。


有什么我在这里想念的吗?我觉得到目前为止我发现的很多资源可能已经过时了,因为 Facebook 已经多次更改了他们的 API,所以我可能错过了一个新的要求。

如何让视频在 Facebook 时间线中嵌入和播放?


看看 YouTube 的og:元标签,我能发现的唯一区别是:

  1. YouTubeog:urlog:video来自同一域子域 ( www.youtube.com)。我的服务来自同一个域,但不同的子域(媒体:content.example.com,播放器:) static.example.com子域是否必须与所有og:元信息相同?
  2. YouTube 的分享 URL 本身并不是直截了当.swf的,但它是 Flash 内容:

    rob@uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt
      % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                     Dload  Upload   Total   Spent    Left  Speed
    100  4242  100  4242    0     0  43522      0 --:--:-- --:--:-- --:--:-- 55815
    rob@uvm:~$ file yt
    yt: Macromedia Flash data (compressed), version 10
    

刚刚意识到我的一个 URL 实际上位于不同的域中。我有一种感觉,那就是罪魁祸首。我现在正在移动一些东西来尝试一下。我已经更新了上面的元标记数据。没有提前做出这个观察感到有点不好意思。

4

3 回答 3

21

这就是最终为我工作的东西。

<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">

<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&amp;autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">

<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">

一些观察和有用的信息:

Flash播放器

  • 我切换到使用JWPlayer 是因为它的查询参数 flashvars 配置比FlowPlayer稍微简单一些。我想我可以让 FlowPlayer 更努力地工作。JWPlayer 还有一个很好的 Facebook 嵌入指导页面(注意:许多 Flash 播放器需要购买许可证才能用于商业用途 - 确保在必要时获得一个。)

打开图形<meta>标签

  • 使用电影og:type. 我最初使用videovideo.other。那些可能也有效,但使用电影肯定对我有用。
  • 嵌入不需要以下属性og::, , .fb:app_idog:video:widthog:video:height
  • 请注意URLEncoded file查询参数。需要这样做应该是相当明显的,但请记住分别对参数值进行编码。之前的 & 符号 ( &) 在autoplay=true添加到页面标记之前是 XML 编码的。在 Facebook 调试器的“对象属性”部分中查看与符号时,它被正确解码。
  • 在不同的子域上托管内容和共享 url并不重要。唯一可能导致问题的域问题是 Flash 播放器本身,并且可以通过crossdomain.xml在内容服务器上正确配置来避免。

Facebook 调试器工具观察

  • Debugger Tool的“共享类型”部分有点误导: 视频 这是我同时拥有application/x-shockwave-flashvideo/mp4类型时显示的内容。我本来希望它在这个列表中有两个项目,但它只有第二个。尽管如此,Flash 播放器仍然是嵌入式的。
  • 当我看到 Facebook 将所有内容都显示为 unicode 时,我最初想知道 Facebook 是否正在使用 URLEncoded 参数: 独角兽^H^Hde 但是,看起来这不是问题。不要让它混淆你。

HTTPS

  • 上面的代码没有嵌入 https Facebook 浏览。此外,og:video:secure_url元属性不起作用可能是因为这个)。我最终做的是通过 https 为 flash 播放器及其源 mp4 参数提供服务。file生成的元标记看起来像:

    <meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&amp;autostart=true" />
    

    og:video唯一需要通过 https 的;og:image,og:url等仍然可以通过 http 提供服务。

希望这能帮助其他人避免我在调试和学习所有这些时遇到的死胡同和红鲱鱼。

于 2012-10-01T21:29:45.440 回答
4

FYI video/mp4 目前在 2014 年在这里有效。

请参阅此页面上提供的元数据(ctrl-f mp4):

于 2014-06-23T17:51:44.937 回答
1

好像 facebook 只接受 application/x-shockwave-flash 或 video/mp4 而不是 text/html。

视频的 MIME 类型。应用程序/x-shockwave-flash 或视频/mp4。

https://developers.facebook.com/docs/sharing/webmasters

于 2016-11-21T15:09:38.857 回答