Auteur : Stormalo
Posté le 11 avril  | Édité le 30 avril
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

UN EXEMPLE à copier-coller dans une zone source < > pour tester

<script type="text/javascript">// <![CDATA[
function init1() {$("musique1").innerHTML="<audio src='http://ekladata.com/RXuDAlPECGoxUTPLMYBIaDMWzFo/amazinggrace.mp3' controls>&#9632;</audio>";};
// ]]></script>
<p>Cliquer sur le titre pour afficher le lecteur </p>
<p><a onclick="init1()">Amazing grace</a></p>
<div id="musique1">&nbsp;</div>
<p><a onclick="init2()">Enya-fairytale</a></p>
<p id="musique2">le lecteur s'affichera ici</p>

- FIN DU CODE AUDIO EXEMPLE -


Un autre type de code: . . .   /!\ 1 seul lecteur possible par page

<!-- lien pour actualiser la page si necessaire -->
<p>Si besoin cliquer le bouton "activer la page" pour faire apparaitre la commande de lecture:</p>
<p><button onclick="window.location.href = 'adresse url de l'article';"> activer la page</button></p>


<!-- le code javascript adapté à la plateforme Eklablog -->
<script type="text/javascript">// <![CDATA[
function init() {
$("musique").innerHTML="<audio src='adresse url du fichier mp3' controls>navigateur non compatible</audio>";}
window.onload = init;
// ]]></script>

<!-- élément div pour affichage du lecteur balise audio -->
<div id="musique">&nbsp;</div>



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
<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.