埋め込みmp4ビデオをFacebookで再生するか、Flashを使用して共有する
H.264でエンコードされたmp4ファイルがあり、それを提供しているページが「いいね！」または「共有」されているときにFacebookの投稿に埋め込もうとしています。
私が理解しているのは、いいね/共有されているURLで 適切なOpen Graph <meta>タグを配置する が必要なだけだということです。ただし、<meta>タグのいくつかの異なるセットを試しましたが、URLをステータス更新に貼り付けて投稿しても、ビデオはまだ埋め込まれていません。 og:imageプロパティの画像は埋め込まれますが、画像をクリックすると、ユーザーはog:urlに渡されます。
Facebook Debuggerツール を使用すると、Raw Open Graph Document Informationの表示は次のようになります。
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リストにフラッシュプレーヤーさえ持っておらず、最初にmp4ファイルを使用しようとしていました。 Facebookはそれをピックアップせず、高評価/共有をプレーンリンク共有として扱いました。
ホワイトリスト
ある時点で、埋め込みビデオを許可する前に、アプリ/ドメインをホワイトリストに登録する必要がありました。 これはもう必要ありません 。ドメインをホワイトリストに登録していません。
[〜＃〜] https [〜＃〜]
一部の情報筋は、使用されているFlash PlayerはHTTPS経由でホストされる必要があると述べています。私の調査によると、これはユーザーがHTTPS経由でFacebookを閲覧している場合にのみ当てはまることを示しています。
私は現在、HTTPSが提供するフラッシュプレーヤーを使用していくつかのテストを実行し、変更があるかどうかを確認しています。
古いタグ
全体として、私は 古いFacebookを追加する<meta>および<link>タグ（例title、video_src）を試してみて、それらをピックアップ。それはしませんでした。
キャッシュの更新
Facebookデバッガーで?fbrefresh=1を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:urlとog:videoは、同じドメインおよびサブドメイン（www.youtube.com）から提供されます。鉱山は同じドメインから提供されますが、サブドメインは異なります（メディア：content.example.com、プレーヤー：static.example.com）。 すべてのog:メタ情報でサブドメインがsamである必要がありますか？ YouTubeの共有URLは、そのままでは
.swfではありませんが、Flashコンテンツです：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つが実際には別のドメインにあることに気づきました。私は犯人だと感じています。私はそれを試すために今いくつかのものを動かしています。上記のメタタグデータを更新しました。 この観察を前もって行わなかったので、少し羊のように感じます。
これが私のために働いた結果です。
<!-- 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プレーヤーには商用利用のために購入したライセンスが必要です-必要に応じて取得してください）
グラフを開く<meta>タグ
- movieの使用は
og:typeで機能しました。私は元々videoとvideo.otherを使用していました。それらもおそらく機能しますが、映画を使用することは間違いなくうまくいきました。 - 埋め込みに必要な
og:プロパティは不要でした：fb:app_id、og:video:width、og:video:height。 - URLEncoded
fileクエリパラメータに注意してください。これを行う必要があることはかなり明白ですが、パラメーター値を個別にエンコードすることを覚えておいてください。&の前のアンパサンド（autoplay=true）は、ページマークアップに追加される前にXMLEncodeされました。アンパサンドは、Facebookデバッガーの[オブジェクトのプロパティ]セクションで表示すると正しくデコードされました。 - 個別のサブドメインでコンテンツと共有URLをホストすることは問題ではありませんでした。 mightが問題を引き起こす可能性があるという唯一のドメインは、Flash Player自体にあり、正しく設定された
crossdomain.xmlで回避できます。コンテンツサーバー。
Facebook Debugger Toolの観測
- Debugger Tool の「共有の種類」セクションは少し誤解を招くものでした：
![video]()
これは、application/x-shockwave-flashとvideo/mp4の両方のタイプがあるときに表示されたものです。このリストには2つのアイテムがあると思っていましたが、2番目のアイテムしかありませんでした。それにもかかわらず、Flashプレーヤーはまだ埋め込まれています。 - 最初はFacebookがURLEncodedパラメータに追いついているのかと思っていましたが、Unicodeとして表されているすべてが表示されているのがわかりました。
![Unicorn^H^Hde]()
しかし、それは問題ではないようです。混乱させないでください。
これは、
しかし、それは問題ではないようです。混乱させないでください。[〜＃〜] https [〜＃〜]
上記のコードは、https Facebookのブラウジングには組み込まれていません。さらに、
og:video:secure_urlメタプロパティが機能しませんでした（ これが原因である可能性があります ）。最終的に私が行ったのは、フラッシュプレーヤーとの両方のソースmp4fileパラメーターを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経由で提供されていました。
うまくいけば、これが他の人がデバッグとこのすべてについて学んでいるときに遭遇した行き止まりや赤いニシンを回避するのに役立つでしょう。
FYI video/mp4は現在2014年にここで有効です。
このページ （ctrl-f mp4）で提供されるメタを参照してください。
Facebookはapplication/x-shockwave-flashまたはvideo/mp4のみを受け入れ、text/htmlは受け入れないようです。
ビデオのMIMEタイプ。 application/x-shockwave-flashまたはvideo/mp4。