H.264でエンコードされたmp4ファイルがあり、それを提供しているページが「いいね」または「共有」のときにFacebookの投稿に埋め込まれようとしています。
私の理解では、いいね/共有されているURLに適切なOpenGraph<meta>
タグを配置する必要があるだけです。ただし、いくつかの異なるタグセットを試しましたが<meta>
、URLをステータスアップデートに貼り付けて投稿しても、ビデオが埋め込まれていません。プロパティから画像が埋め込まれog:image
ますが、画像をクリックすると、ユーザーはに渡されog:url
ます。
Facebook Debuggerツールを使用すると、RawOpenGraphドキュメント情報に対して次のように表示されます。
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 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 Playerに埋め込まれています)。
私が試した/検討したこと:
フラッシュプレーヤーをスキップする
もともと私はリストにフラッシュプレーヤーさえ持っていなかったし、og:video
最初にmp4ファイルを使おうとしていました。Facebookはそれを取り上げず、like/shareをプレーンリンク共有として扱いました。
ホワイトリストへの登録
ある時点で、埋め込みビデオが許可される前に、アプリ/ドメインをホワイトリストに登録する必要がありました。これはもう必要ありません。ドメインをホワイトリストに登録していません。
HTTPS
一部の情報筋によると、使用されているフラッシュプレーヤーはHTTPS経由でホストする必要があります。私の調査によると、これはユーザーがHTTPS経由でFacebookを閲覧している場合にのみ適用されますが、これはテスト時に行ったことはありません。
私は現在、HTTPSサービスのフラッシュプレーヤーでいくつかのテストを実行して、何かが変更されているかどうかを確認しています。
古いタグ
それの一体のために、私は古いFacebook <meta>
と<link>
タグ(例えばtitle
、video_src
)を追加して、それがそれらを拾うかどうかを確認しようとしました。それはしませんでした。
キャッシュの更新
?fbrefresh=1
キャッシュされたバージョンのURLがクリアされたことを確認するために、FacebookデバッガーでURLとともにを渡しました。その結果、最新のメタ情報が取り込まれましたが、それでも埋め込まれていません。
iPad
video/mp4
タグにフォールバックがあるのでog:video
、iPadアプリでFacebookのニュースフィードを確認しました。わくわくすることに、サムネイル画像には小さな再生ボタンがオーバーレイされていました。ただし、再生ボタンをタッチすると、ビデオをインラインで再生するのではなく、共有URLにリダイレクトされました。iPadのSafariも同じ動作をしました(ただし、再生ボタンのオーバーレイはありません)。
ドキュメントの名前空間
適切なOpenGraph/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:
メタ情報のsamである必要がありますか? .swf
YouTubeの共有URL自体は単純ではありませんが、フラッシュコンテンツです。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の1つが実際には別のドメインにあることに気づきました。それが原因だと感じています。私はそれを試すために今いくつかのものを動かしています。上記のメタタグデータを更新しました。この観察を前もって行わなかったことに対して少し羊っぽい感じがします。