IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Mise en ligne de vidéos


Sujet :

HTML

  1. #1
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Novembre 2010
    Messages
    362
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2010
    Messages : 362
    Par défaut Mise en ligne de vidéos
    Bonsoir,

    Voici ma première question technique. Elle concerne la balise VIDEO.

    J'ai écris le code suivant pour l'affichage de deux vidéos. l'une avec l'attribut contols donnant accès à un lecteur vidéo préformaté et la seconde sans l'attribut controls et piloté via du code Javascript.

    Sous Firefox c'est nickel. Les deux vidéos fonctionnent à merveille. Mais en IE8 et sous Chromes cela ne marche pas.

    En fait pour être plus précis sour IE8 rien ne marche. Sous Chrome seul celle sans l'attribut controls fonctionne.

    En outre j'ai constaté que dans les fichiers exemple fourni sur le site de l'éditeur sous Chrome les deux vidéos fonctionnent.

    Les fichiers vidéos de l'éditeur sont sous .mp4 et .ogv.

    Mes vidéos réalisées au départ avec CamStudio, donc en .avi ont été converties en .mp4 via l'application FormatFactory et en .ogv via FireFox.

    Pourriez-vous me dire pourquoi mes vidéos bien que sauvées sous les formats .ogv et .mp4 telles celles de l'éditeur du livre ne tournent pas toutes les deux à la fois sous Chrome et FireFox ? Et quid de IE8 voire antérieur ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <video controls preload="none" poster="Resources/poster.png"
    		width="200" height="200">
    		<source src="Resources/TestRic.mp4">
     
     
    		<source src="Resources/TestRic.ogv">
    		Votre navigateur ne supporte pas l'élément vidéo
     
     
    	</video>
     
    	<video id="video" loop width="200" height="200">
    		<source src="Resources/TestRic.mp4">
     
     
    		<source src="Resources/TestRic.ogv">
    				Votre navigateur ne supporte pas l'élément vidéo
     
     
    	</video>
     
    	<br/>
     
    	<input type="button" value="Play" id="playpause" onclick="playOrPause()" />
    	<input type="button" value="Forward" id="forward" onclick="fastForward()" />
    	<input type="button" value="Muted" id="mutebutton" onclick="muteOrUnmute()">
     
    	<script type="text/javascript">
            
            var video = document.getElementById("video");
     
            function playOrPause() {
                    if (video.paused) {
                            video.play();
                            document.getElementById("playpause").value = "Pause";
                    } else {
                            video.pause();
                            document.getElementById("playpause").value = "Play";
                    }
            }
                    
            function fastForward() {
                    if (video.playbackRate == 1.0) { // normal
                            video.playbackRate = 10.0;
                            document.getElementById("forward").value = "Normal";
                    } else { // Fast forward
                            video.playbackRate = 1.0;
                            document.getElementById("forward").value = "Forward";
                    }
                    return false;
            }
            
            function muteOrUnmute() {
                    video.muted = !video.muted;
                    document.getElementById("mutebutton").value = video.muted ? "Unmuted" : "Muted";
            }
     
    </script>

  2. #2
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Par défaut
    http://sharktracks.co.uk/lcc/webmedia/video.html

    lire le tableau comparatif, ie8 ne supporte aucun des 2 formats.
    la vie n'est pas cirrhose des foies ...

    Avant de poster un message Rechercher n'est pas qu'une option.
    FAQ Web - Tuto Web

  3. #3
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Ben surtout, IE8 ne reconnait pas la balise <video> tout court !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  4. #4
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Ben surtout, IE8 ne reconnait pas la balise <video> tout court !
    d'un autre côté y a pas grand monde qui supporte ie tout court.
    la vie n'est pas cirrhose des foies ...

    Avant de poster un message Rechercher n'est pas qu'une option.
    FAQ Web - Tuto Web

  5. #5
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Novembre 2010
    Messages
    362
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations forums :
    Inscription : Novembre 2010
    Messages : 362
    Par défaut Code pour vidéo
    Bonsoir à tous,

    Après plusieurs tests avec le balise et la balise je suis parvenu au code ci-dessous qui fonctionne bien sous Safari, Chrome, FireFox et Opera.

    Quant à Internet Explorer, je n'arrive pas à lancer mes vidéos. C'est bien simple à la différence des autres navigateurs IE ne montre même pas à l'écran l'emplacement de ma vidéo.

    Comme vous pouvez le voir j'ai mis deux types de fichiers. Un .ogv et un .mp4. Dois-je proposer d'autres formats de fichier tels .wmv .omv bref toute les extensions possibles pour être sûr que cela marche et ce sous un maximum de versions IE ?




    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    <video width="320" height="240" controls>
     
      <source src="Resources/TestRic.mp4" type="video/mp4" />
      <source src="Resources/TestRic.ogv" type="video/ogg"; 
     
    codecs="theora,vorbis" />
     
        <object id="flowplayer" data="flowplayer-3.2.2.swf" type="application/x-             
        
        shockwave-flash" width="320" height="240" >
     
        <param name="movie" value="flowplayer-3.2.2.swf">
        <param name="allowfullscreen" value="true">
        <param name="flashvars" value="config={'clip': 
        {'url':'Resources/TestRic.mp4','autoPlay':false}}">
     
        </object> 
     
    </video>

  6. #6
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Par défaut
    du flv avec un lecteur flash. ça reste le plus classique pour la compatibilité ie
    la vie n'est pas cirrhose des foies ...

    Avant de poster un message Rechercher n'est pas qu'une option.
    FAQ Web - Tuto Web

Discussions similaires

  1. [HTML 5] Mise en ligne de vidéos
    Par RicardoBxl dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 09/01/2013, 15h38
  2. Mise en ligne d'un prog vb, précautions ?
    Par mosquitout dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 18/10/2005, 21h41
  3. mise en ligne
    Par zorba49 dans le forum ASP
    Réponses: 4
    Dernier message: 16/05/2005, 14h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo