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

Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Créer un lecteur vidéo personnalisé avec CSS3, HTML5 et JavaScript
Par Johnny Simpson

Le , par Bovino
10 commentaires

32PARTAGES

5  0 


Je vous propose une traduction de l'article anglophone Making Custom CSS3 Video Players With HTML5 and Javascript publié par Johnny Simpson sur son blog InsertHTML.

N'hésitez pas à faire part de vos remarques, commentaires ou améliorations éventuelles.

Créer un lecteur vidéo personnalisé avec CSS3, HTML5 et JavaScript.

Vous avez lu gratuitement 18 773 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

10 commentaires
Commenter Signaler un problème
Doksuri
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 23/07/2020 à 17:46
deterrer un script de plus de 7ans et s'etonner qu'il ne fonctionne pas du 1er coup en faisant un copier/coller sans chercher plus loin....

si au moins vous preniez la peine de nous donner le message d'erreur sour firefox...
2  0 
Doksuri
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 24/07/2020 à 11:48
je vois qu'il y a pas mal d'erreurs liees a des extensions, avez-vous essaye la page en navigation privee (sans les extensions) ?
1  0 
Avatar de
https://www.developpez.com
Le 24/04/2013 à 13:07
Parfaitement parfait !

Mais je suggérer de rajouter un bouton play au milieu de la vidéo quand elle stoppé, un peu comme sur youtube. Mais bon c'est juste une suggestion.

Franchement chapeau, le design et tout !
0  0 
Vulci
Avatar de Vulci
Membre à l'essai https://www.developpez.com
Le 23/07/2020 à 17:30
Bonjour !

Super tutoriel, merci encore pour sa traduction !
Néanmoins, l'utilisant avec un collègue, nous nous sommes heurtés à un problème de taille, le player du lecteur bug sous Firefox.
Il n'apparaît pas à chaque fois. néanmoins, aucun soucis sous Chrome.

Ce bout de code fait partie d'un projet de taille.
Ainsi, si vous avez une solution, une idée, ou avez envie de prendre 10min de votre temps pour copier coller le code et essayer de voir pourquoi cela ne marche pas, moi et mon collègue nous vous serions vraiment reconnaissant.

merci pour votre travail,
Bonnes continuations
Guillaume
0  0 
Vulci
Avatar de Vulci
Membre à l'essai https://www.developpez.com
Le 23/07/2020 à 23:30
Quelle amabilité, bonjour à vous aussi !

Déjà de 1, ce ton est inapproprié, ce tuto est le seul sur lequel on tombe pour réaliser cela
De 2, inutile de parler sans rien savoir, il n'a jamais été dit que le code avait été copié collé sans réflexion, donc réponse inadaptée
Et pour finir, qui a parlé d'une erreur sur Firefox ? J'ai simplement dit que le player ne s'affichait qu'une fois sur plusieurs lancements, à des rythmes irréguliers, pas que cela provoquait une erreur.

Nous avons évidemment modifié l'entièreté du code pour que cela convienne à nos attentes, mais maintenant comme avant les modifications d'ailleurs, cela ne tourne que dans 10 à 15%des lancements sur Firefox

J'ai simplement posé une question, à laquelle j'espèrais obtenir une réponse basée sur autre chose que des inventions et des suppositions.
Pour me répondre cela avec autant d'envie d'aider, autant se taire.
0  0 
Doksuri
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 24/07/2020 à 7:03
Citation Envoyé par Vulci Voir le message
nous nous sommes heurtés à un problème de taille, le player du lecteur bug sous Firefox.
Il n'apparaît pas à chaque fois. néanmoins, aucun soucis sous Chrome.
c'est vrai, c'est moi qui ai mal interprete cette phrase, il n'y a aucun probleme...

Citation Envoyé par Vulci Voir le message
cela ne tourne que dans 10 à 15%des lancements sur Firefox
ce n'est absolument pas du a une erreur

Citation Envoyé par Vulci Voir le message
pas que cela provoquait une erreur.
avez-vous au moins affiche la console pour confirmer ca ?
0  0 
Vulci
Avatar de Vulci
Membre à l'essai https://www.developpez.com
Le 24/07/2020 à 10:30
Nous avons essayé d'afficher la console d'Erreurs de Firefox ducoup suivant ce que vous venez de conseiller
De mon côté, aucune erreur (et pourtant ça marche pas), mais mon collègue a ça :



Le truc c'est que le code a aucune raison de planter, le css a été drastiquement réduit pour éviter l'appel à des méthodes qui ne fonctionneraient pas, et de même pour le Javascript qui a été grandement modifié (vis à vis de ce dont on a besoin mais aussi pour essayé de localiser ce qui ne plaît pas à firefox).

Dans le cas d'une erreur, elle devrait se produire tout le temps, rien ne change entre nos différents lancements, rien du tout, et pourtant desfois ça passe.
Cela n'empêche en rien le Javascript de fonctionner, on continue (par le biais d'autres boutons interagissant avec), d'avoir accès à la vidéo, tout fonctionne, play/pause avance rapide etc... c'est vraiment juste dans l'apparition de cette satanée barre de player qu'il y a un soucis, et pas toujours.

J'ai écris ici dans l'espoir de rencontrer qqn qui avait essayé ce tuto, et qui se heurtait à ces problèmes aussi...
Le but était pas de déranger, ni d'arriver les mains dans les poches, soyez sûrs qu'on a cherché avant de débarquer ici
0  0 
Vulci
Avatar de Vulci
Membre à l'essai https://www.developpez.com
Le 24/07/2020 à 13:59
Merci pour votre idée brillante, cela fonctionne en navigation privée environ 95% des fois ! C'est déjà une bonne chose !
Savez vous ce qu'on devrait changer vis à vis de ces erreurs pour que cela fonctionne en navigation normale ?

Merci de votre aide
0  0 
Doksuri
Avatar de Doksuri
Expert confirmé https://www.developpez.com
Le 24/07/2020 à 16:18
quelles sont les erreurs sans les autres extensions ? (quand ca ne fonctionne pas)

perso : les extensions installees sont de la responsabilite du client... si ca fait tout planter, c'est pas mon probleme car elles alterent le comportement de base de la page
0  0 
Vulci
Avatar de Vulci
Membre à l'essai https://www.developpez.com
Le 24/07/2020 à 16:53
J'entends bien, merci de votre aide, écoutez si sans vous prendre trop de temps vous arrivez à comprendre ce qui déconne alors on prend, sinon..je ne sais pas..dans tous les cas nous ne sommes pas assez expérimentés pour savoir ce qui déconne par nous même dans ce genre de problème ..
Ci joint en premier le screen des erreurs quand cela fonctionne (48 fois sur 50 en nav privée)

Ci joint le screen des erreurs quand cela ne fonctionne pas
0  0 
Commenter Signaler un problème