在Facebook中播放嵌入式mp4视频或使用Flash共享
Rob*_*ska 28 facebook embedded-video facebook-like facebook-opengraph
我有一个H.264编码的mp4文件,当我提供服务的页面被喜欢或共享时,我试图将其嵌入到Facebook帖子中.
我的理解是,我只需要在喜欢/共享的URL上使用正确的Open Graph <meta>标签.但是,我已经尝试了几组不同的<meta>标签,当我将URL粘贴到状态更新并发布时,视频仍未嵌入.它确实嵌入了og:image属性中的图像,但点击图像只是将用户关闭og:url.
当我使用Facebook调试器工具时,这是它为Raw 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似乎正确解析了这一点,因为它显示在Type of Share - > Video下:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
当我直接进入flash player 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 <meta>和<link>标签(例如title,video_src),看看它是否会接他们回家.它没.
缓存刷新
我?fbrefresh=1在Facebook调试器中传递了一个URL,以确保清除了URL的缓存版本.这确实导致最新的元信息被拉入,但仍然没有嵌入.
iPad的
由于video/mp4我的og:video标签中有后备,我在iPad应用程序中查看了我的Facebook新闻源.令人兴奋的是,缩略图图像上有一个小的播放按钮.但是,触摸播放按钮会导致重定向到共享网址,而不是内嵌播放视频.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:元信息的山姆吗？ YouTube的共享网址
.swf本身并不直接,但它是Flash内容:
Run Code Online (Sandbox Code Playgroud)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实际上位于不同的域上.我有一种感觉,这是罪魁祸首.我现在正在移动一些东西试试看.我已经更新了上面的元标记数据.由于没有预先做出这种观察,感觉有点羞怯.
Rob*_*ska 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&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播放器需要购买许可用于商业用途 - 请确保在必要时获得一个.)
打开Graph <meta>标签
- 使用电影为...工作
og:type.我最初使用video和video.other.那些可能也有效,但使用电影肯定对我有用. - 下面的
og:性质没有必要嵌入:fb:app_id,og:video:width,og:video:height. - 请注意URLEncoded
file查询参数.需要做到这一点应该是相当明显的,但请记住分别编码参数值.在添加到页面标记之前,ampersand(&)之前autoplay=true是XMLEncoded.在Facebook调试器的"对象属性"部分中查看&符号时,正确解码了&符号. - 在不同的子域上托管内容和共享URL 并不重要.可能导致问题的唯一域关注点在Flash播放器本身内,并且可以通过
crossdomain.xml在内容服务器上正确配置来避免.
Facebook调试工具观察
- 在调试工具的部分'股份类别’是略微误导:
这是它表明,当我有两个application/x-shockwave-flash和video/mp4类型.我原以为它在这个列表中有两个项目,但它只有第二个.尽管如此,Flash播放器仍然嵌入了. - 我最初想知道当Facebook看到它显示的所有内容都表示为unicode时,Facebook是否遇到了URLEncoded参数:
但是,看起来这不是问题.不要让它混淆你.
HTTPS
上面的代码没有嵌入https Facebook浏览.此外,
og:video:secure_url元属性不起作用(可能是由于此).最后我做什么是服务于flash播放器和它的源MP4file通过https参数.生成的元标记看起来像:
Run Code Online (Sandbox Code Playgroud)<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服务.
希望这会帮助其他人避免在调试和了解所有这些时遇到的死胡同和红色鲱鱼.
| 归档时间： |
|
| 查看次数： |
23261 次 |
| 最近记录： |