Personnaliser Lecteur Video Html5 2020 | Carte Son Emu 0404
Une question? Pas de panique, on va vous aider! 18 novembre 2014 à 23:14:58
MP4
Modifier le lecteur video mp4 à sa manière, par exemple, mettre un bouton "play" personnalisé, une barre de chargement personnalisé, un bouton play en cas de pause, une liste déroulante pour l'audio
Si tu vois ce que je veux dire...
18 novembre 2014 à 23:21:25
Salut,
Ce que tu dois faire, c'est mettre ta balise vidéo sans aucun élément de contrôle (donc en ne mettant pas l'attribut "controls"). À ta charge ensuite de créer les éléments nécessaires en html, de les styliser en CSS, puis de les raccorder à ta vidéo en javascript. Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code! 19 novembre 2014 à 0:42:30
Il n'y a pas de rapport avec la balise vidéo elle-même. Tu vas devoir créer des éléments en html (un bouton lecture / pause, un contrôleur de volume, etc. Javascript - personnaliser - Problème lors de la récupération de la durée d'une vidéo HTML5. ), donc tu pourras leur donner les classes que tu veux. 19 novembre 2014 à 1:34:50
En gros:
?? Et après comment je les modifies en CSS?
Le clic sur le bouton n'est possible que s'il est visible et pareillement, le clic sur la vidéo n'est possible que si aucun élément ne la recouvre. Structure HTML
L'élément conteneur_video contient l'élément video et l'élément play_pause, qui accueille le bouton Pause/Lecture, géré graphiquement en CSS. Positionnement et habillage CSS #conteneur_video {
position: relative;}
/* Le bouton de Pause/Lecture, recouvre la totalité de la vidéo
* et masqué au chargement de la page via Javascript
*/
#play_pause {
position: absolute;
top: 0; left: 0;
/* Le bouton aux dimensions du lecteur */
width: 600px; height: 490px;
background: transparent url() no-repeat 50% 50%;}
/* Class ajoutée par Javascript lors du clic Pause */
{
background-image: url();} Contrôle de lecture par Javascript
Utilisation de JQuery, à lier à la page pour que le code suivant soit interprété par le navigateur.
Personnaliser Lecteur Video Html5 Web
Si ce n'est pas inclus, la première image de la vidéo sera utilisée à la place
preload
Spécifie comment la vidéo doit être chargée au chargement de la page (ne fonctionne pas sous Internet Explorer ou si l'attribut autoplay est activé). L'attribut preload peut prendre trois valeurs: none – metadata – auto
src
Spécifie la source de la vidéo
width
Spécifie la largeur de la vidéo
La balise prend aussi en charge les attributs globaux
Voir les autres balises d'intégration
area – audio – canvas – embed – figcaption – figure – iframe – img – map – object – param – source – track
Personnaliser Lecteur Video Html5 Canvas
Nous te conseillons de créer un nouveau sujet pour poser ta question.
Vous devriez utiliser l'attribut poster pour s'assurer que l'internaute ne tombe pas sur une page blanche. Controls
En ajoutant cet attribut, vous pourrez fournir vous même les boutons de commande (Jouer, Pause, etc. ) pour votre vidéo. Par exemple, Safari possède des boutons de base très bien, mais vous pourrez créer les vôtres pour personnaliser votre site Web. Sous-titres
Il n'y a malheureusement pas encore d'attributs pour les sous-titres. Il y a beaucoup de discussions à ce sujet dans le groupe HTML 5. Il existe un moyen d'ajouter des sous-titres avec du javascript. Idéalement, nous ne devrions pas avoir besoin de script pour y arriver. Problématiques
Codecs
Je ne suis pas un expert en codecs vidéo et audio, mais il subsiste encore quelques problèmes à ce sujet. Plyr, un lecteur de vidéos ou musique HTML5 personnalisable à souhait ! - Dév. Web - ShevArezo`Blog. Internet Explorer
Internet Explorer ne supporte pas présentement la balise