facebook - 使用 Flash 在 Facebook 赞或分享中播放嵌入的 mp4 视频

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

我有一个 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>标签(例如 titlevideo_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:元标记,我能发现的唯一区别是:
  • YouTube 的 og:urlog:video从相同的域和子域 ( www.youtube.com ) 提供服务。我的服务来自同一个域,但不同的子域(媒体:content.example.com,播放器:static.example.com)。 子域是否必须在所有 og: 中都相同?元信息?
  • YouTube 的共享 URL 不是直的 .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&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 .我最初使用的是 videovideo.other .这些可能也有效,但使用电影肯定对我有用。
  • 以下og:属性是 不是 嵌入所需:fb:app_id , og:video:width , og:video:height .
  • 请注意 URLEncoded file查询参数。需要这样做应该是相当明显的,但请记住单独对参数值进行编码。 & 之前的与号 ( autoplay=true )在添加到页面标记之前是 XMLEncoded。在 Facebook 调试器的“对象属性”部分查看它时,与号被正确解码。
  • 上托管内容和共享网址单独的子域无关紧要 .唯一可能导致问题的域问题是 Flash 播放器本身,可以通过正确配置的 crossdomain.xml 避免。在内容服务器上。

  • Facebook 调试器工具观察
  • Debugger Tool的“共享类型”部分有点误导:
    video
    这是我同时拥有 application/x-shockwave-flash 时显示的内容和 video/mp4类型。我本来希望它在这个列表中有两个项目,但它只有第二个。尽管如此,Flash 播放器仍然是嵌入式的。
  • 当我看到它显示所有表示为 unicode 的内容时,我最初想知道 Facebook 是否被 URLEncoded 参数 catch 了:
    unicorn^H^Hde
    不过,看起来这不是问题。不要让它迷惑你。

  • HTTPS
  • 上面的代码没有嵌入 https Facebook 浏览。此外, 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&amp;autostart=true" />
    
    og:video是唯一需要通过 https 的; og:image , og:url等仍然可以通过 http 提供服务。

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

    关于facebook - 使用 Flash 在 Facebook 赞或分享中播放嵌入的 mp4 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12623865/

    相关文章:

    objective-c - 在 Facebook iOS 3.1.1 SDK 中使用 FBSession openActiveSessionWithReadPermissions 处理无效的 accessToken

    ios - ReplayKit分享视频到facebook没有评论

    Android/Facebook - 设备上的 invalid_key,但不是模拟器上的

    javascript - prettyPhoto灯箱社交工具: all images have the same number of Facebook likes

    facebook - 在 FB.init 中设置用户(访问 token )

    html - 如何在 HTML5 中包含多个 XML 命名空间

    javascript - 为什么在使用 jQuery 时将这些奇怪的字符插入到 Facebook iframe 中? €‹

    node.js - 为什么我无法将其发布到我用户的 Facebook 墙上?

    javascript - 许多 facebook 喜欢页面上的按钮,异步

    html - Google Plus 共享对话框显示错误图像,使用 OpenGraph 元标记