web-dev-qa-db-fra.com

Lecture d'une vidéo mp4 intégrée dans un Facebook comme ou partage à l'aide de Flash

J'ai un fichier mp4 codé H.264 que j'essaie d'intégrer dans une publication Facebook lorsque la page qui le sert est likée ou partagée.

Ma compréhension est que j'ai simplement besoin d'avoir les bonnes balises Open Graph <meta> en place sur l'URL qui est aimée/partagée. Cependant, j'ai essayé plusieurs ensembles différents de balises <meta> et la vidéo n'est toujours pas intégrée lorsque je colle l'URL dans ma mise à jour de statut et la poste. Il incorpore l'image de la propriété og:image, mais en cliquant sur l'image, l'utilisateur passe simplement à og:url.

Lorsque j'utilise l'outil de débogage Facebook , voici ce qu'il affiche pour Informations brutes sur le document graphique ouvert:

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

Les valeurs ci-dessus ont été remplacées par des valeurs fictives, mais ce sont toutes des liens valides.

Facebook semble analyser cela correctement, car il apparaît sous Type de partage -> Vidéo:

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

Lorsque je vais directement à l'URL du lecteur 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), la vidéo est lue correctement (intégrée dans le lecteur flash).

Ce que j'ai essayé/considéré:

Ignorer le lecteur flash

À l'origine, je n'avais même pas de lecteur flash dans la liste og:video et j'essayais simplement d'utiliser le fichier mp4 en premier. Facebook ne l'a pas récupéré et a traité le like/share comme un partage de lien simple.

Liste blanche

À un moment donné, les applications/domaines ont dû être ajoutés à la liste blanche avant d'autoriser la vidéo intégrée. Ce n'est plus nécessaire . Je n'ai pas mis mon domaine en liste blanche.

[~ # ~] https [~ # ~]

Certaines sources affirment que le lecteur flash utilisé doit être hébergé sur HTTPS. Ma recherche indique que cela ne devrait s'appliquer que si l'utilisateur navigue sur Facebook via HTTPS, ce que je n'ai pas fait lors des tests.

J'effectue actuellement des tests avec un lecteur flash HTTPS pour voir si quelque chose change.

Anciennes balises

Pour le plaisir, j'ai essayé d'ajouter d'anciennes balises Facebook<meta> et <link> (par exemple title, video_src) pour voir s'il les prendrait. Il n'a pas.

Actualisation du cache

J'ai passé un ?fbrefresh=1 avec l'URL dans le débogueur Facebook pour m'assurer que la version en cache de l'URL a été effacée. Cela a abouti à la récupération des dernières méta-informations, mais toujours pas d'intégration.

iPad

Depuis que j'ai le video/mp4 de secours dans mes balises og:video, j'ai regardé mon fil d'actualités Facebook dans l'application iPad. Curieusement, l'image miniature avait un petit bouton de lecture superposé dessus. Cependant, toucher le bouton de lecture a entraîné une redirection vers l'URL de partage au lieu de lire la vidéo en ligne. Safari sur l'iPad avait le même comportement (mais sans superposition de bouton de lecture).

Espaces de noms de documents

J'ai ajouté les espaces de noms Open Graph/Facebook appropriés à mon balisage:

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

Mais cela ne semblait pas avoir d'effet. Je ne pense pas qu'ils soient nécessaires.

Y a-t-il quelque chose qui me manque ici? J'ai l'impression que beaucoup de ressources que j'ai trouvées jusqu'à présent pourraient être obsolètes puisque Facebook a changé leur API à plusieurs reprises, il est donc possible que j'ai manqué une nouvelle exigence.

Comment puis-je intégrer la vidéo et la lire dans la chronologie Facebook?

En jetant un œil aux og: meta tags de YouTube, les seules différences que je peux remarquer sont:

  1. Les og:url et og:video de YouTube sont diffusés depuis le même domaine et sous-domaine (www.youtube.com). Les miens sont servis à partir du même domaine, mais de sous-domaines différents (média: content.example.com, lecteur: static.example.com). Le sous-domaine doit-il être le sam dans toutes les méta-informations og:?

  2. L'URL de partage de YouTube n'est pas un .swf en soi, mais c'est du contenu 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

Je viens de réaliser qu'une de mes URL se trouve en fait sur un domaine différent. J'ai le sentiment que c'est le coupable. Je déplace des trucs maintenant pour l'essayer. J'ai mis à jour mes données de balise META ci-dessus. Sentez-vous un peu penaud de ne pas faire cette observation à l'avance.

facebookfacebook-likefacebook-opengraphembedded-video
28
Rob Hruska

Voici ce qui a fini par fonctionner pour moi.

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

Quelques observations et informations utiles:

Lecteur Flash

  • Je suis passé à l'utilisation de JWPlayer car la configuration de ses paramètres de requête flashvars était légèrement plus simple que celle de FlowPlayer . Je pense que j'aurais pu faire fonctionner FlowPlayer avec un peu plus d'efforts. JWPlayer a également un Belle page d'instructions pour l'intégration de Facebook . (Remarque: de nombreux lecteurs Flash nécessitent une licence achetée pour une utilisation commerciale - assurez-vous d'en obtenir une si nécessaire.)

Ouvrir le graphique <meta> balises

  • L'utilisation de film a fonctionné pour og:type. J'utilisais à l'origine video et video.other. Celles-ci fonctionnent probablement aussi bien, mais utiliser movie définitivement a fonctionné pour moi.
  • Le suivant og: les propriétés n'étaient pas nécessaires pour l'incorporation: fb:app_id, og:video:width, og:video:height.
  • Notez le paramètre de requête URLEncoded file. La nécessité de le faire devrait être assez évidente, mais gardez à l'esprit de coder les valeurs des paramètres séparément. L'esperluette (&) avant autoplay=true a été XMLEncodé avant d'être ajouté au balisage de page. L'esperluette a été correctement décodée lors de sa visualisation dans la section "Propriétés de l'objet" du débogueur Facebook.
  • L'hébergement du contenu et de l'url partagée sur des sous-domaines séparés n'a pas d'importance . Le seul domaine concerne le fait que pourrait provoquer des problèmes dans le lecteur flash lui-même, et peut être évité avec un crossdomain.xml sur le serveur de contenu.

Observations de l'outil de débogage Facebook

  • La section Debugger Tool "Type de partage" était légèrement trompeuse: video C'est ce que cela a montré quand j'avais à la fois application/x-shockwave-flash et video/mp4 les types. Je m'attendais à ce qu'il ait deux éléments dans cette liste, mais il venait d'avoir le second. Malgré cela, le lecteur flash est toujours intégré.
  • Je me demandais d'abord si Facebook se rattrapait avec les paramètres URLEncoded quand j'ai vu qu'il montrait tout représenté comme unicode: Unicorn^H^Hde Cependant, il semble que ce ne soit pas un problème. Ne vous laissez pas dérouter.

[~ # ~] https [~ # ~]

  • Le code ci-dessus n'est pas intégré à la navigation https Facebook. De plus, le og:video:secure_url La propriété meta n'a pas fonctionné ( peut-être à cause de cela ). Ce que j'ai fini par faire était de servir à la fois le lecteur flash et son paramètre source mp4 file sur https. La balise META résultante ressemblait à quelque chose comme:

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

    Le og:video était le seul qui devait être sur https; og:image, og:url, etc. étaient toujours bien servis sur http.

J'espère que cela aidera les autres à éviter les impasses et les harengs rouges que j'ai rencontrés lors du débogage et de l'apprentissage de tout cela.

21
Rob Hruska

La vidéo FYI/mp4 est actuellement valable ici en 2014.

Voir la méta fournie sur cette page (ctrl-f mp4):

4
Josh Peterson

Il semble que Facebook n'accepte que les applications/x-shockwave-flash ou vidéo/mp4 et non le texte/html.

Type MIME de la vidéo. Soit application/x-shockwave-flash ou vidéo/mp4.

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

1
surfeurX