-
Lecteur audio (ou video) - Astuce html, sans JavaScript
L'éditeur actuel "ferme la porte" à la balise <audio>, alors l'astuce consiste à "entrer par la fenêtre", tout en restant dans le cadre du html.
Je propose une solution simple similaire à l'insertion d'une image :
[1] Télécharger un document contenant la balise <audio . . > . . . . </audio>, dans la médiathèque
[2] Placer dans la source html de l'article, une balise <embed . . . . /> qui sollicitera ce document pour l'insérer.
Aussi simple que d'insérer une image ? oui (enfin ... presque)
Cet article concerne le sujet AUDIO ; pour la VIDÉO le principe est le même.
Il suffit de remplacer le mot audio par le mot video (un exemple en bas de page)En AUDIO les fichiers musicaux doivent être de type: MP3 ou OGG ou WAV
En VIDEO les fichiers vidéos doivent être de type: MP4 ou WebM ou Ogg❑ Le principe :
1) Mettre dans la médiathèque un ✉Fichier.html qui contient le code <audio> à insérer
et noter son adresse ekladata2) Utiliser une balise embed avec src="l'adresse ekladata du ✉Fichier.html" pour insérer son contenu dans la source de l'article
Pour faire l'opération n°2 , il est possible de :
- écrire directement la balise <embed> dans le code source
- utiliser le bouton d'insertion d'image pour aider à faire.
<img> et <embed> on le même type de codage il y a juste le nom à changer
❑ A propos du ✉Fichier.html contenant l'élément <audio>
Code type à écrire et télécharger dans la médiathèque avec l’extension .html :
<!doctype html>
<audio controls src=" url du fichier mp3 ">Votre navigateur ne permet pas lire ce fichier audio </audio>La 1ère ligne (<!doctype html>) permet de s'assurer qu'au téléchargement le système ne va pas remplacer, dans la médiathèque, l'extension .html par .txt [ ce qui se produit souvent ; avec doctype c'est toujours bon]
Concernant l'élément <audio> il existe d'autres syntaxes et attributs qui sont utilisables. Voir ICI infos audio❑ A propos de l'intégration du ✉Fichier.html dans le code source de l'article
Écrire dans le code source:
<embed src=" ici l'adresse du fichier dans la médiathèque " /> et cliquer sur OK
L'éditeur complètera cette écriture, comme ci-dessous (avec des valeurs par défaut) :
<p><embed width="300" height="150" src="adresse du fichier dans la médiathèque "></embed></p>
▪ 300 et 150 sont des valeurs par défaut de la zone d'affichage. Elles sont à adapter.
▪ </embed> n'existe pas dans la syntaxe officielle ; cette balise finale est ajouté par l'éditeur, qui signale son erreur (?)
Probablement un bug du à l’ancienneté de l'éditeur, mais ça ne perturbe pas le fonctionnement/ Voir ICI infos embed--
Un exemple pour aider à faire :
Exemple avec : LETTER FROM YOU (Nicolas Catrix) http://sergio.eklablog.com/-a106171348
http://ekladata.com/0pyy4t7Ii4JsYnhhOMy10YVngfM.mp31- Rédaction du fichier .html (avec le bloc-note par exemple) et enregistrement sur l'ordinateur avec l'extension .html.
Contenu choisi pour cet exemple :
<!doctype html>
<audio controls src="http://ekladata.com/0pyy4t7Ii4JsYnhhOMy10YVngfM.mp3">Votre navigateur ne permet pas de lire ce fichier audio</audio>
2- Télécharger le fichier dans la médiathèque. Pour cet exemple, l'adresse obtenue est:
http://ekladata.com/pj5aN9IpMQgopa2jsOWsOAgDS70/fich-lett-for-you.html
3- Dans le code source de l'article, il suffit de créer la balise embed :
<embed src="http://ekladata.com/pj5aN9IpMQgopa2jsOWsOAgDS70/fich-lett-for-you.html" />Après le clic sur OK, c'est la ligne ci-dessous qui figurera dans le code source:
<p><embed width="300" height="150" src="http://ekladata.com/pj5aN9IpMQgopa2jsOWsOAgDS70/fich-lett-for-you.html"></embed></p>❓ Si des barres de défilement apparaissent au niveau du lecteur, c'est que la place nécessaire à embed n'est pas suffisante. Il faut ajuster les valeurs par défaut (ci-dessous c'est 350 x 70)
Résultat audio ➜
Variante : Faire le point n°3 avec Insérer/éditer une image :
La syntaxe de la balise <embed ..... > étant quasi similaire à celle de la balise <img .... > il est possible de faire comme si le fichier était celui d'une image :
Faire comme précédemment 1) et 2) puis Editer l'article
↪ Clic Insérer/éditer une image:
Renseigner case source : http://ekladata.... du fichier .html , et cliquer sur OK (sans Enregistrer)
On peut également indiquer les dimensions de la zone occupée par ce lecteur.
↪ Revenir dans la source < > et remplacer img par embed et supprimer alt="" inutile avec embed
↪ OK et EnregistrerX
Même façon de faire pour une VIDÉO ⤵
--
Résultat vidéo ➜
Petite vidéo d'illustration (.mp4) provenant d'un exemple MDN Mozilla :
Nom du fichier téléchargé sur mon ordi : rabbit_320.mp4
■ Url de cette vidéo dans la médiathèque du blog:
http://ekladata.com/dZvS2pQLQ9C6tnxBz9FC0g76l_Y/rabbit320-1.mp4
■ Code contenu dans le fichier .html à placer dans la médiathèque :
<!doctype html>
<video controls src="http://ekladata.com/dZvS2pQLQ9C6tnxBz9FC0g76l_Y/rabbit320-1.mp4">Votre navigateur ne permet pas de lire ce fichier video</video>
Placé dans la médiathèque son url est :
http://ekladata.com/plvHj7ptJV-EtLZ74qM3mwWk4a4/html-video-rabbit.html
■ Le code à écrire dans la source < > de l'article :
<embed src="http://ekladata.com/plvHj7ptJV-EtLZ74qM3mwWk4a4/html-video-rabbit.html" />
qui après validation deviendra :
<p><embed width="300" height="150" src="http://ekladata.com/plvHj7ptJV-EtLZ74qM3mwWk4a4/html-video-rabbit.html"></embed></p>
Truc+ mettre un encadrement (ajouté ici en rouge) pour voir la zone nécessaire au lecteur, et régler les valeurs width et height. La petite vidéo d'illustration ci-dessus est obtenue par :
<p><embed style="border: 1px solid red;" width="335" height="260" src="http://ekladata.com/plvHj7ptJV-EtLZ74qM3mwWk4a4/html-video-rabbit.html"></embed></p>
-
Commentaires
C'est un peu compliqué mais je vais essayer car actuellement je ne sais pas insérer un fichier vidéo.
J'ai bien aimé votre escalier en béton en panne. Mais il arrive aussi que l'escalator le soit aussi et c'est alors moins fatigant de prendre celui en béton (hauteur des marches).
-
Mercredi 20 Mars à 21:56
Bonsoir,
La seule difficulté est de disposer d'un fichier vidéo avec une URL (adresse internet).
Il est bien sûr facile d'en placer un dans la Médiathèque, c'est comme pour les images, mais Eklablog n’accepte pas les fichiers de plus de 10Mo ce qui est très peu pour une vidéo.
Il faut donc que la vidéo soit hébergée ailleurs.
-
Suivre le flux RSS des commentaires
Ajouter un commentaire
|
 Créer mon blog |
Créer mon compte |
Bonjour , mon lien ekladata ne marche pas (pourtant je l'ai mit dans la médiathèque et donne un lien sur le fichier mp3 . Cependant lorsque j'applique le code source ça ne m'affiche rien du tout, pouvez-vous m'aider s'il vous plaît
Ma baguette magique est en panne.
C'est une peu comme si, au cours d'un voyage, on demande par mail à un garagiste pourquoi notre moteur ne démarre pas, sans lui dire ou est le véhicule ni quelle est la marque, le modèle etc.
Pour que je puisse essayer de trouver l'anomalie (qui est peut être dans la rédaction de mon tuto) : Sur quelle page ou article je peux voir ce lien ? Sinon, quelle est cette adresse ekladata?