Balise video

Résolu/Fermé
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 - 29 déc. 2011 à 12:05
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 6 janv. 2012 à 16:49
Bonjour,

Cette balise video ne fonctionne pas sur ma page en HTML5 (Firefox) :

# <video controls>
# <source src="aqua3_.mp4" type="video/mp4">
# <preload="auto">
# <autoplay="true">
# <p>Le format *.mp4 n'est pas pris en charge par votre navigateur</p>
# </video>

Quand je fais visualiser la video avec le clic droit, elle s'affiche bien dans une autre page.

Avez-vous une solution ?

Merci.

Guy



A voir également:

10 réponses

RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 29/12/2011 à 18:41
Salut

il faut passer ta video en .ogv ou en .webm ! firefox ne lis pas les mp4 !!

si tu veux utiliser le html5 pour video il faut faire des fallbacks !

voila une balise d insertion video type en html5
avec fallback flash pour IE<9 et safari sur windows !

la au moins tu passe sur 99% des machines !
on ne parle pas de smartphone , ou la ca ce complique encore ,
enfin ca ca passe sur les iphone , ipad c est sur !!

<video controls poster="clip.png" width="640" height="264"> 
 <source src="Video/mp4_video.mp4" type="video/mp4"> 
 <source src="Video/webmvp8_video.webm" type="video/webm"> 
 <source src="Video/theora_video.ogv" type="video/ogg"> 
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="640" height="264"> 
  <param name="movie" value="player.swf"> 
  <param name="wmode" value="transparent"> 
  <param name="allowfullscreen" value="true"> 
  <param name="allowscriptaccess" value="always"> 
  <param name="flashvars" value="controlbar=over&image=clip.png&file=mp4_video.mp4"> 
  <!--[if !IE]>--> 
  <object type="application/x-shockwave-flash" data="player.swf" width="640" height="264"> 
  <param name="wmode" value="transparent"> 
  <param name="allowfullscreen" value="true"> 
  <param name="allowscriptaccess" value="always"> 
  <param name="flashvars" value="controlbar=over&image=clip.png&file=mp4_video.mp4"> 
  <!--<![endif]--> 
  <a href="https://get.adobe.com/flashplayer/"> 
  <img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"> 
  </a> 
  <!--[if !IE]>--> 
  </object> 
  <!--<![endif]--> 
  <img alt="Ocean" src="clip.png" width="640" height="264" title="No video playback capabilities, please download the video below"> 
 </object>
<Video>
<p>
	<strong>Download video:</strong> <a href="Video/mp4_video.mp4">MP4 format</a> | <a href="Video/theora_video.ogv">Ogg format</a> | <a href="Video/webmvp8_video.webm">WebM format</a>
</p>  


a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
1
schancel Messages postés 296 Date d'inscription dimanche 20 mars 2011 Statut Membre Dernière intervention 7 décembre 2018 49
29 déc. 2011 à 17:36
<video src="aqua3_.mp4" autostart="true" loop="-1"/>
<!-- le type importe peu car tu ne saurais utiliser une balise video pour inserer une image par exemple -->
0
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 2
29 déc. 2011 à 17:47
Merci mais cela ne fonctionne pas.

Guy
0
schancel Messages postés 296 Date d'inscription dimanche 20 mars 2011 Statut Membre Dernière intervention 7 décembre 2018 49
Modifié par schancel le 29/12/2011 à 18:18
<embed src="aqua3_.mp4" autostart="true" loop="-1">
0
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 2
29 déc. 2011 à 19:42
Merci à tous,

Cela fonctionne maintenant avec ce code :

<video src="aqua3_.ogv" autoplay loop="loop"></video>


Mais pas de loop avec Firefox, je corrigerais plus tard... De toute façon c'est une page pour mobiles et j'espère qu'elle fonctionnera sur tous ?

https://www.grenault.net/mob_aqua.htm

Bonne soirée.

Guy
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 déc. 2011 à 19:59
De toute façon c'est une page pour mobiles et j'espère qu'elle fonctionnera sur tous ?

comme ca c est sur que non ;-)) elle fonctionne deja pas tout pc !

et si c est une page pour mobile ,
il vaudrait mieux la coder en html5 et la stucturer pour les mobile !!!

regarde la version de CCM avec ton mobile ( ou si tu as un agent switcher sur ton fureteur )tu vas voir la difference !

a+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 2
30 déc. 2011 à 08:19
Oui, en effet tu as raison, cela ne fonctionne pas du tout sur le Samsung Galaxy Ace qui reconnait normalement le .mp4 et le .3gv. J'ai essayé les deux, rien ne fonctionne !

La page est "normalement en HTML5" mais j'ai 1 erreur et 1 warning :

Validation Output: 1 Error

Warning Line 6, Column 27: Using windows-1252 instead of the declared encoding iso-8859-1.

<meta charset="iso-8859-1">

