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

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

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

^{Значения, приведенные выше, были заменены фиктивными значениями, но все они действительны.}

Facebook, похоже, правильно разбирает это, так как он отображается в разделе Тип Share → Видео:

Когда я перехожу непосредственно к 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-плеер).

Изначально у меня даже не было флеш-плеера в списке og:video и я пытался сначала использовать файл mp4. Facebook не подбирал его и рассматривал подобное /share как общую ссылку.

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

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

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

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

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

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

Я добавил соответствующие разметки Open Graph/Facebook в свою разметку:

Но это не показало эффекта. Я не думаю, что они требуются.

Есть ли что-то, что мне здесь не хватает? Я чувствую, что многие ресурсы, которые я нашел до сих пор, могут быть устаревшими, так как Facebook несколько раз менял свой API, так что возможно, что я пропустил новое требование.

Как я могу получить видео для вставки и воспроизведения в рамках временной шкалы Facebook?

Взглянув на метатеги YouTube og:, единственные различия, которые я могу обнаружить, следующие:

Просто понял, что один из моих 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&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" немного вводил в заблуждение: Это то, что было показано, когда у меня были типы application/x-shockwave-flash и video/mp4. Я бы ожидал, что в этом списке будет два элемента, но у него только что было второе. Несмотря на это, флеш-плеер все еще встроен.
Вначале мне было интересно узнать, как Facebook догоняет параметры URLEncoded, когда я увидел, что он показывает все, представленное как unicode: Однако, похоже, это не проблема. Не позволяйте этому путать вас.

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