Cette page est prévue pour ajouter des éventuelles informations complémentaires aux sujets publiés dans le forum Trucs et Astuces, même si des commentaires y ont été ajoutés. Elle fait suite à deux sujets du forum Trucs et Astuces. -----> doc.eklablog.com/lecteur-audio-topic200440 -----> doc.eklablog.com/lecteur-video-topic201002 - 14-12-2023 NOUVELLE POSSIBILITé AJOUTéE EN BAS DE PAGE - --- AUDIO [I]..... ACTIVé PAR JAVASCRIPT[/I] --- -- ** UN EXEMPLE QUI FONCTIONNE ** --, à copier-coller dans une zone source < > pour tester. Plusieurs lecteurs possibles sur la même page, à conditions de dupliquer le tout pour chacun et en remplaçant le chiffre 1 par un n° d'indexation différent (1, 2, 3, etc)

Cliquer sur le titre pour afficher le lecteur

Amazing grace

 
=========== -- ** AUTRE TYPE DE CODE, PLUS SIMPLE A UTILISER ** -- (ajout avril 2021) Même objectif, mais avec une autre organisation du codage: - une seule ligne de code par lecteur utilisé (modifier le titre et l'adresse du fichier mp3). A placer dans la source <> de l'article. - un bloc de code, commun pour tous les lecteurs, à mettre dans la zone de script du blog, sans rien modifier (sauf si besoinsla couleur #f7f7d7;) - LA LIGNE UNIQUE POUR UN TITRE: -

< image éventuelle> annonce_du_titre © crédit

- LE BLOC DE CODE EN COMMUN: - http://atelierduchateau.eklablog.com/-a207304668 ( > > > Cliquer ICI pour voir quelques exemples détaillés ) --- AUDIO (STYLE CSS) --- A priori il n'est pas possible par css d'agir sur le lecteur (forme et couleur noire ou blanche, selon le navigateur utilisé), mais on peut modifier la taille d'affichage (en conservant tous les contrôles) et ajouter un encadrement, pour attirer le regard. Exemple: audio {transform: scale(.8) translateX(-40px) } audio {padding: 15px; background-color: #f0f0ff ; border: 4px solid #ecb11e; } - la première ligne indique comment modifier l'affichage (ici d'un coefficient de 0.8) ; et diminuer de 40px la distance du bord gauche (pour ajuster horizontalement la position réduite). - la seconde ligne, plus habituelle, crée un espace de largeur 15px autour du lecteur ; cet espace sera de couleur #f0f0ff ; avec une bordure continue 4px de couleur #ecb11e Il est également possible de mettre "une ombre ou éclairage diffus" tout autour en ajoutant box-shadow: 0px 0px 50px #bbb; (#bbb pour un ombrage gris) =========== --- VIDEO [I]..... ACTIVé PAR JAVASCRIPT[/I] --- Tous les navigateurs ne sont pas aptes à lire tous les formats d'encodage, la documentation html indique que l'on peut répéter la balise Une même vidéo encodée avec deux ou trois formats différents pouvant être indiquée, le navigateur choisira la 1ère qu'il sait traiter. Perso je ne connais que .mp4 La balise accepte plusieurs attributs tels que : controls, autoplay,... UN EXEMPLE à copier-coller dans une zone source < > pour tester Plusieurs lecteurs possibles sur la même page.

Vidéo apéro (auteur inconnu)

 
- FIN DU CODE VIDEO EXEMPLE - [h1] AUDIO ou VIDEO sans JavaScript. Astuce avec html[/h1] - POUR CONTRER L'OBSOLESCENCE DE L'éDITEUR EKLABLOG, PROCéDER DE MANIèRE INDIRECTE - 1) Exporter le code audio, dans la médiathèque (fichier simple texte avec extension .html) par exemple un fichier contenant: 2) Insérer le code exporté en utilisant un élément html saisir au minimum: qui par défaut deviendra

http://bricotest.eklablog.com/lecteur-audio-ou-video-astuce-html-sans-javascript-a215007299 ( Voir article détaillé pour faire )