Vidéo et SVG

SVG est capable de gérer des formats vidéos mais ici ce n'est pas la gestion de vidéos que je vous propose mais la réalisation d'une vidéo. Cette page fait suite à la page: Vidéo au format libre. Il est conseillé de lire cette dernière si vous ne connaissez pas le format SVG.

Une vidéo n'est rien d'autre qu'une suite d'images défilant suivant un certain rythme. Ces images peuvent bien sûr être accompagnées, entre autres, par du son mais nous ne baserons ici notre démonstration que sur des images. Il s'agit de débuter dans l'usage de SVG. Pour commencer faisons donc simple.

Ci-dessous vous trouverez un exemple d'animation avec plus bas le programme proposé. Cette animation fonctionne une dizaine de fois puis s'arrête. Si elle tourne vous pouvez l'arrêter en cliquant dessus. Si elle est arrêtée vous pouvez la relancer en cliquant dessus.

De plus amples informations sur le fonctionnement de ce programme vont être fournies d'ici peu. En attendant vous trouverez ci-dessous le programme tel que je l'ai réalisé. Ceux qui comprennent au moins comment intégrer les images vont pouvoir l'utiliser sur leur site ou leur ordinateur. Si le programme est proposé gratuitement, les photos quant à elles ne peuvent pas être reprises. Le but de cette interdiction est de favoriser l'usage de SVG et la création. Il n'est pas intéressant pour les internautes de voir partout la même animation.

Ceux qui ont déjà des connaissances dans le langage SVG pourront aussi introduire dans leurs animations des formes. Ils peuvent créer ces formes avec l'outil en ligne sur ce portail. Cet outil de création de dessins et d'animations au format SVG est utilisable gratuitement en cliquant ici.

En fait le fonctionnement de cette vidéo est fait grâce à trois fichiers que voici avec leurs URL sur le portail Orvinfait :

Fichier HTML

http://www.orvinfait.fr/svg/video.html (C'est le code de cette page sans le texte)

Fichier SVG

http://www.orvinfait.fr/svg/video.php

Fichier script

http://www.orvinfait.fr/svg/video.js

Pour sélectionner le texte ci-dessous puis pour copier le contenu faites : Ctrl+c

