5568 sujets

Sémantique web et HTML

Bonjour à tous, je viens vers vous car j'ai un petit problème...

Je ne suis pas développeur web à la base et j'apprends sur le tas.
J'ai vu un tuto ici même ( cf : http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html )
J'ai suivi tout en fait.

Pour une page fan facebook j'utilise FBML pour mettre du code et afficher un contenu différent au non fan.
Donc j'ai inséré une photo en fond avec du CSS (c'est un copain qui m'a écrit le code ^^)
Moi je veux mettre une vidéo sur cette image de fonds.
Cependant j'ai créer un code comme dans le tuto.
Il fonctionne très bien puisqu'il marche sur Chrome et Safari.
Mais j'utilise Firefox 7.0.1 le plus souvent et ce code ne fonctionne pas. Il y a un rectangle noir et une croix blanche mais rien de se passe. (Si vous avez une solution pour IE quelque soit la version je veux bien Smiley lol )


Alors voilà mon code

Dîtes moi si vous pouvez m'aider Smiley sweatdrop Je veux juste pour le moment afficher la vidéo et je verrai plus tard pour la placer en CSS où je veux sur le background

<fb:visible-to-connection>
<center>
<div style="background: url(url de l'image); width: 520px; height: 800px; margin: 0 auto;">
</div>
<video width="300" height="200" controls="controls">
<source src="url de la vidéo.mp4" type="video/mp4" />
<source src="url de la vidéo.webm" type="video/webm" />
<source src="url de la vidéo.ogv" type="video/ogg" />
</video>
</center>
</fb:visible-to-connection>


Je répète que je n'ai aucune notion de HTML CSS et que je fait ça grâce aux tuto. Mais j'arrive un peu à comprendre quand même
Smiley biggrin
Modifié par Misakoo (08 Oct 2011 - 15:29)
Salut à toi,

a écrit :
j'utilise FBML.


Juste pour info: regarder ce lien. FBML ne fonctionnera pas Ad vitam.

Sinon c'est très bien si tu arrives à t'en sortir mais sache que la plupart des tutos FB sont à portée très très court terme et sont vite obsolètes. Y a des MAJ (mises à jour) sans arrêt.

Parenthèse fermée: utilises-tu un ftp? Si oui vérifie que dans ton .htaccess ces mentions figurent:



AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm




Sinon l'iframe apps peut t'aider à mieux insérer du contenu.
Modifié par jmlapam (09 Oct 2011 - 02:02)
Bonjour à toi merci pour ta réponse.
Je viens de me rendre compte d'une belle co**erie que j'ai dit ^^

J'utilise pas l'application FBML mais plutôt Static HTML: iframe tabs
Pour mon FTP, c'est un free.fr j'ai pas mis d' .htacces dedans !
Ah effectivement pas pareil !

Sinon essaie avec le .htaccess c'est un fichier sans nom mais portant l'extension htaccess et qui configure pas mal de choses >> voir ce lien
jmlapam a écrit :
le .htaccess c'est un fichier sans nom mais portant l'extension htaccess

C'est un détail, mais non: le nom du fichier est ".htaccess", et il n'y a pas d'extension.
Ah ces utilisateurs de Microsoft DOS... Smiley lol

<culture type="informatique">

Sur les systèmes Unix-like on appelle les fichiers un peu comme on veut, et les extensions ne sont qu'une convention de nommage. Beaucoup de fichiers n'ont pas d'extension (par exemple le fameux /etc/hosts: le nom de fichier est simplement "hosts"). Il peut aussi y avoir des "extensions" qui comportent un point, par exemple un nom de fichier qui se termine par ".tar.gz" dénote a priori une archive tar gzippée.

Les environnements de bureau (Gnome, KDE, le Finder ou la commande "open" sous OSX...) vont en général lire le nom complet du fichier et faire du pattern matching pour savoir à quelle application associer un fichier donné. Il y a d'autres mécanismes qui entrent parfois en jeu, comme l'inspection des premiers octets du fichier lui-même (plutôt sous Linux) ou encore de métadonnées parfois enregistrées avec le fichier (sous OSX notamment). Enfin, les fichiers dont le nom commence par un point sont masqués (il faut demander à afficher les fichiers masqués, ou utiliser une option de la commande "ls" dans un terminal, pour les lister).

Sur Windows, depuis Windows 2000 les noms de fichiers sont à peu près aussi libres que sous les systèmes Unix-like. Il doit rester des petites alertes dans Windows Explorer quand on essaie d'appeler un fichier ".machin" ou même "bidule" (sans «extension»), un peu comme sous OS X quand je renomme "bidule.truc" en "bidule.chose", mais ce sont des controles ou aides des explorateurs de fichier et non pas des limitations du système d'exploitation ou du système de fichiers.

