Vidéo et HTML5

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

Vidéo et HTML5

Message par allégorie le 22/3/2011, 13:26

Bonjour,

Je souhaite intégrer des vidéos en utilisant HTML5 pour remplacer quicktime.
J'ai tester la solution de l'hébergement via youtube, dailymotion et vimeo mais je ne suis pas satisfait du résultat final.
J'ai suivi ce lien http://videojs.com/#adding-videojs mais j'avoue ne pas tout comprendre car le site est en anglais et le HTML et moi ont est pour l'instant pas super copains.
Je vais quand même tenter d'utiliser ce système sans être sur d'y arriver.
Si quelqu'un à des d'infos complémentaires ou des astuce, je suis preneur.

Cordialement


allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 22/3/2011, 18:26

Bonjour,
Je suis en train d'essayer de comprendre comment utiliser le HTML5.
J'ai donc télécharger les fichiers video-js.css et video.js puis les ai uploader à la racine du serveur.
C'est après que ça se complique.
Est ce que je fais glisser ces deux fichiers simplement à la racine ou bien dans chaque dossier que constitue le site ?
Dois-je créer dans iweb des fragment html et y inclure les adresses des fichier qui sont sur le serveur ?
Dois-je réaliser cette opérations pour chaque page contenant de la vidéo ?
Faut-il que les fichiers vidéos soit uploader sur le serveur ?

Si quelqu'un à un début de piste ou une explication, il est le bienvenue.

Cordialement.

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 23/3/2011, 00:27

Pour commencer

Si vous utilisez Mobileme vous allez devoir utilisé Cyberduck un client FTP webDAV (et pas un autre)
Vous allez le configurer pour publier dans votre dossier iDisk/Web/Sites. Il n'y pas grand chose à faire et je vous ai mâché le travail avec un tuto
FTP.html" target="_blank" rel="nofollow">http://iweb.debutersurmac.com/siteiweb/Blog/Entrees/2011/2/24_MobileMe_et_client-FTP.html
Renommez vos vidéos avec un nom simple (sans accent sans espace sans caractères bizarroïdes )
mettez ces vidéos et vos fichiers video-js.css et video.js dans un dossier
donnez un nom simple à ce dossier (sans accent, sans espace, sans caractères bizarroïdes )
glissez ce dossier dans votre dossier iDisk/Web/Sites via Cyberduck

