在 Facebook 中播放嵌入的 mp4 视频，点赞或使用 Flash 分享答案

【问题标题】：Playing back an embedded mp4 video in a Facebook like or share using Flash在 Facebook 中播放嵌入的 mp4 视频，点赞或使用 Flash 分享
【发布时间】：2012-09-19 09:15:19
【问题描述】：

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

我的理解是，我只需要在被点赞/分享的 URL 上have the right Open Graph <meta> tags in place。但是，我尝试了几组不同的<meta> 标签，当我将 URL 粘贴到我的状态更新并发布时，视频仍然没有嵌入。它确实嵌入了来自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 似乎正确地解析了这一点，因为它显示在 Type of Share -> Video 下：

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

由于我的og:video 标签中有video/mp4 后备，我在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: 元标记，我能发现的唯一区别是：

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

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

【问题讨论】：

您不能将这样的播放器嵌入到时间线中。您必须开发自己的视频播放器并将swf 发布到动态消息中。
@Lix - 我很好奇这会有什么不同；我要做的基本上是开发 Flowplayer 已经在做的事情：使用带有 mp4 URL 的 flashvar 并播放它。你可以扩展你的意思吗？我对 Flash 不太了解，所以我可能误解了您的意思。
我没有使用 flowplayer，但我认为它与任何其他开源播放器没有什么不同。我的意思是让您的 SWF 在内部加载视频文件 - 您可以为此使用 flashvars，但即使是 swf 的 URL 也可能包含路径...在 Facebook 方面，他们将看到的只是一个 SWF。 SWF 实际做什么取决于您。
@Lix - 嗯。我觉得这基本上就是这里发生的事情。不过，我会看看 Flowplayer，看看它到底在做什么。另外，我正在尝试做的seems similar to this，显然确实有效。作为第二个问题，有没有办法在这里完全避免使用 Flash 而只是嵌入 mp4？我假设不是，但您可能对此有更多的领域知识。
@Lix - 另外，this person seems to be using flowplayer 以完全相同的方式，并且（显然？）它有效。那篇文章确实有更多涉及 config 的 flowplayer。我会试验一下。

标签： facebook facebook-like facebook-opengraph embedded-video

【解决方案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>标签

使用 movie 为og:type 工作。我最初使用的是video 和video.other。这些可能也有效，但使用电影绝对对我有用。
以下og: 属性不是嵌入所必需的：fb:app_id、og:video:width、og:video:height。
注意 URLEncoded file 查询参数。需要这样做应该是相当明显的，但请记住分别对参数值进行编码。 autoplay=true 之前的 & 符号 (&) 在添加到页面标记之前是 XMLEncoded。在 Facebook 调试器的“对象属性”部分中查看与符号时，它被正确解码。
在单独的子域上托管内容和共享 URL 无关紧要。可能导致问题的唯一域问题是 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 提供服务。

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

【讨论】：

【解决方案2】：

仅供参考的视频/mp4 目前在 2014 年在这里有效。

查看this page (ctrl-f mp4) 上提供的元数据：

【讨论】：

【解决方案3】：

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

视频的 MIME 类型。 application/x-shockwave-flash 或 video/mp4。

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

【讨论】：