</culture>
Et sur le fond:

1. Oui, les fichiers doivent être renvoyés par le serveur (ici le serveur Apache de ton hébergement Free) avec le bon type de média internet (dit aussi type MIME).

2. Tu peux vérifier le type de média en regardant l'en-tête Content-Type renvoyé par le serveur pour une requête HTTP sur ton fichier. Pour lister les requêtes HTTP renvoyées par le serveur pour un fichier donné, tu peux utiliser la Console Web de Firefox, ou un site tel que Web-Sniffer.

3. Se familiariser un peu avec HTTP (types de requêtes et réponses, principaux en-têtes et leurs valeurs...) c'est toujours utile. Smiley cligne

4. Tu dois pouvoir laisser tomber le fichier Ogg Theora et te contenter du MP4 et du WebM. Sauf si tu veux assurer le support de Firefox 3.5 et Opera 10.

5. Pour IE avant la version 9, la seule solution c'est de détecter le non-support de l'élément AUDIO, et de lui substituer un lecteur Flash qui va lire le fichier MP4. Détection et substitution se font en JavaScript. Il y a des scripts tout prêts qui gèrent ça, ça se trouve en cherchant un peu sur un moteur de recherche. Smiley smile
fvsch a écrit :

Ah ces utilisateurs de Microsoft DOS... Smiley lol


Entre autres,....
Justement sur DOS, il faut afficher les extensions pour créer un .htaccess ou enregistrer avec des guillemets depuis le bloc texte. Ceci m'a induit en erreur, merci. Smiley murf

Sinon cela ne change pas le fond de ce que je disais. Smiley smile
jmlapam a écrit :

Justement sur DOS, il faut afficher les extensions pour créer un .htaccess ou enregistrer avec des guillemets depuis le bloc texte. Ceci m'a induit en erreur, merci. Smiley murf


Windows, pas DOS. Smiley langue
Joli ! Smiley lol Je vais dire que c'était un diminutif de ma part... Smiley langue
Modifié par jmlapam (09 Oct 2011 - 21:42)
Bonjour merci pour votre participation.
Je ne sais pas si j'ai bien compris.

Pour pouvoir proposer une extension de fichier à tel ou tel navigateur, il faut que je mette un fichier htaccess dans mon répertoire ?
Si oui, que dois-je mettre dans ce fichier (le code requis) ?

Smiley sweatdrop
@FVSCH

Ok j'ai compris à peu prêt ce que tu m'as dit !

J'ai laissé tombé l'extension Ogg Theora comme tu m'as dit.
J'ai aussi la vidéo au format FLV.
Je peux faire qlq chose avec elle ? Parce que j'ai pas de flash player sur mon serveur (a mon avis c'est ce qu'il faut non ? )
Misakoo a écrit :
J'ai aussi la vidéo au format FLV.

