Подтвердить что ты не робот

Воспроизведение встроенного видео mp4 в Facebook или его использование с помощью Flash

У меня есть файл mp4, закодированный в H.264, который я пытаюсь встроить в сообщение Facebook, когда страница, обслуживающая его, является Liked или Shared.

Я понимаю, что мне просто нужно иметь правильные теги Open Graph <meta> на URL-адрес, который нравится/делится. Тем не менее, я пробовал несколько различных наборов тегов <meta>, и видео по-прежнему не внедряется, когда я вставляю URL-адрес в свое обновление статуса и публикую его. Он вставляет изображение из свойства og:image, но щелчок по изображению просто отключает пользователя до og:url.

Когда я использую инструмент отладки Facebook, вот что он отображает для 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, похоже, правильно разбирает это, так как он отображается в разделе Тип Share → Видео:

status: Video embedding on Facebook enabled
1:  application/x-shockwave-flash
2:  text/html

Когда я перехожу непосредственно к URL-адресу проигрывателя 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 и я пытался сначала использовать файл mp4. Facebook не подбирал его и рассматривал подобное /share как общую ссылку.

Whitelisting

В какой-то момент приложения/домены должны были быть включены в белый список до того, как разрешено встроенное видео. Это больше не требуется. У меня нет белого домена.

HTTPS

В некоторых источниках говорится, что используемый флеш-плеер должен размещаться поверх HTTPS. Мои исследования показывают, что это должно применяться только в том случае, если пользователь просматривает Facebook через HTTPS, который я не тестировал.

В настоящее время я запускаю несколько тестов с Flash-плеером, поддерживающим HTTPS, чтобы узнать, не изменилось ли что-либо.

Старые теги

Для этого я попробовал добавить старые Facebook <meta> и <link> теги (например, title, video_src), чтобы посмотреть, не заберет ли он их. Это не так.

Обновление кэша

Я передал ?fbrefresh=1 вместе с URL-адресом в отладчике Facebook, чтобы убедиться, что кешированная версия URL-адреса очищена. Это привело к тому, что новейшая метаинформация втягивалась, но все равно не встраивалась.

IPad

Поскольку у меня есть резерв video/mp4 в тегах og:video, я просмотрел свой фид новостей в приложении iPad. Удивительно, у миниатюрного изображения была небольшая кнопка воспроизведения, наложенная на нее. Однако прикосновение к кнопке воспроизведения привело к переадресации на URL-адрес общего доступа вместо воспроизведения встроенного видео. Safari на iPad имеет такое же поведение (но без наложения кнопки воспроизведения).

пространства имен документов

Я добавил соответствующие разметки 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). Мины подаются из одного домена, но разные субдомены (media: content.example.com, player: static.example.com). Должен ли субдомен быть сэм во всей метаинформации og:?
  • URL-адрес общего доступа YouTube не является прямым .swf как таковой, но это флэш-контент:

    [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-адресов на самом деле находится в другом домене. У меня такое чувство, что преступник. Сейчас я перебираю кое-что, чтобы попробовать. Я обновил данные метатега выше. Почувствуйте себя немного застенчивым, чтобы не делать это наблюдение впереди.

4b9b3361

Ответ 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&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 player

  • Я переключился на использование JWPlayer, поскольку его параметры параметров flashvars параметров были немного проще, чем FlowPlayer 's. Я думаю, что я мог бы заставить FlowPlayer работать с меньшими усилиями. JWPlayer также имеет красивую учебную страницу для встраивания Facebook. (Примечание: многие Flash-проигрыватели требуют приобретаемой лицензии для коммерческого использования - убедитесь, что вы получили ее, если это необходимо.)

Открытые графики <meta>

  • Использование фильма для og:type. Первоначально я использовал video и video.other. Вероятно, они работают, но использование фильма определенно сработало для меня.
  • Следующие свойства og: были не, необходимые для встраивания: fb:app_id, og:video:width, og:video:height.
  • Обратите внимание на параметр запроса URLEncoded file. Необходимость делать это должна быть достаточно очевидной, но имейте в виду кодирование значений параметров отдельно. Амперсанд (&) перед autoplay=true был XMLEncoded перед добавлением к разметке страницы. Амперсанд был правильно декодирован при просмотре его в разделе "Свойства объекта" в разделе "Отладка".
  • Хостинг содержимого и общий URL-адрес на отдельных поддоменах не имел значения. Единственный домен, который может вызвать проблемы, находится внутри самого флеш-плеера, и его можно избежать с помощью правильно настроенного crossdomain.xml на сервере содержимого.

Наблюдение за инструментом отладки Facebook

  • Инструмент отладчика Раздел "Тип Share" немного вводил в заблуждение: video Это то, что было показано, когда у меня были типы application/x-shockwave-flash и video/mp4. Я бы ожидал, что в этом списке будет два элемента, но у него только что было второе. Несмотря на это, флеш-плеер все еще встроен.
  • Вначале мне было интересно узнать, как Facebook догоняет параметры URLEncoded, когда я увидел, что он показывает все, представленное как unicode: unicorn^H^Hde Однако, похоже, это не проблема. Не позволяйте этому путать вас.

HTTPS

  • Приведенный выше код не встраивается при просмотре https в Facebook. Кроме того, мета-свойство og:video:secure_url не работает (возможно из-за этого). То, что я закончил, - это использовать как flash-плеер , так и его источник mp4 file по сравнению с https. Полученный метатег выглядел примерно так:

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

Надеюсь, это поможет другим избежать тупиков и красных сельдей, с которыми я столкнулся, отлаживая и узнавая обо всем этом.

Ответ 2

Видео FYI/mp4 в настоящее время действует здесь в 2014 году.

См. meta, представленную на этой странице (ctrl-f mp4):

Ответ 3

Похоже, что facebook принимает приложение /x -shockwave-flash или video/mp4 not text/html.

MIME тип видео. Либо приложение /x -shockwave-flash, либо видео /mp 4.

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