AUDIO & VIDEO sur Eklablog

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 ..... activé par JavaScript

** 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)

<p>Cliquer sur le titre pour afficher le lecteur </p>
<p><a onclick="init1()">Amazing grace</a></p>
<div id="musique1">&nbsp;</div>

<script type="text/javascript">// <![CDATA[
function init1() {$("musique1").innerHTML="<audio src='http://ekladata.com/RXuDAlPECGoxUTPLMYBIaDMWzFo/amazinggrace.mp3' controls>Votre navigateur n'est pas compatible</audio>";};
// ]]></script>

===========

** 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:

<p><a onclick="myMp3(this, ' titre ','adresse_du_fichier_musical')">< image éventuelle> annonce_du_titre </a> © crédit </p>

Le bloc de code en commun:

<script>// <![CDATA[
// Script pour insertion <audio> dans html
myMp3 = function(elmnt,titre,adresse){
var codetitre = titre;
var codeadresse = adresse;
var codeaudio = "<audio src='"+codeadresse+ " ' controls >Votre navigateur n'est pas compatible </audio><p style=' background-color: #f7f7d7;'> Titre : &#8195; "+codetitre+"</p>";
elmnt.innerHTML = codeaudio
}
// ]]></script>


> > > 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 ..... activé par JavaScript

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 <source src='. . .' type='../..'> 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 <video ....> </video> 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.
<script type="text/javascript">// <![CDATA[
function lectvid1() {
$("mavideo1").innerHTML="<video width='220' heigth='404' controls><source src='http://ekladata.com/jEqEg8IGbj_0_eIC9buBMhpmK1M/PrepaApero.mp4' type='video/mp4'></video>" ;}
// ]]></script>

<p><a onclick="lectvid1()">Vidéo apéro (auteur inconnu)</a></p>
<div id="mavideo1">&nbsp;</div>

- FIN DU CODE VIDEO EXEMPLE -

AUDIO ou VIDEO sans JavaScript.
Astuce avec html

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:
<!doctype html>
<audio controls src="http du fichier.mp3">votre navigateur ne permet pas de lire ce fichier</audio>

2) Insérer le code exporté en utilisant un élément html <embed src="....." />
saisir au minimum: <embed src="http du fichier contenant le code audio .html" />
qui par défaut deviendra <p><embed width="300" height="150" src="http du fichier contenant le code audio .html"></embed></p>

Voir article détaillé pour faire