Auteur : Stormalo
Posté le 11 avril 2020  | Édité le 10 avril 2021
Télécharger | Éditer | Reposter | Pleine largeur

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



AUDIO (élément html)

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


===========




VIDEO


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 -


x
Éditer le texte

Merci d'entrer le mot de passe que vous avez indiqué à la création du texte.

x
Télécharger le texte

Merci de choisir le format du fichier à télécharger.