Le lecteur vidéo Brightcove ne fonctionne pas dans Jquery Mobile

Question

Je n'arrive pas à faire fonctionner le lecteur vidéo Brightcove sur les pages Web à l'aide de l'infrastructure Jquery Mobile. Je mis en place quelques pages de test simple pour illustrer le problème:

http://www.lawruk.com/test/brightcove-jquery-mobile.htm

Lorsque vous cliquez sur les liens vidéo 1 et vidéo 2, le lecteur vidéo n'est pas affiché la plupart du temps. Parfois, la vidéo se charge, ce qui me fait penser qu'il s'agit d'un problème de synchronisation JavaScript.

Le lecteur vidéo fonctionne sur les pages vidéo individuellement.

http://www.lawruk.com/test/1.htm

http://www.lawruk.com/test/2.htm

Dans Firebug je remarqué l'étiquette représentant la vidéo est présente dans les DOM, mais grisées. J'utilise Firefox pour le tester.

Lorsque je le teste en utilisant Safari à partir d'un ITouch, le lecteur vidéo apparaît, mais affiche un message d'erreur. "La vidéo que vous essayez de regarder est actuellement indisponible. Revenez bientôt."

Je ne suis pas vraiment sûr s'il s'agit d'une limitation Jquery Mobile ou si le JavaScript Brightcove ne fonctionne pas bien avec Jquery Mobile.

Des solutions de contournement astucieuses?

Answer 1

Comme naugtur mentionné, le script BrightCove écoute un événement « charge » ou « DOMContentLoaded » être lancé, qui appelle ensuite la méthode createExperiencesPostLoad(). Jquery Mobile charge les nouvelles pages via Ajax, donc un événement de chargement comme celui-ci ne se déclenchera pas pendant une transition de page. JQuery Mobile nous offre heureusement un événement "pageshow" qui se déclenche après la fin d'une transition de page, afin que nous puissions appeler la méthode createExperiencesPostLoad() après un événement "pageshow".

<script language="JavaScript" type="text/javascript"> 
    $('div').live('pageshow', function(event) { 
     if ($('#my-video-player-container').is(':visible')) { 
      brightcove.createExperiencesPostLoad(); 
     } 
    }); 
</script> 

S'il vous plaît noter que dans cet exemple, le joueur est contenu dans un div avec l'id « my-vidéo-lecteur-conteneur ». Je vérifie qu'il est visible avant d'appeler la méthode. Vous devrez changer cela en fonction de votre code. Cette méthode pourrait potentiellement être appelée deux fois, mais mieux deux fois que jamais.

Lien vers une version de travail: http://www.lawruk.com/test/brightcove-jquery-mobile-fix.htm

Answer 2

Rien de nouveau.

aller directement à http://www.lawruk.com/test/1.htm et voir travailler

Le problème est que le code pour le joueur dépend de l'événement domready tout va chercher la page jquery mobile via AJAX et affiche. Voilà pourquoi:

• rien, sauf la page div se charge, donc pas de fichiers js du travail de la tête
• il n'y a pas domready

Je vois que vous avez la première chose résolu en mettant l'<script src=... dans la corps, mais toujours - pas DOMready. Vous devrez changer le script externe ou trouver le moyen de l'appeler vous-même. Ensuite, vous commencez avec un gestionnaire pageshow événement

Ou vous pouvez simplement utiliser rel="external" dans vos liens vers les pages avec des films

Answer 3

Il vous manque un code. Aller à cette page et voir comment la Colombie-Britannique a mis en place leur lecteur vidéo:

http://link.brightcove.com/services/player/bcpid1756040682001?bckey=AQ~~,AAABmA9XpXk~,-Kp7jNgisreGYAiU1ViDA175Evu7Kw9s&bctid=1754261492001

Je crois que l'extrait ci-dessous est une partie de leur utilisation suggérée, qui peut aide ...

<div style="display:none"> 
</div> 

Voici la page parent pour l'exemple ci-dessus juste au cas où vous voulez que: http://support.brightcove.com/en/video-cloud/docs/player-templates#mobileVideoPlayer