Question

我有一个H.264编码的mp4文件，当我提供服务的页面被喜欢或共享时，我试图嵌入到Facebook帖子中。

我的理解是，我只需要have the right Open Graph <meta> tags in place关于被喜欢/分享的网址。但是，我已经尝试了几组不同的<meta>代码，当我将网址粘贴到状态更新并发布时，视频仍未嵌入。它确实嵌入了og:image属性中的图片，但点击图片只会将用户转移到og:url。

当我使用Facebook Debugger tool时，此处显示原始打开图形文档信息的内容：

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似乎正确地解析了这一点，因为它显示在分享类型 - ＆gt;视频：

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

当我直接进入Flash播放器网址（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播放器

最初我在og:video列表中甚至没有Flash播放器，并且试图首先使用mp4文件。 Facebook并没有把它拿起并将其作为一个简单的链接份额对待。

白名单

在允许嵌入视频之前，必须将应用/域列入白名单。 This is no longer necessary。我没有将我的域名列入白名单。

HTTPS

有些消息称，使用的Flash播放器需要通过HTTPS托管。我的研究表明，这应该只适用于用户通过HTTPS浏览Facebook的情况，我在测试时没有这样做。

我目前正在使用HTTPS服务的Flash播放器运行一些测试，看看是否有任何变化。

较旧的代码

为此，我尝试了adding older Facebook <meta>和<link>代码（例如title，video_src），看看它是否会接收它们。它没有。

缓存刷新

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

ipad公司

由于我的video/mp4标签中有og:video后备，我在iPad应用中查看了我的Facebook新闻Feed。令人兴奋的是，缩略图图像上有一个小的播放按钮。但是，触摸播放按钮会导致重定向到共享网址，而不是内嵌播放视频。 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:元标记，我发现的唯一区别是：

YouTube的og:url和og:video来自同一个域和子域（www.youtube.com）。我的服务来自同一个域，但不同的子域名（媒体：content.example.com，播放器：static.example.com）。 子域名是否必须是所有og:元信息中的sam？

YouTube的共享网址本身并不是.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

刚才意识到我的某个网址实际上位于不同的域中。我有一种感觉，这是罪魁祸首。我现在正在移动一些东西来尝试一下。我已经更新了上面的元标记数据。 _{因为没有预先做出这个观察而感到有点羞怯。}

Answer 1

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

<!-- 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也有一个nice instructional page for Facebook embedding。 （注意：许多Flash播放器需要购买许可用于商业用途 - 请确保在必要时购买。）

打开图表<meta>代码

使用电影为og:type工作。我最初使用video和video.other。那些可能也可以，但使用电影肯定为我工作。
以下og:属性非常适合嵌入：fb:app_id，og:video:width，og:video:height。
请注意 URLEncoded file查询参数。需要做到这一点应该是相当明显的，但请记住分别编码参数值。在添加到页面标记之前，&之前的＆符号（autoplay=true）是XMLEncoded。在Facebook调试器的“对象属性”部分中查看＆符号时，正确解码了＆符号。
在单独的子域名中托管内容和共享网址无关紧要。可能导致问题的唯一域关注点在Flash播放器本身内，并且可以通过内容服务器上正确配置的crossdomain.xml来避免。

Facebook调试工具观察

Debugger Tool的“共享类型”部分略微误导：这是我同时拥有application/x-shockwave-flash和video/mp4类型时所显示的内容。我原以为它在这个列表中有两个项目，但它只有第二个。尽管如此，Flash播放器仍然嵌入了。
当我看到Facebook显示所有表示为unicode的内容时，我最初想知道Facebook是否遇到了URLEncoded参数：但是，看起来这不是问题。不要让它混淆你。

<强> HTTPS

上面的代码没有嵌入https Facebook浏览。此外， og:video:secure_url元素属性不起作用（maybe due to this）。我最终做的是通过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提供服务。

希望这有助于其他人避免在调试和了解所有这些内容时遇到的死胡同和红色鲱鱼。

Answer 2

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

参见this page上提供的元数据（ctrl-f mp4）：

Answer 3

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

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

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

在Facebook中播放嵌入式mp4视频或使用Flash共享

3 个答案: