在Facebook中使用Flash播放嵌入式mp4视频的方法

29
我有一个H.264编码的mp4文件,我想将其嵌入到Facebook帖子中,当喜欢或分享该页面时。
我的理解是,我只需要在被喜欢/分享的URL上放置正确的Open Graph <meta>标签。然而,我已经尝试了几组不同的<meta>标签,但视频仍无法嵌入到状态更新和发布中。它确实嵌入了og:image属性的图像,但点击图片只会将用户传递到og:url
当我使用Facebook调试工具时,这是它显示的原始Open Graph文档信息
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似乎正确解析了这个,因为它显示在分享类型 -> 视频下:

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播放器

最初,我甚至没有在og:video列表中放置Flash播放器,而是首先尝试使用mp4文件。 Facebook没有捕捉到它,并将其视为普通链接分享。

白名单

曾经需要在允许嵌入式视频之前将应用程序/域名列入白名单。 现在不再需要。 我没有将我的域名列入白名单。

HTTPS

一些资料表明,正在使用的 flash 播放器需要在 HTTPS 上托管。我的研究表明,只有当用户在 HTTPS 上浏览 Facebook 时才适用这一点,在我测试时并没有这样做。
我目前正在运行一些测试,使用 HTTPS 服务的 flash 播放器来查看是否有任何变化。
旧标签
为了好玩,我尝试添加 较旧的 Facebook 标记(例如 title , video_src ),以查看是否会拾取它们。它没有。
缓存刷新
我通过 Facebook 调试器中的 URL 传递了一个?fbrefresh = 1 ,以确保清除 URL 的缓存版本。这确实导致了最新的元信息被提取,但仍然没有嵌入。
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay). 文档命名空间 我在我的标记中添加了适当的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. YouTube's og:url and og:video are served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media: content.example.com, player: static.example.com). Does the subdomain have to be the sam across all of the og: meta information?
  2. YouTube's share URL isn't a straight .swf per se, but it is flash content:

    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实际上在另一个域中。我有一种感觉,那就是罪魁祸首。我现在正在移动一些东西来尝试它。我已经更新了上面的元标记数据。感觉有点羞愧,因为没有提前观察到这一点。

您不能将这样的播放器嵌入时间轴。 您需要开发自己的视频播放器,并在动态故事中发布 swf - Lix
@Lix - 我很好奇那会有什么不同;我会做的事情本质上是开发Flowplayer已经在做的事情:使用flashvar和mp4 URL进行播放。你能否详细说明一下你的意思?我对Flash的理解不是很好,所以我可能会误解你的意思。 - Rob Hruska
我没有使用过flowplayer,但我认为它与其他开源播放器并没有太大的区别。我的意思是让你的SWF文件内部加载视频文件 - 你可以使用flashvars来实现这一点,但即使是指向SWF的URL也可以包含路径... 在Facebook的一侧,他们所看到的只是一个SWF文件。SWF实际上所做的事情取决于你。 - Lix
@Lix - 嗯。我觉得这就是这里正在发生的事情。我会看一下Flowplayer并了解它究竟在做什么。此外,我正在尝试做的似乎类似于这个,它显然是有效的。作为一个次要问题,是否有任何方法可以完全避免Flash在这里只嵌入mp4?我认为不行,但您可能在该领域拥有更多的知识。 - Rob Hruska
@Lix - 此外,这个人似乎正在以完全相同的方式使用flowplayer,而且(显然?)它起作用了。该文章确实有一个更复杂的config用于flowplayer。我会尝试一下。 - Rob Hruska
啊..是的...我看到你只是引用了SWF文件...我不太确定这里还有什么其他的事情发生... - Lix
3个回答

20
这是最终对我起作用的方案。
<!-- 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播放器需要购买许可证才能商业使用-如果必要,请确保您获得了许可证。)

Open Graph <meta> 标签

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

Facebook 调试工具 观察

  • Debugger Tool的“分享类型”部分有些误导: video 当我同时使用application/x-shockwave-flashvideo/mp4类型时,它显示的就是这个样子。我本来期望它在列表中显示两个条目,但只显示了第二个。尽管如此,Flash播放器仍被嵌入。
  • 一开始我想知道Facebook是否被URLEncoded参数所捆绑,因为我看到它把所有内容都表示为Unicode: unicorn^H^Hde 然而,看起来这不是问题。不要被它搞混了。

HTTPS


HTTPS是HTTP协议的安全版本,它通过使用SSL/TLS协议对数据进行加密,确保数据在传输过程中不会被篡改或窃取。在网站上启用HTTPS可以提高用户数据的安全性,并且可以获得SEO优势。
  • The code above doesn't embed with https Facebook browsing. Additionally, the og:video:secure_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter over https. The resulting meta tag looked something like:

    <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" />
    

    The og:video was the only one that needed to be over https; og:image, og:url, etc. were okay still being served over http.

希望这能帮助其他人避免我在调试和学习过程中遇到的死胡同和误导。


4

提供信息,截止2014年video/mp4格式仍然有效。

请参考此页面中提供的元数据(在页面中搜索mp4):


1

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接