2012-09-27 28 views
28

我有一個H.264編碼的mp4文件,我試圖嵌入到Facebook的帖子中,當它提供的頁面是喜歡或共享的。在Facebook上播放嵌入的MP4視頻或使用Flash共享

我的理解是,我只需要have the right Open Graph <meta> tags in place就可以得到喜歡/共享的URL。不過,我已經嘗試了幾組不同的<meta>標籤,並且在將URL粘貼到我的狀態更新併發布時,該視頻仍然沒有嵌入。它確實嵌入了og:image屬性的圖像,但單擊該圖像只是將用戶關閉至og:url

當我使用的Facebook Debugger tool,這裏就是它顯示生的Open Graph文檔信息

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播放器的網址(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播放器,並試圖只使用mp4文件中的第一個。 Facebook沒有拿起它,並將其視爲普通鏈接份額。

白名單

在一個點上的應用/域必須被列入白名單嵌入之前視頻被允許。 This is no longer necessary。我沒有將我的域名列入白名單。

HTTPS

有消息說,正在使用的Flash播放器需要通過HTTPS主辦。我的研究表明,這應該僅適用於用戶通過HTTPS瀏覽Facebook,而我在測試時並未使用HTTPS。

我目前正在使用HTTPS服務的Flash播放器運行一些測試以查看是否有任何更改。

舊代碼

對於它的赫克,我試圖adding older Facebook<meta><link>標籤(例如titlevideo_src),看看它是否會接他們回家。它沒。

緩存刷新

我通過?fbrefresh=1與Facebook的調試器的網址以確保網址的緩存版本得到了清除一起。這確實導致了最新的元信息被吸引,但仍然沒有嵌入。

iPad的

因爲我有我的og:video標籤video/mp4回退,我看着在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: meta標籤,我可以當場唯一的區別是:

  1. YouTube的og:urlog:video都來自同一個域子域(www.youtube.com)提供服務。我的服務來自同一個域名,但不同的子域名(媒體:content.example.com,播放器:static.example.com)。 子域是否必須是所有og:元信息中的sam?
  2. YouTube的份額網址不在一條直線.swf本身,而是它是Flash內容:

    [email protected]:~$ 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 
    [email protected]:~$ file yt 
    yt: Macromedia Flash data (compressed), version 10 
    

就意識到,我的一個URL實際上是在不同的域。我有一種感覺,那就是罪魁禍首。我現在正在移動一些東西來嘗試一下。我已經更新了上面的元標記數據。 感覺有點不好意思,因爲沒有預先做這個觀察。

+0

你不能嵌入這樣的球員到時間軸。您必須開發自己的視頻播放器,並在Feed故事中發佈'swf'。 – Lix

+0

@Lix - 我很好奇這將如何不同;我會在那裏做什麼基本上是開發一些Flowplayer已經在做的事情:用mp4網址帶一個flashvar並回放。你可以擴展你的意思嗎?我對Flash沒有很好的理解,所以我可能會誤解你在說什麼。 –

+0

我沒有使用流水遊戲,但我認爲它與其他任何開放源代碼遊戲玩家沒有什麼不同。我的意思是讓你的SWF **在內部**加載視頻文件 - 你可以使用flashvars來做這件事,但即使是swf的URL也可能包含一條路徑......在Facebook方面,他們看到的只是一個SWF。 SWF的實際功能取決於您。 – Lix

回答

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

的一些觀察和有用的信息:

Flash播放器

  • 我切換到使用JWPlayer因爲它的查詢參數的FlashVars配置是稍微簡單比FlowPlayer的。我想我可以讓FlowPlayer更加努力地工作。 JWPlayer還有一個nice instructional page for Facebook embedding(注:很多Flash播放器需要用於商業用途購買的許可證 - 確保您在需要時獲得一個。)

的Open Graph <meta>標籤

  • 使用電影工作爲og:type。我最初使用videovideo.other。這些可能工作,但使用電影絕對爲我工作。
  • 以下og:性能分別爲而不是嵌入所需:fb:app_id,og:video:width,og:video:height
  • 請注意URLEncodedfile查詢參數。要做到這一點應該是相當明顯的,但要記住分開編碼參數值。在添加到頁面標記之前,autoplay=true之前的&號(&)是XMLEncoded。在Facebook調試器的「對象屬性」部分查看它時,正確解碼了&符號。
  • 上託管內容和共享網址,單獨的子域名並不重要。唯一的域涉及可能導致問題在Flash播放器本身內,並且可以通過內容服務器上正確配置的crossdomain.xml來避免。

Facebook的調試工具觀察

  • Debugger Tool的部分 「股份類型」 被稍微誤導: video 這是它表明,當我有兩個application/x-shockwave-flashvideo/mp4類型。我預計它會在這個列表中有兩個項目,但它只有第二個項目。儘管如此,Flash播放器仍然嵌入。
  • 我最初想知道Facebook是否抓住了URLEncoded參數,當我看到它顯示所有代表爲unicode時: unicorn^H^Hde 但是,看起來這不是問題。不要讓它迷惑你。

HTTPS

  • 上面的代碼不與HTTPS的Facebook瀏覽嵌入。此外,og:video:secure_url元屬性不起作用maybe due to this)。我最終做的是通過https服務flash播放器其源mp4 file參數。由此產生的meta標籤看起來像這樣:

    <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服務。

希望這會幫助其他人避免我在調試和了解所有這些時遇到的死角和紅鯡魚。

4

FYI視頻/ MP4是目前有效的這裏在2014年

見提供this page(CTRL-F MP4)元: