vídeo videos ver subir smart resolucion rapido perder para mejor formato cuál como calidad facebook facebook-like facebook-opengraph embedded-video

videos - Reproducir un video mp4 incrustado en un dispositivo similar a Facebook o compartir usando Flash



ver facebook live en smart tv (3)

Esto es lo que terminó trabajando para mí.

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

Algunas observaciones e información útil:

Reproductor Flash

Etiquetas Open Graph <meta>

  • Usar la película trabajada para og:type . Originalmente estaba usando video y video.other . video.other . Esos probablemente también funcionan, pero usar película definitivamente funcionó para mí.
  • Las siguientes propiedades de og: no fueron necesarias para la incrustación: fb:app_id , og:video:width , og:video:height .
  • Tenga en cuenta el parámetro de consulta de file URLEncoded . Necesitar hacer esto debería ser bastante obvio, pero tenga en cuenta que codifique los valores de los parámetros por separado. El símbolo comercial ( & ) antes de autoplay=true fue XMLEncoded antes de ser agregado al marcado de la página. El ampersand se decodificó correctamente al verlo en la sección "Propiedades del objeto" del depurador de Facebook.
  • Hospedar el contenido y la URL compartida en subdominios separados no importaba . Las únicas inquietudes de dominio que pueden causar problemas se encuentran dentro del propio reproductor flash, y se pueden evitar con un crossdomain.xml configurado crossdomain.xml en el servidor de contenido.

Observaciones de Facebook Debugger Tool

  • La sección "Tipo de recurso compartido" de la herramienta de depuración fue ligeramente engañosa: Esto es lo que mostró cuando tenía los tipos application/x-shockwave-flash y video/mp4 . Hubiera esperado que tuviera dos elementos en esta lista, pero simplemente tuvo el segundo. A pesar de eso, el reproductor flash aún está incrustado.
  • Inicialmente me preguntaba si Facebook estaba atrapado con los parámetros de URLEncoded cuando vi que estaba mostrando todo lo que se representaba como unicode: Sin embargo, parece que eso no es un problema. No dejes que te confunda.

HTTPS

  • El código anterior no se integra con la navegación por https Facebook. Además, la meta propiedad og:video:secure_url no funcionó ( quizás debido a esto ). Lo que terminé haciendo fue servir tanto el reproductor de flash como su parámetro de file fuente mp4 sobre https. La metaetiqueta resultante se veía algo así como:

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

    El og:video era el único que debía estar sobre https; og:image , og:url , etc. estaban bien todavía se sirven en http.

Espero que esto ayude a otros a evitar los callejones sin salida y las pistas falsas con las que me topé mientras me depuraba y aprendía sobre todo esto.

Tengo un archivo mp4 con codificación H.264 que estoy tratando de incrustar en una publicación de Facebook cuando la página que la está publicando es Me gusta o Compartida.

Tengo entendido que solo necesito tener las etiquetas Open Graph <meta> correctas en la URL que se está gustando / compartiendo. Sin embargo, he probado varios conjuntos diferentes de etiquetas <meta> y el video aún no está incrustado cuando pego la URL en mi actualización de estado y la publico. Incrusta la imagen de la propiedad og:image , pero al hacer clic en la imagen, el usuario pasa a og:url .

Cuando uso la herramienta del depurador de Facebook , esto es lo que muestra para la información del documento sin formato abierto :

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

Los valores anteriores se han reemplazado por valores ficticios, pero todos son enlaces válidos.

Facebook parece analizar esto correctamente, ya que se muestra en Tipo de Compartir -> Video :

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

Cuando voy directamente a la URL del reproductor 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 ), el video se reproduce correctamente (incrustado en el reproductor flash).

Cosas que he intentado / considerado:

Omitiendo el reproductor de flash

Originalmente ni siquiera tenía un reproductor flash en la lista de og:video e intentaba usar el archivo mp4 primero. Facebook no lo recogió y lo trató / compartió como un simple recurso compartido de enlace.

Lista blanca

En un punto, las aplicaciones / dominios tenían que incluirse en la lista blanca antes de permitir el video incorporado. Esto ya no es necesario . No he incluido en mi lista blanca mi dominio.

HTTPS

Algunas fuentes dicen que el reproductor flash que se usa debe estar alojado en HTTPS. Mi investigación indica que esto solo debería aplicarse si el usuario está navegando en Facebook a través de HTTPS, lo que no he hecho al realizar la prueba.

Actualmente estoy realizando algunas pruebas con un reproductor flash administrado por HTTPS para ver si algo cambia.

Etiquetas antiguas

Por suerte, intenté agregar etiquetas Facebook <meta> y <link> más antiguas (por ejemplo, title , video_src ) para ver si las video_src . No lo hizo.

Actualización de caché

Pasé un ?fbrefresh=1 junto con la URL en el depurador de Facebook para asegurarme de que la versión en caché de la URL se borró. Eso dio como resultado la obtención de la metainformación más reciente, pero aún no se incrustó.

iPad

Como obtuve el video/mp4 en mis etiquetas de og:video , miré mi fuente de noticias de Facebook en la aplicación del iPad. Emocionantemente, la imagen en miniatura tenía un pequeño botón de reproducción superpuesto. Sin embargo, al tocar el botón reproducir se redirigió a la URL compartida en lugar de reproducir el video en línea. Safari en el iPad tenía el mismo comportamiento (pero sin superposición de botón de reproducción).

Espacios de nombres de documentos

Agregué los espacios de nombres apropiados de Open Graph / Facebook a mi marcado:

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

Pero no pareció tener un efecto. No creo que sean necesarios.

¿Hay algo que me falta aquí? Siento que muchos de los recursos que he encontrado hasta ahora podrían estar desactualizados ya que Facebook ha cambiado su API varias veces, por lo que es posible que haya pasado por alto un requisito más nuevo.

¿Cómo puedo hacer que el video se incruste y reproduzca dentro de la línea de tiempo de Facebook?

Echando un vistazo a las etiquetas meta de og: YouTube, las únicas diferencias que puedo detectar son:

  1. Los og:url y og:video YouTube se og:url desde el mismo dominio y subdominio ( www.youtube.com ). Los míos se sirven desde el mismo dominio, pero con diferentes subdominios (media: content.example.com , player: static.example.com ). ¿El subdominio tiene que ser el sam en toda la og: metainformación?

  2. La URL compartida de YouTube no es un .swf directo per se, pero es contenido 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

Me acabo de dar cuenta de que una de mis URL está realmente en un dominio diferente. Tengo la sensación de que es el culpable. Estoy moviendo algunas cosas ahora para probarlo. Actualicé mis datos de etiquetas meta arriba. Siéntete un poco avergonzado por no hacer esta observación por adelantado.

FYI video / mp4 es actualmente válido aquí en 2014.

Ver la meta proporcionada en esta página (ctrl-f mp4):