/* Licence d'utilisation Le fait d'utiliser ce programme implique la pleine acceptation de la licence. Ce programme vous est fourni gratuitement en esperant qu'il vous sera utile. Il est fourni SANS AUCUNE GARANTIE. En aucun cas la SARL ORVINFAIT ne pourra etre tenue comme responsable de quelques consequences que ce soit suite a une utilisation, bonne ou mauvaise, de ce programme. Ce programme est librement modifiable et distribuable gratuitement tant que l'entete demeure. En cas de modification elle doit etre indiquee. L'auteur de la modification ajoute son nom. Il peut aussi ajouter d'autres informations en dessous des pointilles de l'entete. Il peut etre fait une utilisation commerciale de ce programme. Cela permet de reduire les couts de creation donc cela coute moins cher aux clients. Le fait d'adapter les programmes du portail Orvinfait aux besoins d'un client demande du temps et chacun a le droit a une juste remuneration de son travail. Le fait de simplement installer les programmes proposes demande aussi du temps. Le fait de conserver cette entete permet de mieux faire connaitre le portail Orvinfait, donc d'augmenter ses revenus publicitaires, donc de pouvoir proposer de plus en plus de programmes. Vous pouvez aussi mettre des liens vers le portail Orvinfait pour le faire connaitre aupres de vos visiteurs. Le portail Orvinfait offre des dizaines de milliers de pages d'informations, de nombreux services gratuits permettant, entre autres, de mettre des textes et des liens sur les pages du portail. La liste des services est a : http://www.orvinfait.fr/service.php Un des services permet aux habitants de France de faire connaitre, gratuitement, sur le portail orvinfait leurs communes, leurs associations et leurs animations. Un autre service permet aux professionnels de se faire connaitre gratuitement aupres des nombreux visiteurs du portail Orvinfait et cela au niveau de chaque commune de France. Le portail Orvinfait propose un service gratuit de petites annonces. Celles-ci peuvent aussi bien etre consultees ou ajoutees depuis un ordinateur ou un telephone portable. Il propose l'utilisation gratuite de logiciels en ligne : dietetique (pour savoir comment faire une alimentation bonne pour la sante et etre performant - ce logiciel est accompagne d'un dossier d'informations sur l'alimentation), genealogie (permet notamment aux cousins de se rencontrer)... ======= SVG ===== Le portail Orvinfait permet aussi de realiser, gratuitement, des dessins et des animations au format SVG. Grace a un logiciel en ligne. Il fournit des scripts expliques et d'autres informations sur le SVG. ------------------------------------------ */ //vos images doivent etre numerotes //l'url de vos images est formee //par la somme de a + d + b //d correspond a la partie variable de l'url //a chaque valeur de cette variable doit bien sur //correspondre un fichier //il est ainsi posible de faire defiler un grand nombre d'images var a = '../programmer/diaporama2/p10'; var d=10008; var b = '.jpg'; var w3_svg = "http://www.w3.org/2000/svg"; var w3_xlink = "http://www.w3.org/1999/xlink"; //tps indique le temps separant l'affichage de deux photos var tps=40; var ori=document; var obad = ori.getElementById("imatype"); var ret=0; var stop=0; var ferme=0; var lien=""; var compteur=0; var id_ima_ra = 'ima'; var ide="a"; //cette fonction est lance lorsque le svg //est charge function lance() { //ce lien correpond au fichier de votre premiere //image lien = '../programmer/diaporama2/p1010007.jpg'; ori=document; obad = ori.getElementById("imatype"); monima = obad.cloneNode(false); monima.setAttributeNS(w3_xlink,'href',lien); compteur++; ide=id_ima_ra + compteur; monima.setAttributeNS(null, 'id', ide); ori.getElementById("cadre").appendChild(monima); //alert('lien='+lien) //setTimeout("debut()", 1200); setInterval("nphoto()", tps); } //Cette fonction est appellee toutes les // tps milisecondes function nphoto() { if (stop==0) { if (ret==0) { //chargement et affichage d'une image lien= a + d + b; monima = obad.cloneNode(false); monima.setAttributeNS(w3_xlink,'href',lien); ide2=ide; //la variable compteur est incrementee afin de //donner a l'id de chaque image une valeur unique compteur++; ide=id_ima_ra + compteur; monima.setAttributeNS(null, 'id', ide); ori.getElementById("cadre").appendChild(monima); //l'image precedente est effacee afin de ne pas saturer //la memoire video obaca=document.getElementById(ide2); ori.getElementById("cadre").removeChild(obaca); //la variable d est incrementee afin de charger //l'image suivante d++; //il est possible d'afficher un grand nombre d'images //mais il y a toujours une fin //si la valeur d ne correspond plus a une image //il faut arreter le defilement d'images //en mettant stop=1 if (d==10018) { //la variable ret sert pour la //marche arriere de notre animation //si vous faites une animation continue //vous pouvez supprimer cette variable ret=1; d=10017; ferme++; if (ferme==10) { stop=1; } } } else { lien= a + d + b; monima = obad.cloneNode(false); monima.setAttributeNS(w3_xlink,'href',lien); compteur++; ide2=ide; ide=id_ima_ra + compteur; monima.setAttributeNS(null, 'id', ide); ori.getElementById("cadre").appendChild(monima); obaca=document.getElementById(ide2); ori.getElementById("cadre").removeChild(obaca); d--; if (d==10006) { ret=0; d=10007; } } } } //la fonction clic permet d'arreter //ou de relancer l'animation //Comme l'exemple boucle sur les memes //images il n'a pas ete necessaire de //reinitialiser d //si vous ne faites pas de boucle //il faut penser a gerer la variable d //lorsque stop est mis a zero function clic() { if (stop==0) { stop=1; } else { stop=0; ferme=0; } }

Quelques liens vers des pages du site

Voici quelques liens parmi les dizaines de milliers de pages et les nombreuses rubriques de ce site.

Vidéo et SVG

Fichier HTML

Fichier SVG

Fichier script

Quelques liens vers des pages du site

Communes de France

Liste des rubriques du site

Page d'accueil