?
Error Line 69, Column 9: The text content of element script was not in the required format: Expected space, tab, newline, or slash but found { instead.

</script>

Syntax of script documentation:
Zero or more code comments, each of which is either a single-line comment starting with "//" or a multi-line comment starting with "/*" and ending with "*/". The content must also meet the constraints of the script microsyntax. For further details, see Inline documentation for external scripts.

Je n'arrive pas à les corriger ?

La page mobile est ici :

https://www.grenault.net/mob_aqua.htm

Merci !

Guy
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
Modifié par RAD ZONE le 30/12/2011 à 12:33
change le charset de ta page !
<meta charset="windows-1252"/>


Les version Android supérieures à la 2.0 (Eclair) qui inclue WebKit 3.0 supportent la balise vidéo avec le codec H.264
Attention cependant, il y a une subtilité : il faut rajouter onclick="this.play();

 <video id="movie" width="480" height="370" poster="http://exemple.fr/poster.jpg" controls onclick="this.play();">   
    <source src="http://exemple.fr/monfichiervideo.mp4" type="video/mp4">   
    Your browser does not support html5 video.   
    </video>


Android 2.0, 2.1, 2.2 fonctionnent avec le container .mp4 (H264+AAC)


A partir de la version 2.3 d'Android (Gingerbread), le support du codec WebM


essaye ca et dis moi!
chez moi ca passe , mais je n ai pas d android !!
le mp4 EN PREMIER pour iphone !!

<!DOCTYPE HTML>   

<html>   

<head>   
  <title>RAD ZONE Webcreation</title>   
  <meta charset="utf-8" />   
</head>   

<body>   
<video controls autoplay poster="https://www.grenault.net/aqua3_.png" width="160" height="120" onclick="this.play();">   
 <source src="https://www.grenault.net/aqua3_.mp4" type="video/mp4">   
 <source src="https://www.grenault.net/aqua3_.webm" type="video/webm">   
 <source src="https://www.grenault.net/aqua3_.ogv" type="video/ogg">   
 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="160" height="120">   
  <param name="movie" value="http://player.longtailvideo.com/player.swf">   
  <param name="wmode" value="transparent">   
  <param name="allowfullscreen" value="true">   
  <param name="allowscriptaccess" value="always">   
  <param name="flashvars" value="autostart=true&controlbar=over&image=http%3A%2F%2Fwww.grenault.net%2Faqua3_.png&file=http%3A%2F%2Fwww.grenault.net%2Faqua3_.mp4">   
  <!--[if !IE]>-->   
  <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="160" height="120">   
  <param name="wmode" value="transparent">   
  <param name="allowfullscreen" value="true">   
  <param name="allowscriptaccess" value="always">   
  <param name="flashvars" value="autostart=true&controlbar=over&image=http%3A%2F%2Fwww.grenault.net%2Faqua3_.png&file=http%3A%2F%2Fwww.grenault.net%2Faqua3_.mp4">   
  <!--<![endif]-->   
  <a href="https://get.adobe.com/flashplayer/">   
  <img src="https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player">   
  </a>   
  <!--[if !IE]>-->   
  </object>   
  <!--<![endif]-->   
  <img alt="aqua3" src="https://www.grenault.net/aqua3_.png" width="160" height="120" title="No video playback capabilities, please download the video below">   
 </object>   
</video>   
<p>   
 <strong>Download video:</strong> <a href="https://www.grenault.net/aqua3_.mp4">MP4 format</a> | <a href="https://www.grenault.net/aqua3_.ogv">Ogg format</a> | <a href="https://www.grenault.net/aqua3_.webm">WebM format</a>   
</p>   
</body>   

</html>


j ai un generateur qui vas t aider a etre bon de base !! apres il faudra un peu chercher et adapter en fonction des specificites des smartphone !

telecharge le generateur

a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 2
30 déc. 2011 à 13:05
Wahou !!!

Un Grand Merci pour ton aide !

Bon, j'étais loin du compte... C'est en ligne. Juste quelques problèmes à régler comme mettre une version .webm sur mon site...

Je dois partir et je n'ai pas pu tester comme il faut. Marche avec FF, Opera, Chrome et Safari...

Il faut que je change le type aussi car j'ai mis quelque chose mais certainement pas ce qu'il fallait ! En tous cas : aucune erreur HTML5

A bientôt.

Merci encore.

Guy
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
30 déc. 2011 à 13:28
Il faut que je change le type aussi
oui sur la balise flash ;-))

simplifie toi et prend le generateur que je t ai mis plus haut ! ;-))

et pour convertir tes video , voila un petit outils tres simple et leger qui sort de tres bon resultat !
http://www.mirovideoconverter.com/

a+
0
graffx Messages postés 6506 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 24 mars 2019 1 973
30 déc. 2011 à 14:33
Merci pour ces infos utiles, je n' ai pas d' android non plus.
0
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 2
31 déc. 2011 à 09:03
Bonjour,

Ton script fonctionne parfaitement bien avec FF, IE, Opera, Chrome, Safari et SeaMonkey. Semble fonctionner aussi sur Iphone mais pas sur le Samsung Galaxy Ace.

Pratique ton programme, je vais en parler sur mon site, je te dirais où...

Merci et bonnes fêtes de fin d'année !

Guy
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
31 déc. 2011 à 11:07
Salut

comme je t ai dis , cela depend aussi beaucoup des possibilites de chaque model de smartphone , il faut certainement ajouter une variable ou un format ou des dimensions specifique ,mais la , il y a certainement des forums Samsung qui parle de ce problemes ??

en tout cas cela passe bien sur Android !

Essai sur Emulateur

Pratique ton programme, je vais en parler sur mon site, je te dirais où...
ok ;-))

a+
0
grenault Messages postés 37 Date d'inscription mercredi 2 avril 2008 Statut Membre Dernière intervention 7 juillet 2017 2
6 janv. 2012 à 16:00
Bonjour,

J'ai trouvé la solution et je l'ai exposée ici :

https://i-services.com/membres/forum/messages.php?uid=153839&sid=102187&idsujet=24789#top

J'ai parlé aussi de ton générateur comme promis.

Merci !
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
6 janv. 2012 à 16:49
Salut

J'ai parlé aussi de ton générateur comme promis.
ok , thank's ;-))

je met le sujet en resolu

a+
0