Vidéo et HTML5
+2
koeklin
allégorie
6 participants
Page 1 sur 2
Page 1 sur 2 • 1, 2
Vidéo et HTML5
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
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
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
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.
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
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.
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
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
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
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
Re: Vidéo et HTML5
il suffit d'ajouter autoplay dans la balise video
par ex :
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.
par ex :
- Code:
<video class="video-js" width="640" height="264" controls preload autoplay poster="http://url/de/votre/image.png">
- 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.
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
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
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
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
Re: Vidéo et HTML5
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
Quicktime n'a pas d'importance.
Perso j'ai essayé mes pages sur IE 8 et les vidéos s'affichaient
Re: Vidéo et HTML5
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." />
- Code:
web.me.com/allegorie/videosite/Introbis.png
- Code:
http://web.me.com/allegorie/videosite/Introbis.png
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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 >
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>
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
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
Re: Vidéo et HTML5
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.
Ce n'était pas le cas avec le lecteur Quicktime
Mais j'aimerais avoir l'avis d'autres membres du forum.
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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.
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.
Re: Vidéo et HTML5
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
je l'ai donc mis dans mon adresse de site sur mon profil.
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
je l'ai donc mis dans mon adresse de site sur mon profil.
Page 1 sur 2 • 1, 2
Sujets similaires
» Insérer du HTML5 et Silverlight
» je charge des videos mpeg4 qui ne sont pas lisibles sur mon site...
» La vidéo à 360 °
» Probleme video
» Publier une video F4v en swf
» je charge des videos mpeg4 qui ne sont pas lisibles sur mon site...
» La vidéo à 360 °
» Probleme video
» Publier une video F4v en swf
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum