Faire un lecteur video HTML5

puis concurrencer Youtube et conquérir le monde !

a marqué ce sujet comme résolu.

Salut les agrumes !

Je viens de publier mon premier tuto au sujet des technos du web pour vous parler de deux nouvelles balises HTML5 : <audio> et <video>.

Du coup, comme il n'y a rien de tel que la pratique pour maîtriser quelque chose, je vous propose ce petit atelier pour répondre à la dernière partie du tuto : Réaliser un lecteur vidéo !

Cet atelier est là pour que vous puissiez vous entraîner et pratiquer, seul ou en groupe, pour réaliser un projet. Afin de vous motiver, vous avez jusqu’à fin mai pour prendre vos claviers et répondre à une des catégories suivantes :

  • Original : Proposer une interface qui sort des sentiers battus !
  • Feature-maniac : Rien n'est laissé au hasard, tout est possible !
  • Clean code : Du code propre, pour faire plaisir aux yeux !
  • Coup de coeur du jury. Parce que.

Accompagné de 2 autres membres, nous élirons les projets qui répondent le mieux aux catégories et ces derniers seront érigés en héros dans un prochaine article :soleil: . Seulement n'oubliez pas que l'objectif premier est de s'amuser en apprenant ! (pas de tour du monde a gagner !)

J’essaierai (sans promesse) de tenir a jour un tableau des participations.

Pour des questions logistiques, vous pourrez proposer votre code dans un outil en ligne comme jsfiddle, jsbin, codepen etc. Nous ne regarderons pas les performances donc rien ne sert de minimifier votre code.

Bon courage et amusez-vous bien !

Liste des participations :

+7 -0

Un classement global non, car trier les participations sera bien trop fastidieux. Par contre il y aura des nominés dans les catégories proposées, et eux auront la joie, l'honneur et la gloire éternelle dans un article qui parlera de la vie du site :) (mais après il y aura probablement aucun gain matériel, on est là pour s'amuser après tout, pas pour faire le championnat du meilleur codeur du site ;) )

+0 -0

Salut à tous,

  1. Description

Je vous présente mon petit lecteur vidéo que j'ai réalisé. Je l'ai voulu épuré et ergonomique. Pour jouer ou mettre sur pause la vidéo, il suffit de cliquer dessus. Pour modifier le moment de lecture, il suffit de sélectionner le temps souhaité dans la barre de gauche. Cette barre correspond donc à toutes les informations liées au temps et celle de droite au son (vous pouvez choisir le volume).

Si vous pensez qu'il manque des fonctionnalités ou vous avez d'autres suggestions, n'hésitez pas à me laisser un commentaire.

Pour l'utiliser, vous n'avez qu'à copier les trois fichiers suivants à la racine d'un dossier et les deux petites icones play et pause dans un dossier image puis à modifier le lien de la vidéo vers celle que vous souhaitez voir.

  1. Le code
  • index.html:

 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
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--<link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>-->
</head>

<body>
    <div id="barre-lecture">
        <div id="barre-lecture-temps">
            <p id="barre-lecture-temps-affichage">0<br>0<br>0</p>
        </div>
        <div id="barre-lecture-progression"></div>
    </div>
    
    <video class="video" id="video">
        <source src="videos/free-spirit.mp4">
    </video>
    
    <div id="barre-son">
        <div id="barre-son-progression"></div>
    </div>
    
    <div class="conteneur-bouton">
        <img src="image/051.png" id="bouton-play" class="bouton">
        <img src="image/054.png" id="bouton-pause" class="bouton">
    </div>
    
    <div id="previsualiseur">0:00:00</div>
    
    <script src="script.js"></script>
</body>

  • script.js:

  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
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
function Video(element){
    this.video = element;
    this.etat = false;
    this.bouton_play = document.getElementById("bouton-play");
    this.bouton_pause = document.getElementById("bouton-pause");
    
    
    function disparaitre(e){
        e.style.opacity -= 0.1;
        if(e.style.opacity < 0){
            e.style.display = "none";
        }
        if(e.style.display == "block"){
            setTimeout(function(){disparaitre(e);}, 50);
        }
    }
    
    this.lecture = function(){
        this.video.play();
        this.etat = true;

        this.bouton_play.style.opacity = 1;
        this.bouton_play.style.display = "block";
        disparaitre(this.bouton_play);
    };
    
    this.pause = function(){
        this.video.pause();
        this.etat = false;
        
        this.bouton_pause.style.opacity = 1;
        this.bouton_pause.style.display = "block";
        disparaitre(this.bouton_pause);
    };
    
    this.goto = function(time){
        this.video.currentTime = time;
    };
    
    this.where = function(){
        return this.video.currentTime;
    };
    
    this.duree = function(){
        return this.video.duration;
    };
    
    this.volume = function(value){
        this.video.volume = value;
    }
    
    element.addEventListener("click", function(){
        if(videoLire.etat){
            videoLire.pause();
        }
        else{
            videoLire.lecture();
        }
    });          
}

var videoLire = new Video(document.getElementById("video")),
    temps = document.getElementById("barre-lecture-temps-affichage"),
    barreLecture = document.getElementById("barre-lecture"),
    barreLectureProgression = document.getElementById("barre-lecture-progression"),
    barreSon = document.getElementById("barre-son"),
    barreSonProgression = document.getElementById("barre-son-progression"),
    previsualiseur = document.getElementById("previsualiseur");    

setInterval(function(){
    var seconde, minute, heure, duree, dureeTotale, pourcentage;
    duree = videoLire.where();
    dureeTotale = videoLire.duree();
    pourcentage = duree / dureeTotale;
    barreLectureProgression.style.top = (89 - (pourcentage * 90)) + "%";
    
    duree = Math.round(duree);
    seconde =  duree % 60;
    minute = (duree - seconde) % 3600;
    heure = (duree - seconde - (minute * 60)) / 3600;
    temps.innerHTML = heure + "<br>" + minute + "<br>" + seconde;
}, 200);

barreSon.addEventListener("click", function(e){
    var hauteur, hauteurTotale, nouveauSon;
    hauteur = e.clientY;
    hauteurTotale = barreSon.offsetHeight;
    nouveauSon = (hauteurTotale - hauteur)/hauteurTotale;
    videoLire.volume(nouveauSon);
    barreSonProgression.style.top = hauteur + "px";
});

barreLecture.addEventListener("click", function(e){
    var dureeTotale, hauteurTotale, hauteurBarre, tempsTrop, nouveauTemps, nouvelleHauteur, tempsParcouru, duree, pourcentage;
    dureeTotale = videoLire.duree();
    hauteur = e.clientY;
    hauteurTotale = barreLecture.offsetHeight;
    tempsTrop = hauteurTotale / 10;
    hauteurBarre = hauteurTotale - tempsTrop;
    
    nouvelleHauteur = hauteur - tempsTrop;
    tempsParcouru = hauteurTotale - hauteur;
    
    nouveauTemps = (tempsParcouru / hauteurBarre) * dureeTotale;
    
    videoLire.goto(nouveauTemps);
    pourcentage = nouveauTemps / dureeTotale;
    barreLectureProgression.style.top = (89 - (pourcentage * 90)) + "%";
});

barreLecture.addEventListener("mousemove", function(e){
    var dureeTotale, hauteurTotale, hauteurBarre, tempsTrop, nouveauTemps, nouvelleHauteur, tempsParcouru, duree, seconde, minute, heure;
    dureeTotale = videoLire.duree();
    hauteur = e.clientY;
    hauteurTotale = barreLecture.offsetHeight;
    tempsTrop = hauteurTotale / 10;
    hauteurBarre = hauteurTotale - tempsTrop;
    
    nouvelleHauteur = hauteur - tempsTrop;
    tempsParcouru = hauteurTotale - hauteur;
    
    nouveauTemps = (tempsParcouru / hauteurBarre) * dureeTotale;
    
    seconde =  nouveauTemps % 60;
    minute = (nouveauTemps - seconde) % 3600;
    heure = (nouveauTemps - seconde - (minute * 60)) / 3600;
    
    previsualiseur.innerHTML = ("0" + parseInt(heure)).slice(-2) + ":" + ("0" + parseInt(minute)).slice(-2) + ":" + ("0" + parseInt(seconde)).slice(-2);
    previsualiseur.style.display = "block";
    previsualiseur.style.top = hauteur - 15.5;
});

barreLecture.addEventListener("mouseout", function(e){
    previsualiseur.style.display = "none";
});

  • style.css:

  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
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
body{
    padding: 0;
    margin: 0;
    margin-left: calc(3vw + 0.3em);
    font-family: Oswald; 
}

/**------------------------------------------------------------------------------------------------------------------------**/
/**---------------------------------------------------------Temps---------------------------------------------------------**/
/**------------------------------------------------------------------------------------------------------------------------**/
#barre-lecture{
    display: inline-block;
    background-color: rgb(2, 45, 78);
    width: 2vw;
    height: 50.6vw;
    overflow: hidden;
    margin: 0;
    padding: 0;
    margin-right: -0.2em;
}

#barre-lecture-temps{
    display: inline-block;
    color: rgb(10, 97, 163);
    width: 100%;
    height: 10%;
    text-align: center;
}

#barre-lecture-temps p{
    margin: 2%;
}