Elle ne devrait pas te servir. Si tu veux proposer un lecteur Flash en solution de repli (si le navigateur n'intègre pas le support de l'élément VIDEO en HTML5, ce qui est le cas d'Internet Explorer 7 et 8 par exemple), le lecteur Flash pourra utiliser le fichier MP4.

Misakoo a écrit :
Parce que j'ai pas de flash player sur mon serveur (a mon avis c'est ce qu'il faut non ? )

Ne pas confondre:
- Le Flash Player est un logiciel installé (ou pas...) sur le poste de l'utilisateur, et utilisé par les navigateurs comme un plugin.
- Un lecteur de vidéo en Flash est un petit logiciel, en général compilé au format SWF, qui sera interprété par le Flash Player et qui sera chargé de lire une vidéo et de fournir des contrôles (marche/arrêt, controle du son, etc.).
Si tu veux utiliser un lecteur de vidéo en Flash, c'est donc la deuxième chose qu'il te faut.

Si tu veux faire simple, laisse tomber la solution de repli avec lecteur Flash, et pour IE 7-8 tu peux te contenter de fournir un lien de téléchargement du fichier MP4 en contenu de repli de ton élément VIDEO:
<video controls="controls">
  <source src="machin.mp4" type="video/mp4" />
  <source src="machin.webm" type="video/webm" />
  Pour regarder la vidéo, <a href="machin.mp4">téléchargez ce fichier: machin.mp4</a>.
</video>


Si tu tiens à utiliser un lecteur Flash en solution de repli, il y a des scripts tout prêts parmi lesquels:
http://html5media.info/
http://mediaelementjs.com/
http://videojs.com/

Enfin, sur la question des en-têtes HTTP qui doivent être déclarés pour que les fichiers soient reconnus par les navigateurs (lorsqu'ils intègrent le support du format utilisé):
1. Il n'est pas inutile de se familiariser avec le protocole HTTP quand on fait des sites web.
2. Chaque fichier envoyé par le serveur est envoyé avec un en-tête HTTP Content-Type qui doit avoir la bonne valeur. Pour une page HTML ce sera généralement text/html, pour une feuille de styles ce sera text/css, et pour un fichier WebM ce sera video/webm.
3. Tu peux vérifier quels en-têtes HTTP sont envoyés par le serveur pour une URL donnée en utilisant un outil tel que Web-Sniffer (dont j'ai donné le lien plus haut).
4. Si l'en-tête Content-Type envoyé n'est pas bon, tu peux configurer le serveur web au niveau local, en plaçant un fichier .htaccess à la racine de ton site, et déclarer les bons types de média pour les bonnes extensions grâce à la directive AddType. Voir les informations complètes données par jmlapam dans ce sujet.

Voilà, ce sera tout. Smiley smile
@FVSCH

J'ai pas bien saisi l'offre du site http://html5media.info/
Je met leur script ?
Mais je répète, je n'y connais rien pour l'instant au CSS et HTML.


En clair le fichier htaccess est-il indispensable ?

Si oui que dois-je mettre dans ce fichier ?
Une fois le fichier htaccess sur mon serveur, dans le code de ma page facebook je dois mettre quoi et où (à quel niveau du code) ?

Smiley sweatdrop
Je comprends vite mais il faut m'expliquer longtemps
Misakoo a écrit :
@FVSCH

Je comprends vite mais il faut m'expliquer longtemps


C'est du Pierre Dac !

Sinon je t'ai donné un lien où tout est dit et j'ai mis le code correspondant au début du topic.
On ne peut faire plus.

Bon courage à toi. Smiley cligne
@jmlapam

Bonjour,

Alors j'ai créé un fichier htaccess via Smultron.

Le fichier est juste nommé htaccess mais apparemment je ne peux pas mettre .htaccess en extension.

Dans ce fichier
j'ai rajouté comme tu l'as mis plus haut :

AddType video/ogg ogv

AddType video/mp4 mp4 m4v

AddType video/webm webm


Ce fichier je vais le mettre dans le dossier où se trouve les fichiers correspondant.
Ensuite c'est bon j'ai plus rien à faire ?
Modifié par Misakoo (18 Oct 2011 - 14:25)
Tu le copie par ftp et puis tu le renomme en .htaccess. Si arès renommage il disparaît de la liste, c'est que les fichiers commençant par un point sont cachés, à toi de changer les réglages dans ton client ftp.
Merci

Super ça fonctionne super sur Chrome, Safari et Firefox Smiley lol Smiley langue

Merci encore pour votre aide et votre patience !!! Smiley biggrin
Modifié par Misakoo (18 Oct 2011 - 15:08)
Misakoo a écrit :
Mais je répète, je n'y connais rien pour l'instant au CSS et HTML.

Ça va être compliqué.
Surtout qu'ici on a en plus des questions de système de fichiers Unix (fichier ".htaccess"), d'administration Apache (certes pas compliqué), d'en-têtes HTTP, et enfin de JavaScript (si tu souhaites utiliser un script tel que celui d'html5media.info). Ce n'est pas bien compliqué pour chaque concept, mais il faut une connaissance même superficielle de ces concepts pour éviter de faire du copier-coller de code que l'on ne comprend absolument pas et se retrouver à demander aux bonnes volontés d'un forum de faire du baby-sitting («j'ai monté ce code que je ne comprends pas, merci de le corriger pour moi»). Smiley smile

Misakoo a écrit :
En clair le fichier htaccess est-il indispensable ?

Attention, c'est ".htaccess", et pas "htaccess" (ou "htaccess.htaccess" ou "machin.htaccess" ou autre nom illicite). Et non, ce n'est pas indispensable si le serveur est déjà configuré pour envoyer les bons type MIME dans l'en-tête Content-Type des réponses HTTP. J'ai donné plus haut des indications sur la manière de le vérifier. Tu as eu l'occasion de le faire? Peux-tu nous dire, pour chaque fichier de média (.mp4, .ogv, .webm, etc.) que tu veux utiliser, quel est le type MIME actuellement renvoyé par le serveur?

Note en passant: si certains concepts ne te parlent pas (par exemple «type MIME»), rien ne t'interdit de demander à Google ou autre source de quoi il s'agit. Smiley cligne