Vidéo sur site web lisibles sur PC, iphones, ipad, tablettes etc

Fermé
jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 - 19 févr. 2013 à 19:44
 jules235 - 28 mars 2013 à 19:49
Bonjour,
J'ai conçu il y a quelques années, un site pour un ami avec quelques vidéos que j'ai mis en place avec AVS Video To Flash. Ces vidéo ne sont visibles que sur un PC (Mac aussi certainement). J'aimerais quelles soient également lisibles aujourd'hui sur tablettes iphones, ipads etc..
J'ai essayé plusieurs choses (mp4, webM) mais je n'y arrive pas. Quelle est la méthode pour s'en sortir, ou le tutoriel adapté, ou le logiciel ?
Je ne parle pas du tout Anglais, je sais c'est un handicap et je ne suis pas non plus de la dernière génération.
Merci à qui voudra m'aider à résoudre mon problème
Jules


A voir également:

17 réponses

jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 1
20 févr. 2013 à 11:58
J'essaie de comprendre le code de alsacreation mais là je coince:

<source src="animations/Cavernae_Terragen2.mp4" type="video/mp4" />
Idem pour les autres formats

Par quoi je remplace ce contenu: "animations/Cavernae_Terragen2.mp4" ?

Par contre je pense que la, c'est le titre de ma vidéo: "video/mp4"

Merci de votre aide
1
Salut,

La chaine "video/mp4" correspond au type de la vidéo. Tu dois remplacer la chaine "animations/Cavernae_Terragen2.mp4" par le chemin de ta vidéo.

http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html :

<video width="400" height="222" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <source src="video.ogv" type="video/ogg" />
  Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc.
</video>


Si tes vidéos sont situés au même endroit que ta page web, tu peux mettre juste le nom de ta vidéo dans les attributs src (cf ci-dessus).
Si tes vidéos sont situé dans un dossier "mesvideos" à coté de page web, tu dois mettre le chemin relatif vers tes fichiers. Exemple : src="mesvideos/mavideo.mp4".
1
Salut,

Pour basculer sur une autre page à la fin de la vidéo, il me semble que tu sois obligé de passer par l'API de Youtube.

Un lien vers la doc officielle : https://developers.google.com/youtube/js_api_reference?hl=fr-FR#Events

Il faudra donc utiliser la fonction onStateChange pour détecter les évènements du player, et si l'évènement correspond à YT.PlayerState.ENDED (fin de la vidéo), alors effectuer la redirection.

Voici un exemple simple :

<!DOCTYPE html>  
<html>  
<head>  
 <title>sample</title>  
</head>  
<body>  
   
 <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->  
    <div id="player"></div>  

    <script>  
      // 2. This code loads the IFrame Player API code asynchronously.  
      var tag = document.createElement('script');  

      tag.src = "//www.youtube.com/iframe_api";  
      var firstScriptTag = document.getElementsByTagName('script')[0];  
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  

      // 3. This function creates an <iframe> (and YouTube player)  
      var player;  
      function onYouTubeIframeAPIReady() {  
        player = new YT.Player('player', {  
          height: '390',  
          width: '640',  
          videoId: 'u1zgFlCw8Aw',  
          events: {  
            'onReady': onPlayerReady,  
            'onStateChange': onPlayerStateChange  
          }  
        });  
      }  

      // 4. The API will call this function when the video player is ready.  
      function onPlayerReady(event) {  
        event.target.playVideo();  
      }  

      // 5. The API calls this function when the player's state changes.  
      function onPlayerStateChange(event) {  
        if (event.data == YT.PlayerState.ENDED) {  
          document.location.href= 'http://www.google.fr';  
        }  
      }  
    </script>  
   
</body>  
</html>  


Bon courage.
1
Profil bloqué
19 févr. 2013 à 19:54
salut
les tablettes et phones ne supportant pas le flash, il faut faire ca avec la balise vidéo en html5

plus d'infos ici : https://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

le +: c'est en français
0

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

