Page test Mediaspip
Test de visualisation de la vidéo présente sur MediaSpip Infini
Pour mémoire, Mediaspip ORB a pour adresse :
medias.orb29.infini.fr
(il faut disposer des droits d’accès !)
J’ai sélectionné les vidéos sur les cabarets de Noel
1) iframe Mediaspip
Utilisation du code iframe fourni par Mediaspip :
Ce code est ici encadré soit par la balise "code" pour affichage du source, soit de "html" pour execution :
<iframe width="480" height="270" style="width:480px;height:270px" src="http://medias.orb29.infini.fr/spip.php?page=embed_code&id_objet=648&objet=document&largeur=480&hauteur=270" frameborder="0" allowfullscreen></iframe>On constate qu’il n’y a pas affichage automatique de la première image et il faut cliquer sur le lien pour démarrer la vidéo
2) Balise iframe
Utilisation de iframe avec un src modifié
Si on remplace le src proposé par "http://medias.orb29.infini.fr/IMG/mp4/orb-cabnoel-2018_1-encoded.mp4", on obtient :
<iframe width="480" height="270" style="width:480px;height:270px" src="http://medias.orb29.infini.fr/IMG/mp4/orb-cabnoel-2018_1-encoded.mp4" frameborder="0" allowfullscreen></iframe>
Pour mémoire, syntaxe iframe : <iframe width="100%" height="400" src="Lien" frameborder="0" scrolling="no"></iframe>
3) Balise embed
Utilisation de la balise embed
Modèle :
<embed width="100%" height="400" src="url" type="[insert MIME type]">
Ici type mime = "video/mp4"
Autre exemple : <embed src="example.mpeg" autostart="false" height="30" width="144" />
Application sur une 2ème vidéo Mediaspip (Noel 2017)
<embed src="http://medias.orb29.infini.fr/IMG/mp4/xxxxxx-encoded.mp4" height="270" width="480" />
où xxxx = est le nom du fichier Mediaspip sans majuscule, accent et blanc remplacé par un souligné
La balise embed supporte :
.swf - créée par Macromedia Flash
.wmv - Microsoft Windows Media Video
.mov - Quick Time Movie, appartient a Apple
.mpeg - créée par Moving Pictures Expert Group
4) Balise Video
Cette balise pour lire la vidéo est apparue en HTML5
Tutoriel : https://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
Utilisation de la balise video
Modèle :
<video controls width="250">
<source src="/media/examples/flower.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>La liste des attributs de video figurent sur cette page
https://developer.mozilla.org/fr/docs/Web/HTML/Element/video
Application sur Noel 2017
Cabaret de Noel 2017
En pratique, on peut copier le code suivant :
<html><video controls width="480"> <source src="http://medias.orb29.infini.fr/IMG/mp4/xxxxxxx-encoded.mp4" type="video/mp4" >
Désolé, votre navigateur ne supporte pas ce type de vidéo</video>
<br>yyyyyyy<p></html>où xxxxx est le nom du fichier Mediaspip sans majuscule, accent et blanc remplacé par un souligné
et yyyyy est éventuellement le texte inscrit dessous
********************************
* Note générale sur ces 3 balises *
*******************************
Pour des raisons obscures, sur Chrome, le démarrage de la vidéo (et donc du son) peut être immédiat avec iframe et embed. Cela est donc très gênant, surtout quand plusieurs affichages de vidéo sont proposés (cacophonie !)
J’ai mis testé sans sucès l’attribut autostart="false" dans iframe et src.
Et en paramètres de l’URL, j’ai testé en vain :
– "start=20" à src pour démarrer à la vingtième seconde
– les attributs autoplay ou autostart avec =false ou =0 ou =non ou =no
– le booléen muted pour couper le son
Il semblerait que dans le plugin Mediaspip player, les paramètres possibles soient autoplay, loop et muted, mais c’est pour lire des vidéos locales
En revanche, avec la balise video, par défaut, il ne démarre pas avec Chrome !
Au sein des mobiles Apple, les résultats sont decevants : pas d’affichage de la 1ere image ; seulement, le triangle de lancement
5) Utilisation d’un lien
Un lien a pour conséquence d’ouvrir une nouvelle page dans laquelle la vidéo va être seule.
<a href="example.mpeg" title="Télécharger film">nom du film</a>
Exemple de lien :
Cabaret Noel 2018
Une solution à étudier : la mise en place d’un lien à partir d’une image cliquable.
<a href="http://medias.orb29.infini.fr/IMG/mp4/formatfactory2017-orb-cabnoel-encoded.mp4?largeur=480&hauteur=270"><img src="http://medias.orb29.infini.fr/local/cache-gd2/9db80555602ae9841a665c772df39b65.png" alt="cabaret Noel"/></a>
Cabaret Noel 2018
On peut améliorer cette solution, avec une image fixe sur laquelle on superpose par l’attribut "style" une légende et un triangle de lancement
Modèle à travailler
<div style="position:relative; height:430px">
<div style="position:absolute;z-index:1">
<img src="images/cats.jpg">
</div>
<div style="position:absolute;top:150px;left:200px; width:600px; height:430px; z-index:2;font-size:200%;">
<img src="images/ici.gif" width="200" heigth="100">
</div>
</div>Examen WordPress
On peut écrire le code HTML directement dans une fenêtre dédiée HTML.
Problèmes :
– la ligne
– < iframe > n’est pas pris en compte
