Share
Il est très amusant de coder les designs Premium Pixel d'Orman Clark. Cette fois, nous allons jeter un coup d'œil à son interface de lecteur vidéo! Nous allons le construire en utilisant une bibliothèque vidéo HTML5 géniale appelée jPlayer avec quelques HTML et CSS.
Nous allons commencer par créer ensemble un document HTML5 vierge, tout en nous rappelant de placer jQuery à la source (j'utilise jQuery hébergé par Google). Je créerai également un lien vers le dernier fichier HTML qui garantira qu'Internet Explorer interprète et dresse correctement les éléments HTML5..
Une dernière chose, vous remarquerez que je suis également lié à une feuille de style, nous ajouterons le CSS ultérieurement dans le tutoriel..
Ensuite, nous devrons télécharger jPlayer "La bibliothèque jQuery HTML5 Audio / Video Library". Allez sur jplayer.org et téléchargez la dernière version..
Allez-y et créez un dossier nommé "javascript" ou "js" (ou tout ce à quoi vous êtes habitué) dans votre dossier Web et copiez-le. jquery.jplayer.min.js dans ça. Ensuite, vous devrez créer un lien vers ceci dans votre code HTML, ajoutez donc ce qui suit dans votre section (n'oubliez pas de changer le chemin comme il convient).
Nous allons maintenant ajouter le balisage nécessaire à la création du lecteur. Ne vous inquiétez pas si cela vous semble insupportable, la plupart de cela est tiré de démonstrations sur le site jplayer.org et je vous expliquerai tout ce qui est nécessaire par la suite..
Mise à jour requise Voici un message qui apparaîtra si la vidéo n'est pas prise en charge. Une alternative Flash peut être utilisée ici si vous le souhaitez.
Tout d'abord, vous verrez un conteneur principal pour tout. Nous allons appliquer des styles globaux à cela. Ensuite, il y a la div "# jquery_jplayer_1" que le script jPlayer va cibler et ajouter à la vidéo (vous verrez cet identifiant référencé dans la fonction jQuery lorsque nous l'ajouterons).
Vous n'avez vraiment besoin que de vous préoccuper de tout ce qui se trouve à l'intérieur du Maintenant pour les bonnes choses… Ici, nous avons ajouté nos contrôles, tous commentés pour plus de clarté. Pour démarrer, notre bouton de lecture suivi du bouton de pause. Ce sont tous deux des noms de classe appropriés pour un style ultérieur. Ensuite, nous avons une étendue avec une classe de "séparateur". Orman a utilisé quelques petits séparateurs astucieux dans la conception, puisque ce sont des séparateurs avec un dégradé, nous utiliserons une image pour ceux-ci (vous pouvez cependant utiliser des dégradés CSS3 si vous êtes sûr de votre confiance).. Ensuite, nous créons la barre de progression et quelques éléments entrent dans sa construction. Nous avons d’abord «jp-progress» qui est la base de la barre de progression. Ensuite, nous avons «jp-play-bar». Ceci est la barre rouge cool qui défile à travers signifiant la progression de la vidéo. Notez que nous utilisons également une étendue avec une classe de 'poignée' ici pour créer le petit bouton indiqué dans le dessin.. Maintenant pour l'heure actuelle et la durée de la vidéo. Nous les recréerons une nouvelle fois à l'aide de divs, avec les classes jp-current-time et jp-duration. Notez que nous avons également utilisé à nouveau une autre classe, cette fois pour créer un autre séparateur, mais en utilisant une barre oblique afin qu'aucune image ne soit utilisée ici. Après cela, vous verrez que nous avons un autre séparateur, comme auparavant.. Les boutons de volume et la barre doivent ensuite être créés. Nous allons d’abord créer deux boutons, «jp-mute» et «jp-unmute». Un seul d'entre eux sera affiché à la fois, l'autre sera caché avec jPlayer. La barre de volume a les mêmes principes que la barre de progression, même structure (bien que des noms de classe différents, évidemment). Si vous visualisez le fichier dans le navigateur, vous ne verrez pas encore beaucoup de choses se passer.. Maintenant la partie principale, nous allons ajouter une vidéo! Pour une fonctionnalité complète et une prise en charge multi-navigateurs, votre vidéo doit être disponible dans plusieurs formats. Les formats multimédia HTML5 pris en charge par jPlayer sont les suivants: Différents navigateurs prennent en charge différents formats vidéo. le format approprié sera sélectionné en fonction du navigateur, à condition qu'il soit disponible. Visitez caniuse.com pour plus d'informations sur qui, quoi et où. Nous aurons également besoin d’un fichier .png servant d’affiche lorsque le film ne joue pas.. Pour les besoins de ce tutoriel, j'utilise une bande-annonce de film téléchargée à partir de http://trailers.apple.com. Je l'ai ensuite converti dans les formats appropriés (il existe de nombreuses ressources gratuites en ligne pour vous aider ici, sur Google…). Donc, une fois que vous les avez convertis et créé votre affiche .png, placez-les à un endroit approprié dans votre projet. Après cela, nous devrons ajouter un extrait d'instanciation pour que jPlayer soit opérationnel.. Ajoutez ce qui suit au bas de votre document en vous rappelant de changer les chemins des fichiers pour refléter les vôtres. Vous verrez que nous pointons jPlayer sur l'élément "# jquery_jplayer_1". Consultez la documentation de jPlayer pour plus d'options et d'attributs. OK, vous devriez avoir quelque chose de similaire à ceci: Avant d'ajouter des CSS pour l'interface de contrôle, nous allons ajouter un arrière-plan, des polices, etc. au corps, ainsi que les styles pour la base de la vidéo. Allez-y et créez une feuille de style, en vous rappelant de la lier dans la section head de votre page Web. J'ai également lancé une réinitialisation juste au cas où votre navigateur décide d'ajouter des marges et tout le reste! Après les règles de réinitialisation, j'ai ajouté un arrière-plan avec une image. Ensuite, j'ai ciblé tout le lecteur (la vidéo et les commandes), je lui ai donné une famille de polices de caractères et ajouté des zones d'ombre (tout en pensant utiliser les préfixes du navigateur!). Nous lui avons ensuite donné des styles lorsque le lecteur est en mode plein écran. Vous devriez maintenant avoir quelque chose de similaire au suivant: Il est temps de commencer à mettre en forme la section des commandes! Nous allons d'abord styler la partie grise de base. Nous utiliserons une largeur de fluide de 100%. Elle est utilisée de sorte qu'elle s'étire sur toute la largeur en mode plein écran. J'ai également ajouté une hauteur fixe de 35px. Ensuite, nous allons utiliser un dégradé pour l'arrière-plan. Je l'ai créé et créé avec GradientApp, puis nettoyé à l'aide de l'API Prefixr.. Enfin, j'ai ajouté une zone d'ombre pour créer les ombres incrustées, en me rappelant une nouvelle fois d'utiliser les préfixes du navigateur. J'ai ensuite ajouté quelques styles pour le support de contrôles (essentiellement un conteneur), nous permettant de centrer le panneau de contrôle en mode plein écran. Vous verrez comment cela fonctionne plus tard. J'ai utilisé une largeur fixe de 570 pixels et l'a centré à l'aide de Vous ne devriez pas voir beaucoup de changement depuis la dernière étape, à l'exception du fond dégradé que nous venons d'ajouter: Nous ajouterons ensuite les boutons de lecture et de pause, ainsi que le séparateur. Je vais utiliser un sprite pour tous les boutons, que vous pouvez saisir dans les fichiers sources. J'ai d'abord défini une largeur et une hauteur pour les boutons pause et lecture, ils auront tous les deux les mêmes dimensions. Ensuite, j'ai ajouté un retrait de texte pour que tout texte contenu dans les liens d'ancrage ne s'affiche pas à l'écran car nous n'en avons pas besoin, nous allons utiliser l'image du sprite. Enfin, nous allons utiliser D'accord, nous allons d'abord cibler la base de la barre de progression. Nous allons lui donner un arrière-plan solide, ajouter un bord de rayon de 5 pixels (avec les préfixes), deux zones d'ombre, une ombre portée et une ombre incrustée. Nous ajouterons ensuite des largeurs et des hauteurs, toutes deux fixes. Nous allons ensuite ajouter un peu de marge en haut pour le centrer dans toute l'interface. Ensuite, nous ajouterons quelques styles pour la barre de recherche, indiquant le niveau de chargement de la vidéo. Nous appliquerons une largeur de 0px car jPlayer gérera la largeur réelle de manière dynamique, et une hauteur de 100%, de sorte qu'il héritera de la hauteur de la barre de progression, en le remplissant entièrement. Nous allons également lui donner le rayon de la frontière de 5px et un fond. Enfin, nous allons créer la barre de progression qui se déplace pendant la lecture de la vidéo. Je vais utiliser une image et la répéter sur l'axe des ordonnées. De nouveau, comme précédemment, nous ajouterons une largeur de 0px et jPlayer gérera le reste. Ensuite, souvenez-vous de cette balise span que nous avons créée? Ce sera utilisé pour la poignée. Nous allons aussi utiliser une image et la positionner absolument. Nous aurons besoin d'utiliser Time to do time (snigger) Sérieusement, modélisons l'heure et la durée actuelles. Nous allons les cibler tous les deux d'abord pour appliquer certains styles qu'ils vont partager. Le reste est constitué de choses basiques comme les marges. Nous ne sommes pas loin de l'achèvement, alors prenons la section des volumes. Nous aurons besoin de deux boutons, le muet et le muet. Nous appliquerons un style aux deux, puis à l'image-objet individuellement.. Notez que nous avons utilisé Nous sommes sur la dernière étape maintenant! Tout ce qui nous reste est le bouton plein écran. En suivant les mêmes étapes que précédemment, nous allons appliquer à nouveau l'image-objet et utiliser l'indentation du texte pour masquer le texte (également appelé «repousser l'écran»). Et rappelant d'utiliser Et notre lecteur vidéo est complet! Allez-y et essayez la fonctionnalité plein écran, c'est génial! En utilisant le plugin jPlayer et le design ravissant d’Orman, nous avons codé une interface de lecteur vidéo parfaite en pixels. N'oubliez pas que jPlayer a encore de nombreuses astuces, alors assurez-vous de consulter les démos et la documentation. J'espère que vous avez apprécié ce tutoriel, merci d'avoir lu.
Étape 4: Contrôle du balisage
jouer pause
Étape 5: Ajout d'une vidéo
Étape 6: CSS de base vidéo
html, corps, div, span, applet, objet, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr et adresse, citer, code, del, dfn, em, img, ins, kbd, q, s, samp, petit, grève, fort, sous, sup, tt, var, b, u, i, dl, dt, dd, dd, ol, ul, li, champs, forme, étiquette, légende, tableau, légende, tbody, tfoot, thead, tr, th, td, article, à part, toile, détails, intégrer, figure, figcaption, pied de page, en-tête, menu, navigation, sortie, rubis, section, résumé, heure, marque, audio, vidéo, entrée, zone de texte, sélectionnez arrière-plan: transparent; bordure: 0; taille de la police: 100%; marge: 0; contour: 0; remplissage: 0; alignement vertical: ligne de base , details, figcaption, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block body hauteur de ligne: 1 abbr [titre], dfn [titre] bordure-bas: 1px en pointillé; curseur: help blockquote, q quotes: none blockquote: before, blockquote: after, q: before, q: after contenu: none del text-decoration: ligne-finale hr background: transparent; border: 0; clear: both; color: transparent; height: 1px; margin: 0; padding: 0 mark color-background: # ffffb3; police-style: italic entrée, sélectionnez vertical-align: middle ins backgro und-color: red; couleur: white; décoration de texte: none ol, ul style de liste: none table border-collapse: collapse; border-spacing: 0 a text-decoration: none; body marge: 0; rembourrage: 0; fond: url ("bg.jpg") répéter; .jp-video font-family: "Helvetica Neue", Helvetica, Arial, sans serif; position: relative; -webkit-box-shadow: 0px 0px 20px rgba (0,0,0, .3); -moz-box-shadow: 0px 0px 20px rgba (0,0,0, .3); box-shadow: 0px 0px 20px rgba (0,0,0, 0,3); .jp-video-360p width: 570px; marge: auto 100px; .jp-video-full width: 480px; hauteur: 270px; position: statique! important; position: relative .jp-video-full .jp-jplayer top: 0; gauche: 0; position: fixe! important; position: relative; / * Règles pour IE6 (plein écran) * / overflow: hidden; z-index: 1000; .jp-video-full .jp-gui position: corrigé! important; position: statique; / * Règles pour IE6 (plein écran) * / top: 0; gauche: 0; largeur: 100%; hauteur: 100%; z-index: 1000; .jp-video-full .jp-interface position: absolute! important; position: relative; / * Règles pour IE6 (plein écran) * / bottom: 0; gauche: 0; z-index: 1000; 
Étape 7: Style des contrôles de base
marge: 0 auto; .jp-interface position: relative; largeur: 100%; hauteur: 35px; image d'arrière-plan: -webkit-linear-gradient (haut, rgb (242, 242, 242), rgb (209, 209, 209)); image d'arrière-plan: -moz-linear-gradient (haut, rgb (242, 242, 242), rgb (209, 209, 209)); image d'arrière-plan: -o-linear-gradient (haut, rgb (242, 242, 242), rgb (209, 209, 209)); image d'arrière-plan: -ms-linear-gradient (haut, rgb (242, 242, 242), rgb (209, 209, 209)); image d'arrière-plan: gradient linéaire (haut, rgb (242, 242, 242), rgb (209, 209, 209)); filter: progid: DXImageTransform.Microsoft.gradient (GradientType = 0, StartColorStr = '# f2f2f2', EndColorStr = "# d1d1d1"); -webkit-box-shadow: encart 0px 1px 0px # f7f7f7, encart 0px -1px 0px # e2e2e2; -moz-box-shadow: encart 0px 1px 0px # f7f7f7, encart 0px -1px 0px # e2e2e2; box-shadow: incrément 0px 1px 0px # f7f7f7, incrément 0px -1px 0px # e2e2e2; div.jp-controls-holder clear: les deux; largeur: 570px; marge: 0 auto; position: relative; débordement caché;
Étape 8: Boutons Lecture et Pause
contour: aucun; ce qui corrigera un problème en cliquant, empêchant certains navigateurs d'afficher une horrible lueur bleue autour du bouton. a.jp-play, a.jp-pause width: 40px; hauteur: 35px; float: gauche; retrait du texte: -9999px; contour: aucun; a.jp-play background: url ("sprite.png") 0 0 no-repeat; a.jp-pause background: url ("sprite.png") -40px 0 no-repeat; affichage: aucun; .separator background-image: url ("separator.png"); répétition de fond: non répétée; largeur: 2px; hauteur: 35px; float: gauche; marge supérieure: 7px; marge droite: 10px;
Étape 9: Barre de progression
à droite: XXpx; pour s'assurer qu'il bouge avec la barre de jeu. .jp-progress background: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: encart 0px 1px 4px rgba (0,0,0, 0,4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-shadow: encart 0px 1px 4px rgba (0,0,0, 0,4), 0px 1px 0px rgba (255,255,255, .4); box-shadow: incrément 0px 1px 4px rgba (0,0,0, 0,4), 0px 1px 0px rgba (255,255,255, .4); largeur: 280px; hauteur: 10px; float: gauche; marge supérieure: 13 px; .jp-seek-bar width: 0px; hauteur: 100%; curseur: pointeur; .jp-looking-bg background: # 575555; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar background: url ("play-bar.png") left repeat-x; largeur: 0px; hauteur: 10px; position: relative; z-index: 9999; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; .jp-play-bar span position: absolute; en haut: -3px; à droite: -12px; background: url ("handle.png") centre sans répétition; largeur: 16px; hauteur: 17px; 
Étape 10: heure actuelle / durée
.jp-heure-actuelle, .jp-durée taille de la police: 11px; famille de polices: Arial; couleur: # 444444; marge supérieure: 12px; float: gauche; .jp-current-time float: left; affichage: en ligne; .jp-duration float: left; affichage: en ligne; text-align: right; .jp-video .jp-heure-actuelle margin-left: 10px; .jp-video .jp-duration marge-droite: 10px; .time-sep float: left; marge: 13px 3px 0 3px; taille de police: 11px; famille de polices: Arial; couleur: # 444444;
Étape 11: Boutons de volume et barre
contour: aucun; encore une fois pour éviter cet état actif problématique. Pour créer la barre de volume, nous allons utiliser un processus similaire à celui de la barre de progression. Nous appliquerons une largeur et une hauteur fixes, lui donnerons un arrière-plan, des ombres de boîte et un rayon de bordure de 5px. La barre de volume elle-même est transparente, nous ne lui appliquerons donc pas d'arrière-plan. Ensuite, nous avons un autre bouton. en utilisant à nouveau une étendue, nous appliquerons une image d'arrière-plan, utilisez position: absolue; et positionnez-le vers la droite pour qu'il se déplace correctement. .jp-video a.jp-mute, .jp-video a.jp-unmute text-indent: -9999px; float: gauche; hauteur: 35px; contour: aucun; .jp-mute float: left; fond: url (… /images/sprite.png) -80px 0 pas de répétition; marge supérieure: 1px; marge gauche: -10px; largeur: 35px; a.jp-unmute background: url (… /images/sprite.png) -115px 0 no-repeat; marge supérieure: 1px; marge gauche: -13px; affichage: aucun; largeur: 38px; .jp-volume-bar float: left; marge supérieure: 13 px; marge droite: 10px; débordement caché; largeur: 70px; hauteur: 10px; curseur: pointeur; arrière-plan: # 706d6d; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: encart 0px 1px 4px rgba (0,0,0, 0,4), 0px 1px 0px rgba (255,255,255, .4); -moz-box-shadow: encart 0px 1px 4px rgba (0,0,0, 0,4), 0px 1px 0px rgba (255,255,255, .4); box-shadow: incrément 0px 1px 4px rgba (0,0,0, 0,4), 0px 1px 0px rgba (255,255,255, .4); .jp-volume-bar-value background: transparent; largeur: 0px; hauteur: 10px; position: relative; .jp-volume-bar-value span position: absolute; en haut: 0px; à droite: 0px; background: url (… /images/volume.png) centre sans répétition; largeur: 11px; hauteur: 10px;
Étape 12: Bouton plein écran
contour: aucun; encore une fois (qui peut certes être appliqué à toutes les ancres au début de la feuille de style). .jp-full-screen background: url (… /images/sprite.png) -150px 0 sans répétition; float: gauche; largeur: 40px; hauteur: 35px; retrait du texte: -9999px; marge gauche: -15px; contour: aucun; .jp-restore-screen background: url (… /images/sprite.png) -150px 0 sans répétition; float: gauche; largeur: 40px; hauteur: 35px; retrait du texte: -9999px; marge gauche: -15px; contour: aucun;
Conclusion
Accentsconagua