Posez votre question
jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 1
20 févr. 2013 à 10:49
Merci de l'aide, j'ai déjà essayé sans succès. Depuis j'ai lu d'autres articles qui m'ont fait quelque peu évoluer, je vais essayer à nouveau aujourd'hui. j'aurais peut être besoin de conseils sur des points précis.
Merci encore
0
jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 1
21 févr. 2013 à 10:55
Bonjour,
Grâce à toi je progresse tout doucement, sur mon pc, en visite du site, la page s'ouvre, le cadre apparait mais pas la vidéo.
Dans le cadre apparait le texte: "Aucune video dont le format ou le type MIME est géré n'a été trouvé"
Je suis retourné sur Alsacréation, j'y ai trouvé les "Types MIMES" et le codage approprié. Mais ou le mettre?
J'ai fait plusieurs essais infructueux sur la page de orientation des vidéos
j'ai fait un fichier à part, mais le lien? Ca ne marche pas
Autre question: dans la ligne: <source src="video.ogv" type="video/ogg" />, il y a ogv et ogg, normal?
La conversion en mp4 me donnait m4v, que j'ai rectifié ???
Voici ma page, si tu peux jeter un oeil:
<html>
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ici l</title>

</head>
<body>
<video width="400" height="222" controls="controls" preload="auto" autoplay="true" >
<source src="pianos_bion_10_NEW.mp4" type="pianos_bion_10_NEW/mp4" />
<source src="pianos_bion_11_NEW.webm" type="pianos_bion_11_NEW/webm" />
<source src="pianos_bion_12_NEW.theora.ogv" type="pianos_bion_12_NEW/ogg" />
</video>
<p><font color="#FF0000" size="5"><a href="http://www.bion-piano.com/index-bis.html">Aller à la page d'accueil du site Bion Piano</a></font></a></b></p>
AddType pianos_bion_12_NEW/ogg .ogv
AddType pianos-bion_10_NEW/mp4 .mp4
AddType pianos_bion_11_NEW/webm .webm
</body>
</html>

Le site est www.300pianos.fr qui bascule sur www.bion-piano.com
Merci encore de ton aide
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 21/02/2013 à 15:32
Salut

voila un generateur de code qui va te faire les code html5 et meme un fallback flash pour les ancienne vs IE
version online
http://radservebeer.free.fr/outilswebmaster/html5vid-generator/indexfr.html

version a telecharger
http://is.gd/nETY83


a+

♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Salut,

1 - Pour les types MIMES

Les types MIMES ne doivent pas être déclarés dans ta page html mais dans un fichier .htaccess.
A la racine de ton site, crée un .htaccess ou édite le si il existe déjà et copie ces lignes (ne remplace pas video par le nom de ta vidéo, copie ces lignes tels quels) :

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm


En résumé, tu indiques à ton serveur web que les fichiers avec l'extension .ogv doivent être traité comme des vidéos ogg, les fichiers .mp4 comme des vidéos mp4, etc.

2 - ogg et ogv

Oui c'est normal que ta vidéo ai une extension .ogv. Pas de soucis à ce niveau puisque nous venons justement de dire à ton serveur que les fichiers .ogv doivent être traités comme des fichiers vidéos ogg (cf. point 1). Je te renvoie vers la page wikipédia de Ogg pour plus d'infos : http://fr.wikipedia.org/wiki/Ogg

Le format .m4v est est très proches du .mp4. Il semble donc qui tu puisses renommer tes fichiers .m4v en .mp4 sans problèmes. Aucune certitude à ce sujet donc à vérifier.

3 - Page html

Dans ta page html, tu dois corriger ceci :

<video width="400" height="222" controls="controls" preload="auto" autoplay="true" >
<source src="pianos_bion_10_NEW.mp4" type="video/mp4" />
<source src="pianos_bion_11_NEW.webm" type="video/webm" />
<source src="pianos_bion_12_NEW.theora.ogv" type="video/ogg" />
</video> 


