如何在Ruby on Rails+Heroku环境实现Facebook内嵌视频分享？

嘿，我来帮你搞定这个问题！首先得纠正一个关键误区——Shockwave Player早就被完全淘汰了，Facebook现在完全支持标准的HTML5视频内嵌，根本不需要它。你想要的YouTube式内嵌分享效果，核心是让Facebook正确抓取你的视频元数据，同时在页面上部署符合规范的视频播放器。

下面是针对Ruby on Rails + Heroku环境的具体实现步骤：

1. 先确保你的MP4视频符合Facebook规格 #

Facebook对可内嵌的MP4有明确要求，这是基础：

• 编码格式：必须是H.264视频编码 + AAC音频编码（这是HTML5视频的标准，也是Facebook的偏好格式）
• 时长：你的15秒完全符合要求（Facebook支持1秒到240分钟的视频）
• 文件大小：尽量控制在100MB以内，别直接存在Heroku的dyno上（dyno重启会丢失文件），建议用云存储托管。

2. 在Rails中配置Heroku兼容的视频存储 #

Heroku不适合存储用户上传的大文件，推荐用Active Storage + AWS S3（也可以用其他云存储，比如Cloudinary）：

• 先安装Active Storage：运行 rails active_storage:install，然后执行 rails db:migrate 完成数据库迁移
• 在config/storage.yml里配置S3（按照Rails官方指引填写你的AWS密钥、桶名等信息）
• 在config/environments/production.rb中设置 config.active_storage.service = :amazon，指定生产环境用S3存储
• 在你的模型中关联视频附件，比如：

  class VideoPost < ApplicationRecord
    has_one_attached :shareable_video
  end
  

  之后把你的15秒MP4上传到Active Storage即可。

3. 添加Facebook识别所需的Open Graph元数据 #

Facebook的爬虫靠页面的OG标签来生成分享卡片，必须明确标记这是一个视频页面。在你的页面<head>里添加这些ERB动态生成的标签：

<!-- 基础OG信息 -->
<meta property="og:title" content="你的视频标题">
<meta property="og:description" content="你的视频描述文案">
<meta property="og:type" content="video.other"> <!-- 关键：告诉Facebook这是视频类型 -->
<meta property="og:url" content="<%= request.original_url %>"> <!-- 页面的完整URL -->

<!-- 视频专属OG标签 -->
<meta property="og:video" content="<%= url_for(@video_post.shareable_video) %>"> <!-- 视频的直接访问URL -->
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280"> <!-- 你的视频实际宽度，比如1080/720都可以 -->
<meta property="og:video:height" content="720"> <!-- 视频实际高度 -->

<!-- 可选：添加视频缩略图，提升分享视觉效果 -->
<meta property="og:image" content="<%= url_for(@video_post.video_thumbnail) %>">

同时在页面主体添加HTML5视频播放器，让用户可以直接在你的页面播放：

<video controls width="100%" preload="metadata">
  <source src="<%= url_for(@video_post.shareable_video) %>" type="video/mp4">
  你的浏览器不支持HTML5视频播放
</video>

4. 用Facebook工具测试抓取效果 #

Facebook有个分享调试工具，你可以输入你的页面URL，查看爬虫是否正确读取了OG标签和视频信息。它会明确告诉你哪里出问题——比如视频URL无法访问、元数据缺失、跨域限制等。
注意：Heroku免费dyno长时间闲置会休眠，测试前记得访问一下你的页面激活dyno，否则爬虫可能抓不到内容。

5. 处理跨域访问问题 #

如果你的视频存在S3，需要在S3桶的CORS配置中允许Facebook爬虫访问，否则会被拦截。配置示例（JSON格式）：

[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET"],
    "AllowedHeaders": ["*"]
  }
]

这样Facebook的爬虫就能正常获取你的视频文件了。

按照上面的步骤配置后，Facebook分享时就会像YouTube那样显示内嵌的视频预览，用户可以直接在Facebook信息流里播放视频，完全符合你的预期。

内容的提问来源于stack exchange，提问作者James Woodrow