solution pour qu'un lecteur audio/radio en streaming ne s'interrompe pas qd on surfe?

[woluweb]

Bonjour,

La question est dans le sujet :
- si on met un lecteur mp3 ou une radio en streaming sur un site, dès que le visiteur va cliquer sur une autre page, le lecteur va être interrompu
- donc comment faire pour que le lecteur ne soit pas interrompu
- (soit éventuellement en ouvrant une petite fenêtre indépendante, mais pas idéal pcq les visiteurs vont "la perdre de vue" dans toutes leurs fenêtres)
- soit idéalement que la lecture se poursuivre d'une manière ou d'une autre quand on surfe sur le site

Merci pour vos lumières

[Helloo]

Bonjour,

Peut-être ouvrir le lecteur dans une nouvelle fenêtre et donner les dimensions (plus petite) pour cette nouvelle fenêtre.

Edit: je vois que tu as déjà donné cette idée.

woluweb , Il est aussi possible avec du JavaScript de laisser cette « petite fenêtre » toujours en dessus. Malheureusement je ne touche pas trop le JavaScript, mais ça te donne evt. une direction.

[woluweb]

Bonjour tout le monde,
Je relance le sujet pcq il y a certainement une solution en javascript pour qu'un mp3 (une radio en l'occurrence) continue de jouer quand on change de page sur un site... mais j'ai pas trouvé de bon exemple

[cavo789]

Perso je doute... Hormis un popup (à mort les popup), je ne vois pas comment cela pourrait fonctionner... Je suivrais cette discussion avec intérêt.

[woluweb]

Perso je doute... Hormis un popup (à mort les popup), je ne vois pas comment cela pourrait fonctionner... Je suivrais cette discussion avec intérêt.

France Inter le fait bien

https://www.radiofrance.fr/franceinter

Mais bon, pas le même budget :P

Sinon, je pense que souvent c'est plutôt le concept d'une Single Page Application (SPA), mais ça je pense pas que ça le fasse avec du Joomla

[cavo789]

Je pense que tu as effectivement raison : single page application; il n'y a pas de changement de pages et du coup, l'écoute n'est jamais interrompue par un reload.

[daneel]

woluweb :

Bonsoir,

J'ai évoqué la solution... en 2016 et en 2021 ! y compris avec toi Marc mais merci de relancer publiquement le sujet !

Déjà utilisé sous l'ancienne version de joomla, j'ai testé à nouveau le concept avec succès sous Joomla 4 avec Cassiopeia, le template par défaut ainsi que les principaux templates du marché et diverses extensions tierces pour voir les problème d'incompatibilité. Actuellement, je suis pris jusqu'à jeudi prochain mais cela vaut la peine d'attendre car j'ai repris à zéro et amélioré l'idée pour les personnes intéressées. N'hésitez pas à indiquer votre intérêt en vous manifestant dans cette discussion. Au besoin, on s'organisera un live !

Actuellement sous joomla, j'ai un player audio/video fonctionnant sans coupure entre le chargement des pages ainsi qu'un agent conversationnel ( un chatbot avec AI ) qui ne vous quitte pas du site web et accompagne chaque visiteur de manière personnalisé (dans le respect de la réglementation européenne). J'expérimente également le concept pour assurer un support backend pour les rédacteurs et administrateurs.

Bref, pas mal de possibilités avec quelques amélioration de la sécurité sur les données, le fait également de ne rien perdre du référencement et de l'optimisation du temps de chargement. Si la technique a fait ses preuves depuis plusieurs années, l'interactivité donne à Joomla une tout autre dimension aussi bien sur desktop que sur mobile. A la question de savoir si on peut faire un site joomla semblable à celui d'une célèbre radio ? la réponse est oui, mieux ? Sans aucun doute !

[woluweb]

hé bien me voici bien heureux d'avoir relancé le débat
Merci Yann, je me réjouis

[daneel]

hé bien me voici bien heureux d'avoir relancé le débat
Merci Yann, je me réjouis

Merci d'avoir attendu jusque maintenant, voici le résultat :


Exemple : Le site joomla 4 : https://icon.joomla.com/index.php/blog

• Lancer la video dans la barre latérale puis naviguer dans les différentes pages du site.
• Cliquer sur les articles, sur les liens de menu, sur les tags...

Vous avez remarqué ?

La vidéo live est toujours diffusé actuellement, Elle ne s'interrompt pas et le fait de passer sur d'autres pages ou de se connecter ne provoque aucune coupure.

La solution, c'est d'utiliser du javascript pour charger que le nécessaire, à savoir le contenu principal.

Mis à part les liens de menu et autres éléments interactifs comme le formulaire de connexion, le reste est conservé.

La technique de l'ajax est la même que pour l'envoi d'un formulaire en javascript quand celui-ci affiche une notification d'envoi sans recharger la page.
Pas besoin d'être programmeur, suffit juste de connaître la définition d'une classe css et d'un "id" pour indiquer ce que l'on choisit " d'ajaxifier " ou non.

Dans mon exemple, j'ai simplement créer un template enfant et dupliquer le fichier index.php du template original pour le modifier.

1. J'ai ajouté le script js qui fait le travail... en ajoutant la ligne suivante avant la balise de fin de l'entête de page </head>

<script src="https://4nf.org/ajaxify.min.js"></script>

ce qui donne

<jdoc:include type="metas" />
<jdoc:include type="styles" />
<jdoc:include type="scripts" />
[B]<script src="https://4nf.org/ajaxify.min.js"></script>[/B]
</head>

2. J'ai ajouté un id nommé "contenu" à la div qui chargera les données dans le corps principal (incluant le fil d'Ariane, la notification de message, vue des composants et modules haut et bas du contenu.)

On devrait obtenir :

 <div [B]id="contenu"[/B] class="grid-child container-component">
<jdoc:include type="modules" name="breadcrumbs" style="none" />
<jdoc:include type="modules" name="main-top" style="card" />
<jdoc:include type="message" />
<main>
<jdoc:include type="component" />
</main>
<jdoc:include type="modules" name="main-bottom" style="card" />
</div>

3. un id également pour le header nommé "header" tout simplement

la ligne se présente ainsi

<header[B] id="header"[/B] class="header container-header full-width<?php echo $stickyHeader ? ' ' . $stickyHeader : ''; ?>">

4. J'ai défini les paramètres par rapport aux classes présentes dans le template et ajouté directement dans le fichier index.php tout en bas juste avant le </body>

[B]<script>
let ajaxify = new Ajaxify({elements: '#contenu, #header, #login-form-16'});
</script>[/B]

5. Puis j'ai défini une video youtube que j'ai incrusté dans la barre latérale

Voilà !

Je vous conseille de créer une nouvelle position de module et de définir un module en player qui utilisera pleinement le nouvel emplacement dans votre template (ou template enfant). Vous avez également de nombreux paramètres que vous pouvez ajouter à l'étape 4 pour optimiser le résultat. Vous pouvez les retrouver dans le site officiel du projet ajaxify : https://4nf.org/ ainsi que la documentation complète.

Comme vous pouvez le voir dans mon exemple, les urls changent au fur et à mesure de la navigation, et malgré des lenteurs de serveurs,
Le site est plus optimisé car on ne charge finalement que l'essentiel et on conserve le bénéfice du référencement.

Evidemment quelques améliorations et réglages sont à prévoir notamment les sous-menus et autres modules, tout ce qui est effet javascript interactif.
Mais si vous prenez le temps d'affiner et de lire la documentation, vous pouvez obtenir un site incroyable car il y a d'autres applications possibles incluant ajaxify.

Yann

[woluweb]

Mais c'est une tuerie !
Et la mise en oeuvre est assez simple finalement, surtout avec Joomla 4 qui permet (grâce aux Templates Enfants) de faire proprement une surcharge de index.php !

1000 merci daneel !!!!!

[cavo789]

Mouais... si tu nous l'avais demandé, on t'aurait expliqué comment faire... C'est fastoche...



Big UP Yann ! Tu déchires.

[woluweb]

Salut daneel

Si j'ai le temps, la semaine prochaine je vais essayer d'en faire un override de Module HTML Personnalisé

Juste un truc :sur ton site de démo, la vidéo n'est plus dispo : "L'enregistrement de cet événement en direct n'est pas disponible."
Donc si t'as l'occasion de changer de vidéo ça permettrait aux gens de tester en live.

Encore merci pour la solution !