Enfin, il semble que les vidéos pianos_bion_11_NEW.webm et pianos_bion_12_NEW.theora.ogv ne soit pas sur ton serveur (erreur 404).
Ta vidéo mp4 est bien en ligne par contre : http://www.300pianos.fr/pianos_bion_10_NEW.mp4


Bon courage
0
jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 1
21 févr. 2013 à 17:17
Ok, je vous remercie tous les 2, je vais essayer dès demain et vous tenir au courant des résultats.
A bientôt
Jules
0
jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 1
24 févr. 2013 à 10:58
Bonjour,
Désolé du retard, j'ai été quelque peu souffrant ces jours ci.
Réponse à RAD ZONE:
J'ai fait plusieurs essais de remplacement des vidéos "Madagascar" par les miennes, je n'ai rien obtenu sauf: problème sur les fichiers MIME
Dans l'exemple ci dessous
http://radislav.free.fr/video/Madagascar.mp4
Que doit on remplacer, jute le titre Madagascar ou toute la ligne ou ?

Réponse à Pitet:

J'ai effectué, je pense correctement les modifs sur le code, je pense que les vidéos sont bien présentes sur le site (4 000 000 octets)
J'ai toujours ce problème de fichiers Mime en .htaccess.
Je peux enregistrer un fichier en htaccess sur Front page en le renommant, mais le contenu doit il avoir juste les 3 lignes ou les balises html, head, body doivent elles être présentes et ou placer ces 3 lignes dans ces balises? J'ai un peu tout essayé sans succès.
Jules
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
24 févr. 2013 à 12:51
Salut

tu dois remplacer TOUTE LA LIGNE par le chemin vers ta video !

si tu as des probleme de MIME c est que tu n a pas mis ces fameuses 3 lignes
AddType video/ogg ogv

AddType video/mp4 mp4 m4v

AddType video/webm webm


dans le .htaccess qui est sur SUR TON SERVEUR !


et les video en .wbem et ogv ne SONT PAS SUR TON SERVEUR!

regarde j ai mis les video ( j ai converti le mp4 qui est present en wbem et ogv ) sur mon serveur "radislav.free.fr" qui a bien les 3 lignes dans son .htaccess et j ai utilise mon generateur , ca fonctionne ( c est un peu lent mais c est a cause de free ! )
voila le html genere par le generateur , j ai meme mis le fallback flash pour IE6 et tout fonctionne copie ce code colle le dans une page lance la page html dans ton navigateur tu verra !

<!-- "HTML5 Video Generator by Rad Zone Webcreation  -->
<video controls width="320" height="240">
	<source src="http://radislav.free.fr/jules235/pianos_bion_10_NEW.mp4" type="video/mp4">
	<source src="http://radislav.free.fr/jules235/pianos_bion_10_NEW.webmvp8.webm" type="video/webm">
	<source src="http://radislav.free.fr/jules235/pianos_bion_10_NEW.theora.ogv" type="video/ogg">
	
<!-- " debut Fallback flash  -->
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240">
		<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="controlbar=over&amp;file=http%3A%2F%2Fradislav.free.fr%2Fjules235%2Fpianos_bion_10_NEW.mp4">
		<!--[if !IE]>-->
		<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="320" height="240">
		<param name="wmode" value="transparent">
		<param name="allowfullscreen" value="true">
		<param name="allowscriptaccess" value="always">
		<param name="flashvars" value="controlbar=over&amp;file=http%3A%2F%2Fradislav.free.fr%2Fjules235%2Fpianos_bion_10_NEW.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]-->
		<span title="No video playback capabilities, please download the video below">piano</span>
	</object>
<!-- " fin Fallback flash  -->

</video>
<p>
	<strong>Download video:</strong> <a href="http://radislav.free.fr/jules235/pianos_bion_10_NEW.mp4">MP4 format</a> | <a href="http://radislav.free.fr/jules235/pianos_bion_10_NEW.theora.ogv">Ogg format</a> | <a href="http://radislav.free.fr/jules235/pianos_bion_10_NEW.webmvp8.webm">WebM format</a>