Récupérez les URL des différents fichiers
(attention! prenez les adresses commençant par http://web.me.com/ et non par https://idisk.me.com)

voilà c'est la fin de la première partie... la suite si vous réussissez cette étape.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 23/3/2011, 03:44

Bonjour,

Comme quoi avec des infos précises et un tuto clair ça paraît beaucoup plus facile.
Le dossier est actuellement en train de télécharger sur l'Idisk via Cyberduck.
Reste plus qu'a récupérer les url des vidéos et des deux fichiers video-js.css et video.js.
Voilà, fin de la première étape et merci encore pour votre aide.

Cordialement. good

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 23/3/2011, 11:18

Rectification je n'avais pas lu la page que vous aviez donné en lien dans le premier message. donc ce n'est pas seulement les deux fichiers js et css qui faut téléverser mais tout le dossier video-js vous pouvez placez celui-la dans votre dossier iDisk/web/Sites ou dans le dossier de vos vidéos ça n'a pas d'importances seuls compte les l'URLs des deux fichiers sus-cités.

Pour le reste, voici la méthode : avec le code à utiliser dans un fragment HTML
http://iweb.debutersurmac.com/temporary/HTML5.html

Il est tres beau ce player

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 23/3/2011, 21:04

Bonjour,
J'ai bien suivi vos instructions et fais un test sur la video en page d'accueil.
Tout c'est très bien passé merci.
Les liens en fin de tuto servent uniquement pour le téléchargement ou bien à autre chose ?
D'autre part je trouve que la vidéo met plus de temps à charger sur la page par rapport à une vidéo qui se charge avec QT.
A la base la vidéo que j'ai uploader pèse 13 MO et est en 1024*576 que j'ai réduit en 384*216 grâce au code html. Est ce que ça peut venir de là ?
Autrement, comment faire pour que cette vidéo démarre en autoplay. Je pense que cela ce règle dans le code, j'ai cherché, mais je ne sais pas comment faire.
Et enfin sur l'affiche de cette vidéo apparaît une barre blanche sur le coté droit, pourtant les tailles d'image sont les mêmes...
Voili voilou encore beaucoup de questions en tout cas merci pour vos conseils et votre patience qui m'ont permis d'avancer dans le jungle du HTML.

Cordialement. salut

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 24/3/2011, 13:58

Bonjour,
Bon j'ai refait les export vidéo dans la taille définitive correct en 480*272
L'affichage et la vitesse de chargement sont maintenant correct. Le souci d'affiche est également réglé.
Reste le souci d'autoplay de la vidéo que je n'ai pas réussi à résoudre.
Enfin, comment avoir un beau player.

Cordialement.
http://www.allegorieproductions.com

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 24/3/2011, 22:43

il suffit d'ajouter autoplay dans la balise video
par ex :
Code:
<video class="video-js" width="640" height="264" controls preload autoplay poster="http://url/de/votre/image.png">
il faut remplacer "autoPlay":false par "autoPlay":true dans partie consacrée au lecteur flash (flowplayer)
Code:
<param name="flashvars" value='config={"playlist":["http://url/de/votre/image.png", {"url": "http://url/de/votre/video.mp4","autoPlay":true,"autoBuffering":true}]}' />

ex : http://iweb.debutersurmac.com/temporary/autoplay.html

Chez moi la vidéo met une dizaine de secondes avant de démarrer. C'est assez troublant parce qu'avec ce player on ne voit pas la progression du chargement de la vidéo et on pense qu'il faut cliquer pour la démarrer.

Je note aussi un soucis pour mettre en plein écran la vidéo (partie HTML5) sauf sur Safari. Ce problème semble lié au widget d'iWeb. lorsqu'on affiche la page de la video en dehors de son cadre le problème disparait.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 27/3/2011, 13:13

Bonjour,
J'ai refait quelques test et je trouve que le chargement de la vidéo est encore un peu long.
Comment faire pour accélérer tout ça?
D'autres part, j'utilise viméo, une fois la lecture de la vidéo terminée, comment ne pas afficher les vidéos suivantes et tout simplement revenir à l'affiche...
Merci d'avance pour vos conseils.

Cordialement.

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 27/3/2011, 19:36

J'en sais rien, ce que je constate c'est que la page qui a le lecteur HTML5 a une ouverture boostée par rapport à celles qui utilisent QuickTime.
Pour Viméo, j'en sais rien non plus. Je suppose que c'est un des prix à payer si on n'est pas membre de Vimeo Plus

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 27/3/2011, 23:20

Bonjour,
Bon d'après vos constatations je vais passer toutes les vidéos en HTML 5.
Je me suis renseigné pour vimeo plus et effectivement ont peut customizer le player et lui demander que faire à l'issue de la lecture.
En tout cas merci de vous être penché sur mes petits soucis.
Cordialement.

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 5/4/2011, 11:48

Bonjour,
Ce week-end , j'ai constaté en allant chez un ami qui à un pc que les vidéo ne s'affiche pas du tout.
Nous avons fait le test avec IE et Firefox et rien ne s'affiche que ce soit la vidéo en HTML 5 ou bien le reste en QT. Il n'y a pas quicktime d'installé sur sa machine. Son OS est Windows 7 et les mises à jour sont effectuées.
Je pensais que passer la vidéo en HTML 5 aurait permis une lecture plus facile sur tous les types d'ordi.

Comment faire pour avoir une compatibilité maximum avec les machines du coté obscur.
-Changer les format de fichier en AVI ou autre, puisque le .mov pose problème.
-Créer un lien pour télécharger QT...
-Passer sur vimeo...mais cette solution ne me convient pas trop.
J'avoue être un peu perdu et perplexe.

Cordialement


allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 5/4/2011, 13:54

Sur IE c'est la vidéo .mp4 h264 qui devrait s'afficher grâce au lecteur flash flowplayer.
Quicktime n'a pas d'importance.
Perso j'ai essayé mes pages sur IE 8 et les vidéos s'affichaient

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 6/4/2011, 09:35

je suis allé sur votre site avec IE qui m'a affiché en lieu et place du widget une "error 2124". Après la lecture d'un topic sur le forum de ce player flash, il semble qu'il y ait un soucis avec cette ligne (qui se trouve vers la fin du code)
Code:
<img src="web.me.com/allegorie/videosite/Introbis.png" width="480" height="272" alt="Poster Image" title="No video playback capabilities." />
et plus particulièrement ceci :
Code:
web.me.com/allegorie/videosite/Introbis.png
ça, ce n'est pas une URL valide, une URL commence toujours par http:// , Flowplayer ne trouvant pas l'image d'arrière-plan affiche à la place un message d'erreur

Code:
http://web.me.com/allegorie/videosite/Introbis.png

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 8/4/2011, 16:47

Bonjour,
J'ai corrigé la ligne que vous m'avez indiqué.
Pourriez-vous me dire si cela fonctionne normalement car je n'ai pas IE.
Merci d'avance.

Cordialement.

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 8/4/2011, 19:24

Non ça ne marche pas et le problème vient toujours de votre image.
Quand je copie votre code et je remplace l'URL de votre image (présente deux fois sur le code) par une des miennes (non transparente et en JPG cette fois) tout rentre dans l'ordre et le lecteur flowplayer fonctionne

Pour tester le lecteur flowplayer même sans IE et windows, il suffit de copier la partie de votre code entre les balises
< object > et < /object >
Code:
<object class="vjs-flash-fallback" width="480" height="272" type="application/x-shockwave-flash"
        data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://web.me.com/allegorie/videosite/Introbis.png", {"url": "http://web.me.com/allegorie/videosite/Introbis.mp4","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="http://web.me.com/allegorie/videosite/Introbis.png" width="480" height="272" alt="Poster Image"
          title="No video playback capabilities." />
      </object>

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 8/4/2011, 21:20

J'ai remplacé l'image qui pose un soucis en JPG.
J'ai ensuite récupérer les url de cette image avec cyberduk et les ai collés dans le code.
J'espère que cela va fonctionner.
Merci pour votre patience.

Cordialement.

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 9/4/2011, 00:35

Maintenant ça marche très bien sur IE8

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 13/4/2011, 19:20

Bonjour,

Je reviens vers vous car j'ai maintenant repassé toutes les vidéos en HTML5 grâce au conseils avisés de koeklin mais j'ai encore un petit soucis.

Je trouve que le temps d'affichage est très long pour les pages avec plusieurs vidéos.
J'ai optimisé le poids de vidéos, vérifié dans les codes si il n'y avait pas d'erreur mais je n'ai rien trouvé de bizarre.
Pourriez-vous me dire si l'affichage est correct sur IE ou autre.
J'ai fait la manip indiqué un peu plus haut par koeklin avec le bout de code pour voir le résultat sans IE et windows et ça a l'air de fonctionner.
Maintenant mon soucis est d'avoir un temps d'affichage pas trop long pour mes vidéos.
Si quelqu'un à un tuyau... d'avance merci.

Cordialement.
http://www.allegorieproductions.com

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par koeklin le 15/4/2011, 10:58

Bizarre, même après avoir vider les caches , redemarrer mon Mac et changer de navigateurs, les pages avec plusieurs vidéos s'ouvrent aussi vite que les autres.
Ce n'était pas le cas avec le lecteur Quicktime
Mais j'aimerais avoir l'avis d'autres membres du forum.

-------------------
Débutersurmac.com (tutoriels vidéos): 'iWeb (de la version '06 à la version '09) - mon site iWeb (en construction)
Pas d'aide par message privé - merci.
avatar
koeklin
Membre Pathologique

Messages : 1924
Inscription : 20/10/2007 Localisation : le vexin
Version iWeb : A remplir!
Publication : Ftp integré

http://www.debutersurmac.com/

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par Madeline le 15/4/2011, 18:14

idem pour moi lors d'une première ouverture trés happy

-------------------
Mon site: http://madelinederiaz.com
Le projet «D'un printemps à l'autre»: http://www.postcard.madelinederiaz.com/site/Accueil.html
Graphisme et illustration: http://portfolio.madelinederiaz.com
L'art et la culture: http://forum.ravir.ca/fr/Accueil.html
avatar
Madeline
iWeb - Modo

Messages : 1088
Inscription : 07/02/2008 Féminin Localisation : dans mes rêves
Version iWeb : 3
Publication : locale

http://madelinederiaz.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par Yanik le 15/4/2011, 20:10

Bonsoir/bonjour

Un peu long sur mon vieil iMac G5 (Leopard).

Rapide sur le MacBookPro (Snow leopard) de ma femme. Légèrement retardé parfois par l'arrière plan du navigateur qui met une seconde pour se charger.
avatar
Yanik
iWeb - Modo

Messages : 916
Inscription : 03/11/2007 Masculin Localisation : France, Banlieue Parisienne Est 94
Version iWeb : A remplir!
Publication : MobileMe

http://web.me.com/kereol2/Site/Bienvenue.html

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par allégorie le 15/4/2011, 21:25

Bonsoir,

Merci pour vos retours.
Ca me rassure car chez moi, c'est un peu long... sans doute à cause de la machine (Imac intel blanc).
Sinon j'ai eu un retour d'amis qui ont des pc et l'ouverture des pages avec IE est quasi instantané.
Pour conclure on peut dire que le html5 fonctionne plutôt bien quel que soit les machines.
En tout cas, un grand merci à koeklin qui m'a bien aidé dans la jungle du html5, qui en fin de compte n'est pas si compliqué à mettre en oeuvre quand on a les bonnes infos.
Je pense faire un petit récap des manips à effectuer un peu plus tard.

Si vous avez d'autres retours et avis, n'hésitez pas.

Cordialement. salut

allégorie
Simple Membre

Messages : 26
Inscription : 09/03/2011 Masculin Localisation : Eure et loir
Version iWeb : A remplir!
Publication : MobileMe

http://www.allegorieproductions.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par Madeline le 15/4/2011, 21:56

Merci de dire Merci trés happy

-------------------
Mon site: http://madelinederiaz.com
Le projet «D'un printemps à l'autre»: http://www.postcard.madelinederiaz.com/site/Accueil.html
Graphisme et illustration: http://portfolio.madelinederiaz.com
L'art et la culture: http://forum.ravir.ca/fr/Accueil.html
avatar
Madeline
iWeb - Modo

Messages : 1088
Inscription : 07/02/2008 Féminin Localisation : dans mes rêves
Version iWeb : 3
Publication : locale

http://madelinederiaz.com

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par calou05 le 6/10/2011, 17:13

Bonjour à tous.
Je découvre tout récemment iweb et par la même occasion cet excellent site.
J'ai voulu essayé le lecteur proposé dans ce topic. Je pense avoir suivi les instructions correctement mais j'ai quelques soucis suivant le navigateur utilisé: En particulier, ça ne marche pas avec firefox alors que cela marche avec safari sur le même ordinateur. Sinon ça marche très bien sur mon iphone.
Par ailleurs, l'option plein écran ne marche correctement qu'avec Internet explorer (un comble!!!). Pouvez-vous m'aider ?

Je ne peux malheureusement pas encore posté ici le lien vers ma page de test No
je l'ai donc mis dans mon adresse de site sur mon profil.

calou05
Nouveau

Messages : 4
Inscription : 05/10/2011 Masculin Localisation : YVELINES
Version iWeb : A remplir!
Publication : Ftp integré

http://pbadiche.free.fr/test.html

Revenir en haut Aller en bas

Re: Vidéo et HTML5

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Page 1 sur 2 1, 2  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum