Animation html 5 
Author: Dominique B.Bonsoir,
J’ai créé une animation html5 à partir d’une vidéo.
L’animation s’affiche sur le site avec une barre de défilement. Je voudrais que cette animation se lance automatiquement à l’ouverture de la page.
Voici le code html fourni par mon programme de conversion :
<div style="position: relative; width: 640px;">
<vidéo id=0 controls width=640 height=425>
<source src="Image de fond animation 3 avant transfert kaki.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="Image de fond animation 3 avant transfert kaki.webm" type='video/webm' >
<source src="Image de fond animation 3 avant transfert kaki.mp4" type='video/mp4'>
<p>Video is not visible, most likely your browser does not support HTML5 vidéo</p>
</vidéo>
<a href="http://www.freemake.com/fr"><img alt="Fait avec le logiciel vidéo Freemake" src="http://www.freemake.com/favicon.ico" style="background-color: transparent;position: absolute;top: 20px;right: 20px;z-index: 9999;border-style: none;opacity:0.6;filter:alpha(opacity=60);"></img></a>
Autre problème: l’ animation n’est pas visible sur la preview du programme.
Merci
Salut Dominique, as-tu bien effectué la manipulation suivante (exemple à partir d'un test que je viens de faire avec une de mes vidéos) :
Pour intégrer la vidéo à une page Web :
Tranférez ces fichiers à partir du dossier de sortie sur votre serveur
DSCF0011.ogv
DSCF0011.webm
DSCF0011.mp4
L'emplacement actuel des fichiers:C:\Users\JiPé\Downloads\Videos\DSCF0011
Tous les fichiers doivent être situés dans le même dossier que votre page HTML
Copiez ce code = "ton code généré par le logiciel"
Collez le code dans votre page Web entre les balises <body></body>
Ne fonctionne pas en local, il faut au préalable installer les fichiers sur le serveur. Pour le lancement automatique il faut ajouter une action au code je pense (autoplay). Voir cette page à toutes fins utiles (rubrique attributs ou options) :
http://dgmm.ensad.fr/cours/gestion-de-la-video-en-html5 ou encore ici :
http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
Bonne continuation,
J.P.
Author
Bonsoir,
Merci pour votre aide grâce à vos conseils, mon animation fonctionne parfaitement en
Html 5 sur les PC et se lance automatiquement.
J’ai également un Mp3 qui se lance à l’ouverture du site sans problème.
Je croyais avoir résolu mes problèmes, mais sur les iPad et autres tablettes (androïde et Win 8) l’animation et le MP3 ne fonctionnent pas.
Pouvez-vous m’aider à résoudre ce problème ?
Par contre je n’ai toujours pas de preview sur l’aperçu du programme.
Je joins l’adresse de mon site : www.alatag.be
Merci
Dominique
Author
Bonsoir,
Merci pour votre aide grâce à vos conseils, mon animation fonctionne parfaitement en
Html 5 sur les PC et se lance automatiquement.
J’ai également un Mp3 qui se lance à l’ouverture du site sans problème.
Je croyais avoir résolu mes problèmes, mais sur les iPad et autres tablettes (androïde et Win 8) l’animation et le MP3 ne fonctionnent pas.
Pouvez-vous m’aider à résoudre ce problème ?
Par contre je n’ai toujours pas de preview sur l’aperçu du programme.
Je joins l’adresse de mon site : www.alatag.be
Merci
Dominique
Hello Dominique,
On iPad or iPhone the mp3 format is not supported and it's why it's not playing it. You need to use the mp4 format (.m4a only for audio) and then it will be played also on the iPad.
Try to use for the video files names wihtout space because this can also create some issues. It can also depend on the fact the preview browser based on Chromium has not the correct codec installed. try to install the ffmpeg on your computer and then try again.
Many thanks!
***** Google Translation:
BonjourDominique,
SuriPadouiPhoneau formatmp3n'est paspris en chargeetc'estpourquoi iln'est pasjouer.Vous devez utiliserle formatmp4(.M4aseulementpour l'audio), puisil sera jouéaussisur l'iPad.
Essayez d'utiliserdesnoms de fichiersvidéowihtoutespace, car cela peutcréerdes problèmes.Elle peutaussi dépendredu fait que lenavigateurde prévisualisationsur la base dechromen'a pasle boncodecinstallé.essayez d'installer leffmpegsurvotre ordinateur, puisessayez à nouveau.
Merci beaucoup!