</p>




PS: n utilise pas Front page c est tres mauvais pour faire du html , prend

Notepad++

a+
0
Ça y est, je m'en suis sorti, ça marche et j'ai trouvé pourquoi ça ne fonctionnait pas.
Merci à vous 2 sincèrement. Je vais maintenant essayer de comprendre chaque point pour ne pas mourir idiot. J'aurai peut être des explications à vous demander sur des points qui me sembleront obscurs.
Je vais dans un premier temps voir comment placer un lien pour sortir de la page de la vidéo (page noire). Et ensuite intégrer la vidéo dans la page web, et non pas sur une page noire.
J'en profite pour poser une question: est ce que l'on peut lire sur un site une vidéo Youtube (ça je sais le faire) et ensuite, à la fin de la vidéo, revenir à la page web, sans intervention de la personne visionnant la vidéo. Si oui par quelle procédure ou code
Encore merci
Jules
0
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
26 févr. 2013 à 17:33
tu integre le code iframe de la video youtube concerné

sur youtube, clic-droit sur la video et "copier le code d'integration"

cela te fournie un code html qui débute par <iframe> et se termine </iframe>

Ce code tu l'intègre ou tu veux sur la page HTML (dans le body bien sur) et permettra au visiteur de visionner la video directement sur la page de ton site, sans avoir à en sortir
0
jules235 Messages postés 8 Date d'inscription mardi 19 février 2013 Statut Membre Dernière intervention 10 avril 2013 1
9 mars 2013 à 08:35
Bonjour,
Merci, et en plus c'est facile. 2 dernières questions pour essayer de faire mieux:
- Comment faire démarrer la vidéo automatiquement, sans cliquer sur la flèche.
- Comment commander en fin de lecture de la vidéo un changement de page automatique sans qu'il soit tributaire du temps. Le temps de lecture de la vidéo peut être différent en fonction du dédit de connexion.
Merci de votre aide
Jules 235
0
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
Modifié par RAD ZONE le 9/03/2013 à 09:37
Salut
si tu te sert de la balise video html5 et pas de youtube tu fais comme ca !tu change bien sur l adresse de redirection , la j ai mis celle de CCM

<video controls width="320" height="240" autoplay="true" onended="document.location.href='http://www.commentcamarche.net'">
 <source src="http://radislav.free.fr/jules235/pianos_bion_10_NEW.mp4" type="video/mp4">  
 <source src="http://radislav.free.fr/jules235/pianos_bion_10_NEW.webmvp8.webm" type="video/webm">  
 <source src="http://radislav.free.fr/jules235/pianos_bion_10_NEW.theora.ogv" type="video/ogg"></video>   


PS: met les video sur ton serveur ne te sert pas du mien ;-))

a+


♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
0
Bonjour,
Rien à faire, je n'arrive pas à faire fonctionner mes vidéos, certainement mes fichiers Mime?
J'ai utilisé Youtube et résolu mes problèmes, donc Rad Zone peut enlever mes vidéos de son serveur. Je le remercie de son aide.
J'ai résolu le problème de démarrage automatique sur youtube dès le chargement. Il me reste juste à basculer sur une autre page automatiquement à la fin de la vidéo. Si quelqu'un a la solution?
Encore merci à tout ceux qui m'ont aidé.
Jules
0
Bonjour,
Je reviens sur le sujet, je viens de m'apercevoir que les vidéos Youtube sur le site, démarrent automatiquement sur mon PC mais pas sur iphone (il faut cliquer sur la flèche).
J'ai mis ce code, pouvez vous me dire ce qui ne va pas pour l'iphone:

<p align="center"><br/><iframe width="420" height="315" src="http://www.youtube.com/embed/TsiHov6pHH4?rel=0 &autoplay=1" frameborder="0" allowfullscreen></iframe></p>
Merci à nouveau de vos conseils
0