Ce composant de thème permet aux utilisateurs de « détacher » les médias dans une fenêtre flottante pendant qu’ils naviguent sur le site. Ils peuvent même naviguer vers un autre sujet et le média continuera de fonctionner.
Il fonctionne avec n’importe quel <iframe> ou <video> (avec un traitement spécial pour lazyYT). Il ajoute un bouton à chaque élément compatible, qui ouvre ensuite une petite fenêtre contextuelle en bas à droite.
Vous pouvez ensuite la « minimiser », ce qui maintient le son en cours en arrière-plan, ou la fermer complètement.
Pour le moment, la taille de la vidéo est déterminée par l’intégration originale. J’aimerais ajouter une fonctionnalité de « redimensionnement », soit par « clic et glisser », soit simplement avec 3 boutons : « petit », « moyen », « grand ».
Actuellement, cela masque l’éditeur… la solution simple est de simplement fermer la fenêtre contextuelle si vous souhaitez rédiger un message .
I have fixed this with the addition of an explicit z-index, and some explicit colours. With the vincent theme it now looks like this when you mouse-over:
J’ai essayé de l’activer sur mon forum, mais cela fait disparaître complètement la boîte vidéo lorsque la vidéo est encadrée à partir d’un lien mp4. J’ai également testé avec des iframes, et cela fonctionne comme prévu, mais les iframes sont plus difficiles à formater correctement
Nous venons de l’installer pour que les utilisateurs puissent regarder les audiences de destitution sans avoir à ouvrir une autre fenêtre, et cela a été un véritable succès (un commentaire disait : « C’est très pratique. Incroyable. C’est de loin la meilleure interface de forum que j’aie jamais utilisée. ») au point que les personnes utilisant des téléphones et des tablettes ont voulu en bénéficier également. Et comme il est impossible d’ouvrir plusieurs fenêtres sur un appareil mobile, c’est une fonctionnalité très utile.
Pour l’activer sur les tablettes et les téléphones, supprimez simplement no-touch des lignes 64 et 82 du fichier Common CSS, puis ajustez la taille du lecteur sur les écrans plus petits avec quelque chose comme :
Sur les appareils tactiles, un appui long équivaut à un survol pour afficher l’icône de contrôle ou les contrôles multimédias, puis touchez ailleurs pour les masquer à nouveau.
Je comptais le désactiver sur les téléphones, mais cela reste utile même sur un téléphone, car vous pouvez écouter l’audio avec le lecteur réduit.
Je suppose qu’il s’agit d’une limitation connue, mais les vidéos YouTube ne diffusent pas l’audio lorsqu’elles sont réduites, et si vous lancez une vidéo YouTube depuis un message puis décidez de la détacher, il n’y a aucun moyen de lire la vidéo dans la fenêtre flottante. Vous devez d’abord la détacher sans la lancer, puis vous pourrez la lire dans la fenêtre flottante.
Cela semble fonctionner correctement avec les vidéos YouTube si vous les publiez sous forme de cadre intégré (iframe) plutôt que de simplement publier le lien et d’utiliser la fonctionnalité Discourse lazyYT.
Pour que cela fonctionne, vous devez autoriser les iframes YouTube sur votre site. Pour ce faire, allez dans Paramètres → « iframes autorisées » et ajoutez https://www.youtube.com/ à la liste blanche.
Ensuite, lorsque vous collez le code d’une iframe (vous pouvez trouver le code d’iframe pour n’importe quelle vidéo sur YouTube sous Partager → Intégrer), la vidéo YouTube intégrée via l’iframe sera entièrement fonctionnelle avec le composant Media Overlay. Autrement dit, vous devez publier :
au lieu de https://www.youtube.com/watch?v=Ft1waA3p2_w.
Le code iframe ne fonctionnera pas sur discourse.org car ils n’ont pas autorisé https://www.youtube.com dans leurs paramètres « iframes autorisées », mais il est facile de l’ajouter à votre propre forum.
Voici à quoi cela ressemble sur notre forum, sur mon téléphone, avec le lecteur multimédia développé :
Le composant Media Overlay empêchait l’affichage des vidéos provenant de sites comme imgur sur notre forum. Nous avons résolu le problème en supprimant video de la ligne 103, c’est-à-dire en passant de $('iframe, video, .lazyYT', $elem) à $('iframe, .lazyYT', $elem)
function addOverlays($elem) {
$('iframe, video, .lazyYT', $elem).wrap("<div class='media-overlay-eligable'></div>")
Désormais, les vidéos imgur fonctionnent à nouveau, et la superposition fonctionne toujours avec les iframes et les lazyYTs.
Pour les personnes intéressées par cette fonctionnalité, iOS Safari et Firefox le font nativement, tandis que Chrome prévoit de le faire dans ses prochaines versions.
.
