28

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>タグ(例えばtitlevideo_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:メタタグを見ると、私が見つけられる唯一の違いは次のとおりです。

  1. YouTubeog:urlog:videoは、同じドメインサブドメインから提供されます(www.youtube.com)。鉱山は同じドメインから提供されますが、サブドメインが異なります(メディア:content.example.com、プレーヤー:) static.example.comサブドメインは、すべてのog:メタ情報のsamである必要がありますか?
  2. .swfYouTubeの共有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つが実際には別のドメインにあることに気づきました。それが原因だと感じています。私はそれを試すために今いくつかのものを動かしています。上記のメタタグデータを更新しました。この観察を前もって行わなかったことに対して少し羊っぽい感じがします。

4

3 に答える 3

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&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">

いくつかの観察と有用な情報:

フラッシュプレーヤー

  • JWPlayerのクエリ パラメータ flashvars の設定が FlowPlayer の設定よりも少し単純だったので、JWPlayer使用に切り替えました。もう少し努力すれば、FlowPlayer を動作させることができたのではないかと思います。JWPlayer には、Facebook の埋め込みに関する優れた説明ページもあります。(注意: 多くの Flash Player では、商用利用のためにライセンスの購入が必要です。必要に応じてライセンスを取得してください。)

グラフ<meta>タグを開く

  • ムービーの使用は で機能しましたog:type。私はもともと と を使用videoしてvideo.otherいました。それらもおそらくうまくいきますが、映画を使用することは間違いなくうまくいきました。
  • 次のog:プロパティは、埋め込みには必要ありませんでしfb:app_idた: 、og:video:widthog:video:height
  • URLEncoded fileクエリ パラメータに注意してください。これを行う必要があることは明らかですが、パラメーター値を個別にエンコードすることに注意してください。以前のアンパサンド ( &)autoplay=trueは、ページ マークアップに追加される前に XMLEncoded でした。アンパサンドは、Facebook Debugger の [オブジェクト プロパティ] セクションで表示すると、正しくデコードされました。
  • コンテンツと共有 URL を別々のサブドメインでホストしても問題ありませんでした問題を引き起こす可能性のある唯一のドメインの問題は Flash Player 自体にありcrossdomain.xml、コンテンツ サーバー上で正しく構成されていれば回避できます。

Facebook Debugger Tool の観察

  • Debugger Toolの「Type of Share」セクションは、少し誤解を招く ビデオ ものでした。このリストには 2 つの項目があると予想していましたが、2 番目の項目しかありませんでした。それにもかかわらず、Flash Player はまだ埋め込まれています。application/x-shockwave-flashvideo/mp4
  • Facebook がすべてを Unicode として表示しているのを見たとき、私は最初、Facebook が URLEncoded パラメーターに追いついているのだろうかと思っていました。 ユニコーン^H^Hde しかし、それは問題ではないようです。混乱させないでください。

HTTPS

  • 上記のコードは、https Facebook ブラウジングでは埋め込まれません。さらに、og:video:secure_urlメタ プロパティが機能しませんでした(これが原因である可能性があります)。私がやったことは、https経由でフラッシュプレーヤーそのソースmp4パラメーターの両方を提供することでした。file結果のメタ タグは次のようになります。

    <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:videohttps 経由である必要があるのは だけでした。og:imageog:urlなどは、まだ http 経由で提供されていても問題ありませんでした。

願わくば、これが、私がこれらすべてについてデバッグおよび学習しているときに遭遇した行き止まりや赤いニシンを他の人が回避するのに役立つことを願っています。

于 2012-10-01T21:29:45.440 に答える
4

参考までに、ビデオ/mp4 は現在、2014 年にここで有効です。

このページで提供されているメタを参照してください(ctrl-f mp4):

于 2014-06-23T17:51:44.937 に答える
1

Facebook は text/html ではなく application/x-shockwave-flash または video/mp4 のみを受け入れるようです。

ビデオの MIME タイプ。application/x-shockwave-flash または video/mp4 のいずれかです。

https://developers.facebook.com/docs/sharing/webmasters

于 2016-11-21T15:09:38.857 に答える