Javascript Girl
  1. Javascript Girl
  3. Initialiser VideoJS à partir d'un élément fictif utilisant Require.js
Intereting Posts
Injecter la dépendance du module (comme le plugin) uniquement si nécessaire AngularJS Ajoutant rappel pour fonctionner – toujours Convertit la chaîne en un ensemble d'entiers Est-il vraiment instable de créer des chaînes HTML en version JavaScript? Envoi du contenu du dossier entier au client avec express Bibliothèque de modèles JavaScript JavaScript recommandée pour JQuery? Comment créer un panneau Bootstrap basé sur la sortie JSON Capitaliser la première lettre en utilisant javascript Comment obtenir de la valeur du champ caché créé dynamiquement dans JQuery? Module angulaire Membres privés Pourquoi la fenêtre (et non sécuriséeWindow) n'est-elle pas la même d'un utilisateur que d'une balise <script>? Javascript doit faire une bonne coupe Analyse JSON dans nodejs Avantages / inconvénients de la couche d'abstraction supplémentaire dans la portée de Angular Comment puis-je rendre le code externe «sûr» pour fonctionner? Just ban eval ()?

Initialiser VideoJS à partir d'un élément fictif utilisant Require.js

Tout d'abord, j'explique mes exigences:

  • J'ai un élément fictif pour lancer une vidéo -> <div id="dummyElement"></div>
  • Lorsque l'utilisateur clique / taps l'élément fictif, un VideoJS doit être initialisé et doit ensuite jouer le média sur la plupart des plates-formes.

Eh bien, mon problème est d'aborder cela sur IOS lorsque j'utilise la bibliothèque Require.js . Ce problème oblige l'utilisateur à faire deux clics / robinations ennuyeux pour afficher la vidéo.

J'ai fait quelques exemples d'un exemple simple à un exemple avec des promesses requises et jquery.

1- http://aitoraznar.com/lab/videojs/plain.html Exemple simple utilisant une balise vidéo HTML5

2- http://aitoraznar.com/lab/videojs/complex.html Exemple utilisant require.js et promesses jQuery

3- http://aitoraznar.com/lab/videojs/videojs.html Exemple utilisant VideoJS

4- http://aitoraznar.com/lab/videojs/videojsComplex.html Exemple utilisant VideoJS et require.js et promesses jQuery

Je peux reproduire le comportement attendu dans les périphériques suivants:

  • Samsung Galaxy Tab (GT-P6200) Android 3.2 – Navigateur natif
  • Samsung Galaxy Tab 2 Android 4.4 – Navigateur natif
  • LG Nexus 5 Android 5.0 – Navigateur Chrome
  • Blackberry Z10 (STL100-2) – Navigateur natif

Périphériques détectés où ne fonctionne pas (IOS primaire):

  • IPad Mini 2 (A1489) – IOS 8.1.2 – Navigateur Safari
  • IPhone 4 (A1332) – IOS 7.1.2 – Navigateur Safari
  • Nokia E7-00 (RM-626) – Symbian Belle 3 (v111.040.1511) – Navigateur natif (8.3) – Java 2.3 – Flash 4.0

Je ne sais pas pourquoi le 4ème exemple (VideoJS & Require.js) ne fonctionne pas sur les périphériques IOS. Toute aide serait appréciée.

Merci,

Aitor

Le problème avec iOS est que vous ne pouvez pas lire une vidéo à moins que vous ne l'utilisiez directement. Cela n'a rien à voir avec RequireJS.

Pour que cela fonctionne, au lieu d'utiliser une division fictive que vous cliquez, vous pouvez utiliser une affiche qui imite le même comportement. Vous pouvez régler un peu la peau pour cacher ce qui doit être caché avant que la vidéo ne soit cliquée.