Dans ce tutoriel, la vidéo se nomme mavideo. Peu importe son format car vous allez la convertir en formats lisibles par du code HTML5.
1. Création de la vidéo HTML5
Convertissez votre vidéo aux formats mp4, ogg et webm pour assurer la compatibilité avec tous les navigateurs. Vous pouvez utiliser le logiciel libre Freemake.
2. Création d’un site de stockage HTML
Vous pouvez ouvrir un site HTML du type http://monsite.etab.ac-lille.fr sur les serveurs de l’académie.
Connectez-vous en ftp sur votre site html. Vous pouvez utilisez le logiciel libre FileZilla.
Créez un répertoire nommé videos et téléversez les fichiers mavideo.mp4, mavideo.ogg et mavideo.webm
3. Insertion de la vidéo dans un article WordPress
Récupérez l’url de vos vidéo. Dans notre exemple : http://monsite.etab.ac-lille.fr/videos/mavideo.mp4, http://monsite.etab.ac-lille.fr/videos/mavideo.ogg et http://monsite.etab.ac-lille.fr/videos/mavideo.webm
Créez un article Worpress et insérez le code html suivant dans le code source :
<video controls= »controls » width= »500″ height= »322″>
<source src= »https://www.ac-lille.fr/daipressources/videos/Educavox_5_feuille-de-route-DNE.mp4″ type= »video/mp4″>
<source src= »https://www.ac-lille.fr/daipressources/videos/Educavox_5_feuille-de-route-DNE.webm » type= »video/webm »>
<source src= »https://www.ac-lille.fr/daipressources/videos/Educavox_5_feuille-de-route-DNE.ogv » type= »video/ogg »>
</video>
Et voilà le résultat :
