Aller au contenu. | Aller à la navigation


This is SunRain Plone Theme

HTML

La plateforme "statique" permet l'hébergement de pages HTML mais ne propose pas l'exécution de pages dynamiques pouvant contenir des scripts (PHP, Perl, Python, ...).

Un accès FTP est fourni ce qui permet d'utiliser le site comme comme espace de stockage  (fichiers PDF, vidéos, etc.), ceci en complément d’un site web Wordpress ou Plone.

L'académie propose un site d'aide : http://aidestatique.etab.ac-lille.fr

Ci-dessous un tutoriel illustrant l'interêt d'un espace de stockage : afficher une vidéo volumineuse (ici > 60 Mo) dans un site Wordpress ou Plone

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.

Première étape : 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.

Deuxième étape : 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

Troisième étape : insertion de la vidéo dans un article Wordpress ou un document Plone

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 ou un document Plone et insérez le code html suivant dans le code source :

<video width="400" height="300" controls="controls">
<source src="http://monsite.etab.ac-lille.fr/videos/mavideo.mp4" type="video/mp4" />
<source src="http://monsite.etab.ac-lille.fr/videos/mavideo.webm" type="video/webm" />
<source src="http://monsite.etab.ac-lille.fr/videos/mavideo.ogv" type="video/ogg" />
</video>
 

Et voilà le résultat :