#barre-lecture-progression{
    display: inline-block;
    background-color: rgb(7,77,130);
    position: relative;
    top: 90%;
    width: 100%;
    height: 100%;
}
#previsualiseur{
    position: absolute;
    top: 100px;
    left: calc(5vw + 0.3em + 13px);
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: lighter;
    padding: 10px;
    border-radius: 5px;
}
#previsualiseur:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 15.5px;
   width: 0;
   height: 0;
   border-top: 5px solid transparent;
   border-right: 13px solid rgba(0, 0, 0, 0.5);
   border-bottom: 5px solid transparent;
}

/**------------------------------------------------------------------------------------------------------------------------**/
/**---------------------------------------------------------Video----------------------------------------------------------**/
/**------------------------------------------------------------------------------------------------------------------------**/

.video{
    display: inline-block;
    width: 90vw;
    height: 50.6vw;
    overflow: hidden;
    margin-right: -0.25em;
    z-index: 1;
}

/**------------------------------------------------------------------------------------------------------------------------**/
/**---------------------------------------------------------Volume---------------------------------------------------------**/
/**------------------------------------------------------------------------------------------------------------------------**/
#barre-son{
    display: inline-block;
    background-color: rgb(2, 45, 78);
    width: 2vw;
    height: 50.6vw;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#barre-son-progression{
    display: inline-block;
    background-color: rgb(7,77,130);
    position: relative;
    width: 100%;
    height: 100%;
    top: 40%;
    vertical-align: bottom;
}

/**------------------------------------------------------------------------------------------------------------------------**/
/**---------------------------------------------------------Boutons--------------------------------------------------------**/
/**------------------------------------------------------------------------------------------------------------------------**/
.bouton{
    position: absolute;
    display: none;
    opacity : 0;
    width: 20%;
    margin-left: 40%;
    margin-top: calc(25.3vw - 20vh);
    left: 0;
    top: 0;
    z-index: 0;
}

  • les icones: Image utilisateur Image utilisateur
  1. un petit aperçu démo lecteur vidéo

Comment vous le trouvez ?

PS: il faut activer la police google font dans le head pour ne pas avec rendu horrible

PS: voici le lien JSFiddle: le lien

PS: testé et approuvé sous Firefox/Ubuntu

+4 -0

Le player doit fonctionner sur quels navigateurs ?

Bonne question :) Considérons des navigateurs à jour. Pour ma part je testerais sous Chrome/Ubuntu, éventuellement Firefox. Surtout ne pas embêter a faire des fix juste pour des versions plus anciennes des navigos, mais par contre préciser sur quoi vous avez testé pourrait-être bienvenu.

Merci albert733 pour ta participation :)

+0 -0

Salut :D

Voici ma participation : https://gitlab.com/ajabep/LibreVideoPlayer

Je n'ai pas fait de JSBin/JSFiddle/Codepen, car les icônes sont faites avec une police, or je ne sais pas comment les stocker pour les fournir avec le bon MIME dans les pens…

L'API n'est pas encore dans sa version définitive, mais elle est bien avancée. J'ai beaucoup de boulot actuellement. Elle risque donc d'évoluer une fois le travail scolaire fini ^^

Je l'ai testé avec les navigateurs suivants :

  • Mozilla Firefox sur Windows 8.1 avec sa dernière version stable
  • Mozilla Firefox sur Windows 8.1 avec sa version alpha
  • Google Chrome sur Windows 8.1 avec sa dernière version stable
  • Opera sur Windows 8.1 avec sa dernière version stable
  • Opera sur Windows 8.1 avec sa version beta
  • IE sur Windows 8.1 avec sa dernière version stable
  • Mozilla Firefox sur Android avec sa dernière version stable
  • Google Chrome sur Android avec sa dernière version stable
  • Opera Mobile (sur l'émulateur pour Windows)

Opera Mobile, c'était juste pour le fun, mais ça m'a permis de détecter des bugs ^^

5 bugs ont été observés (1 sur IE, 1 sur Opera et 3 sur mobile). Je les ai listés et décrite avec les issues. Ils ne sont pas critiques, mais bien embêtantes. Je les résoudrais dès que possible.

La documentation n'est pas terminée, d'où le fait qu'elle ne soit pas encore en ligne.

Toutes les informations techniques sont données dans le README ;)

+2 -0

Super !

on pourrait avoir une capture d'écran.

la flemme de tester ;)

PS: j'ai testé mais les icones du son pour le rendre actif et du fullscreen pour le remettre en petit ne marche pas (ubuntu/mozilla)

PS2: tout marche (ubuntu/chromium)

+2 -0

Pour ceux qui veulent continuer a travailler leur compétences (en particulier CSS), Etoile Filante vous propose un atelier pour réussir a créer une galerie d'images en full-CSS sur OpenClassrooms. N’hésitez pas a aller y jeter un œil pour vous entraîner car c'est en forgeant qu'on devient forgeron !

Eskimon

Et puis on a besoin de développeurs front sur Zeste de Savoir pour faire tourner la machine ! :D

+2 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte