我有一个 H.264 编码的 mp4 文件,当提供它的页面被喜欢或共享时,我试图将其嵌入到 Facebook 帖子中。
我的理解是我只需要 have the right Open Graph <meta>
tags in place在被喜欢/分享的 URL 上。但是,我尝试了几组不同的 <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 似乎正确解析了这一点,因为它显示在共享类型 -> 视频下:
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 player list 并试图首先使用 mp4 文件。 Facebook 没有接受它并将喜欢/分享视为简单的链接分享。白名单
在允许嵌入视频之前,必须将应用程序/域列入白名单。 This is no longer necessary .我没有将我的域列入白名单。
HTTPS
一些消息来源说,正在使用的 Flash 播放器需要通过 HTTPS 托管。我的研究表明这仅适用于用户通过 HTTPS 浏览 Facebook 的情况,我在测试时没有这样做。
我目前正在使用 HTTPS 服务的 Flash 播放器运行一些测试,以查看是否有任何变化。
旧标签
为了它,我尝试了 adding older Facebook
<meta>
和 <link>
标签(例如 title
, video_src
)看看它是否会捡起来。它没。缓存刷新
我通过了
?fbrefresh=1
连同 Facebook 调试器中的 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:
元标记,我能发现的唯一区别是:og:url
和 og:video
从相同的域和子域 ( www.youtube.com
) 提供服务。我的服务来自同一个域,但不同的子域(媒体:content.example.com
,播放器:static.example.com
)。 子域是否必须在所有 og:
中都相同?元信息? .swf
本身,但它是闪存内容: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 实际上位于不同的域中。我有一种感觉,那就是罪魁祸首。我现在正在移动一些东西来尝试一下。我已经更新了上面的元标记数据。不提前进行此观察感到有点害羞。
最佳答案
这就是最终对我有用的东西。
<!-- 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&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播放器
打开图
<meta>
标签 og:type
.我最初使用的是 video
和 video.other
.这些可能也有效,但使用电影肯定对我有用。 og:
属性是 不是 嵌入所需:fb:app_id
, og:video:width
, og:video:height
. file
查询参数。需要这样做应该是相当明显的,但请记住单独对参数值进行编码。 &
之前的与号 ( autoplay=true
)在添加到页面标记之前是 XMLEncoded。在 Facebook 调试器的“对象属性”部分查看它时,与号被正确解码。 crossdomain.xml
避免。在内容服务器上。 Facebook 调试器工具观察
这是我同时拥有
application/x-shockwave-flash
时显示的内容和 video/mp4
类型。我本来希望它在这个列表中有两个项目,但它只有第二个。尽管如此,Flash 播放器仍然是嵌入式的。 不过,看起来这不是问题。不要让它迷惑你。
HTTPS
og:video:secure_url
元属性不起作用 ( maybe due to this )。我最终做的是同时为 Flash 播放器提供服务 和 它的源 mp4 file
https 上的参数。生成的元标记如下所示:<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />
og:video
是唯一需要通过 https 的; og:image
, og:url
等仍然可以通过 http 提供服务。 希望这会帮助其他人避免我在调试和学习所有这些时遇到的死胡同和红鲱鱼。
关于facebook - 使用 Flash 在 Facebook 赞或分享中播放嵌入的 mp4 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12623865/