L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Construire un lecteur multimédia angulaire avec Kendo UI
Dans ce didacticiel, nous verrons comment combiner des composants Kendo UI et Angular pour créer une application de lecteur multimédia.
Kendo UI est un ensemble personnalisable de composants JavaScript UI. il fournit également un ensemble de thèmes pour Material UI et Bootstrap, ainsi qu'un ensemble d'icônes unique et une gamme de couleurs dans sa palette. Il contient des bibliothèques pour Angular, Vue, React et jQuery, ainsi que des composants disponibles sous forme de multiples packages npm, éliminant ainsi la crainte de gonfler votre application avec des composants inutiles et augmentant votre bundle de compilation.
Angular est un framework JavaScript permettant de créer une application Web. il offre les meilleurs pratiques et outils pour faciliter le développement d'applications. Angular utilise des modèles déclaratifs, une injection de dépendance et Observables pour alimenter des applications sur plusieurs plates-formes.
Kendo UI fournit des composants spécifiques à Angular pour faciliter leur développement, et nous en utiliserons certains pour créer un lecteur multimédia simple. L’application utilisera le lecteur vidéo HTML5 couplé et comportera des commandes personnalisées construites à l’aide des icônes du jeu d’icônes de Kendo UI.
Pour suivre ce didacticiel, vous devez avoir une connaissance de base de Angular. Assurez-vous que Node et npm sont installés avant de commencer.
Si vous ne connaissez pas encore Angular, veuillez suivre le tutoriel officiel ici . Vous pouvez revenir à cet article lorsque vous aurez terminé.
Nous allons créer l'application à l'aide des outils suivants:
Voici une capture d'écran de l'application que nous allons construire:
Initialisation de l'application et installation des dépendances
Pour commencer, nous allons utiliser le CLI (interface de ligne de commande) fourni par l'équipe Angular pour initialiser notre projet.
Installez d'abord le CLI. en exécutant npm install -g @ angular / cli . npm est un gestionnaire de paquets utilisé pour installer des paquets. Il sera disponible sur votre PC si vous avez Node installé; sinon, téléchargez le nœud ici .
Pour créer un nouveau projet Angular à l'aide de la CLI, ouvrez un terminal et exécutez:
pour créer un nouveau projet angular mediaplayer --style = scss . ]
Cette commande est utilisée pour initialiser un nouveau projet angulaire. le projet utilisera SCSS comme pré-processeur.
Ensuite, exécutez la commande suivante dans le dossier racine du projet pour installer les dépendances:
npm install @ progress / kendo-theme- défaut
Démarrez le serveur de développement angulaire en exécutant ng serve dans un terminal situé dans le dossier racine de votre projet.
Le composant en-tête affiche le logo de l'application et très peu d'informations. Ce composant est principalement un composant d'affichage.
Exécutez la commande suivante pour créer le composant d'en-tête:
ng générer un en-tête de composant
Ouvrez ensuite le fichier src / app / header / header.component.html et mettez-le à jour pour qu'il ressemble au code ci-dessous:
< header >
< div class = " marque " >
< img src = ] " /assets/logo.svg " >
< h5 > Il suffit de jouer </ h5 h5 ]>
</ div >
</ header >
Note : Le contenu de l'image utilisé peut être trouvé ici dans le référentiel GitHub . Les actifs proviennent de https://flaticon.com .
Ensuite, nous allons styliser l’en-tête. Ouvrez le fichier header.component.scss et mettez-le à jour avec l'extrait de code ci-dessous:
header {
display : flex ;
-color : # f7f7f7 ;
align-items : centre ;
marge : 0 ; 19659048] padding : 20 px 5% ;
box-shadow : 0 1 px 2 px 0 Rgba ( 0 0 0 0.1 ) ];
.brand {
flex : 1 ;
afficher : flex ;
aligner les éléments [19659024]: centre ;
img {
height : 35 px ;
border-radius : [19659058] 50% ;
m argin-right : 17 px ;
}
h5 {
de taille police : 18 px ;
margin : 0 ;
transformation de texte : majuscule ;
espacement de lettre : 0,5 px ;
police de poids : 600 ;
couleur : # ff1d5e ;
opacité ]: 0.7 ;
}
}
}
Quelques styles pour embellir l'en-tête.
Ensuite, nous mettrons à jour le fichier app.component.html pour afficher l'en-tête.
// src / app / app .component.html
< main >
< app-header > </ app-header >
< section >
< div >
</ div >
< div >
</ div >
</ section >
</ main >
Si vous visitez le site http: // localhost: 4200 vous devriez voir la dernière vue de l'application. L'en-tête est la seule chose visible sur la page, mais pas trop longtemps. Restez à l'écoute!
Home View
La page d'accueil hébergera le lecteur multimédia, la liste de lecture et l'en-tête. Le composant App par défaut hébergera la page d'accueil de l'application. Le fichier app.component.html ne nécessite aucune modification. il devrait rester identique à la section précédente.
< main >
< app-header > </ app-header >
< article >
< div >
</ div >
< div >
</ div >
</ section >
</ main >
Nous allons ensuite ajouter quelques styles au fichier app.component.scss pour donner un peu plus de vie à la page. Ouvrez le fichier app.component.scss et copiez-y les styles ci-dessous: section
{
display : flex ;
justification -content : center ;
margin-top : 100 px ;
}
Ce n’est pas beaucoup, probablement beaucoup moins que ce à quoi vous vous attendiez, mais nous bougeons. Nous définirons ensuite la liste de lecture que nous afficherons et d’autres variables utiles pour notre application. Ouvrez le fichier app.component.ts et mettez-le à jour:
import { Composant } à partir de '@ angular / core' ;
@ Composant ( {
sélecteur : 'app-root'
templateUrl : './ app.component.html'
styleUrls : [ './app.component.scss' ]
} )
export classe 19659185] {
playlist = [
{
nom : 'Vue aérienne des routes'
sources :
thumbnail :
'https://res.cloudinary.com/hackafro/image/upload/c_scale,h_100,w_150/v1554641467/Screenshot_2019-04-07_at_1.39.17_PM_purcgf.png'
]}
{
nom : 'Flou lumières colorées'
source :
'https://player.vimeo.com/external/305211631.sd.mp4?s=3d46306a3d07d1c56eb1fcb1ba96232e34d90&profile_id=164&ohl=4995
thumbnail :
'https://res.cloudinary.com/hackafro/image/upload/c_scale,h_100,w_150/v1554641309/Screenshot_2019-04-07_at_1.46.12_PM_ztnroy.png'
]}
{
nom : 'Vue imprenable sur le coucher de soleil'
source :
'https://player.vimeo.com/external/306619138.sd.mp4?s=a7cb8a56ee700da618a4bc6bdd474eca0cf75d92&profile_id=164&oauto_id
thumbnail :
'https://res.cloudinary.com/hackafro/image/upload/c_scale,h_100,w_150/v1554641380/Screenshot_2019-04-07_at_1.46.38_PM_f6nyr4.png'
]}
{
nom : 'Phare au bord de la mer'
source :
'https://player.vimeo.com/external/312662160.sd.mp4?s=22154e69be5722a528e3c1cc37425077a2b44&profile_id=164&oauth2_token_57
thumbnail :
'https://res.cloudinary.com/hackafro/image/upload/c_scale,h_100,w_150/v1554641395/Screenshot_2019-04-07_at_1.46.26_PM_xgbfdq.png'
]}
] ;
currentVideo = cette . playlist [ 0 ] ;
surVideoChange ( vidéo ). 19659185] {
this . currentVideo = vidéo ;
}
NB : Les fonds vidéo proviennent de https://pexels.com et les miniatures vidéo sont stockées dans Cloudinary .
Dans l'extrait ci-dessus, nous avons déclaré une liste de lecture contenant des vidéos que nous serons. l'affichage. Chaque élément du tableau contient les détails de la source et nom pour la vidéo.
Il y a la méthode surVideoChange agissant comme un gestionnaire d'événements; cette méthode s'exécute lorsqu'un élément de la liste de lecture est sélectionné; la vidéo cliquée est définie sur currentVideo .
Ensuite, nous inclurons les ressources externes que l'application utilisera. Nous utiliserons la police Roboto . Nous mettrons également à jour les fichiers style.scss et angular.json afin d'inclure les feuilles de style des composants de Kendo UI et les styles applicables à l'ensemble de l'application.
Ouvrez l'index . fichier html et inclure le lien vers les polices externes:
< html lang = " en " >
< head >
< meta charset = " utf-8 "
"". 19659025] < titre > Angular MediaPlayer </ titre >
< base href = " / " >
< meta name = " viewport " content = " largeur = périphérique- largeur, échelle initiale = 1 " >
< link rel = " icon " [ 19659026] type = " image / x-icon " href = " favicon.ico " ] >
< link href = " https://fonts.googleapis.com/css?family=Roboto:400,500,700,900 " rel = " feuille de style " >
</ head >
< body >
< app-root > </ app-root >
</ body >
</ html >
Ouvrez ensuite le fichier style.scss dans lequel sont copiés les styles ci-dessous:
html {
format de boîte : . Champ-frontière ;
}
*, *: before, *: after {
taille de boîte : hériter ;
}
du corps {
margin : 0 ;
rembourrage : 0 ;
hauteur minimale : 100 vh ;
}
Pour inclure la feuille de style de base de Kendo UI dans notre projet, nous l’ajouterons au tableau de styles du fichier angular.json . Ouvrez le fichier et mettez à jour le tableau styles avec le fichier de base CSS de Kendo UI.
{
"$ schema" : "./ node_modules/@angular/cli/lib/config/schema.json "
" version ": :
" newProjectRoot ": "projets"
"projets" : {
"angular-mediaplayer" : {
...
} ,
"architecte" : {
"build" : {
"constructeur" : "@ angular-devkit / build- angular: browser "
" options ": {
...
" styles ": [
" src / styles. scss "
" node_modules/@progress/kendo-theme-default/dist/all.css "
]
" scripts ": [[19659024]]
}
}
Nous allons ensuite commencer à travailler sur le composant lecteur multimédia. Le composant comportera le lecteur vidéo HTML5 avec des commandes personnalisées.
À l'aide du composant lecteur multimédia, nous lirons la vidéo active dans la liste de lecture. Pour créer le composant lecteur multimédia, exécutez la commande suivante:
en cours de génération du composant mediaplayer
Après avoir exécuté la commande, ouvrez le fichier mediaplayer.component.html et copiez-y le contenu ci-dessous:
< div class = [19659024] " player " >
< vidéo
class = " lecteur__vidéo visionneuse "
"
[src] = " currentVideo? .Source "
(date du jour) = " handleProgress () "
(terminé) = " updateButton () "
#videoplayer
> </ vidéo >
< div class = " player__controls " >
< div
class = " progrès "
(mousedown) = " mouseDown = true "
(mouseup) = " mouseDown = false "
(mouseout) = " mouseDown = false "
(mousemove) = " mouseDown && scrub ($ event) "
(cliquez sur = " gommage ($ événement) "
>
< div class = " progress__filled " " [ngStyle]" [19459244] "" "[19459244]" progressBarStyle " > </ div >
</ div >
< div [19659000] class = " controls__secondary " >
< div >
< i
class = " player__button to kgle / k-icon "
[ngClass] = " iconClass "
titre = " Le jeu à bascule "
(cliquez) = " togglePlay () "
>
</ i >
< i class = " player__button suivant icône k ki-flèche-fin-droite " > 19659038] </ i
> </ div > < div > < input type = " plage " name = " volume " class = " player__slider " min = " 0 " max = " 1 " step = " 0.05 " value = " 1 " (changement) = " handleVolumeChange ($ event) " /> </ div > </ div > </ div > </ div > Dans l’extrait ci-dessus, vous remarquerez probablement le nombre élevé de gestionnaires d’événements attachés aux éléments du fichier; Nous allons les parcourir et expliquer ce que fait chaque événement.
Dans l’élément vidéo nous recevons la source de la vidéo provenant du composant App ; nous écoutons également deux événements: timeupdate et ont pris fin . L’événement timeupdate est déclenché pendant la durée de lecture de la vidéo, chaque seconde de la vidéo passant par l’événement. L'événement terminé est déclenché lorsque la lecture de la vidéo est terminée. Je suis sûr que vous avez deviné.
Ensuite, il y a l’élément progress ; Cet élément servira de barre de progression pour la vidéo. Il affichera la durée de lecture actuelle de la vidéo. Nous utiliserons également cet élément pour nettoyer la vidéo, en sautant d'un temps à l'autre de la vidéo. Quatre événements sont associés à l'élément:
mousedown: lorsque cet événement est déclenché, nous affectons à l'événementmousedown; ceci est défini sur true car nous souhaitons uniquement effacer la vidéo lorsque la souris de l'utilisateur est enfoncée.mouseup: Ici, la variablemousedownest définie surfalse. Il en va de même pour l'événementmouseout.mousemove: En cas de rappel, nous vérifions si la souris est enfoncée avant de nettoyer la vidéo. Simousedownest défini surtruenous appelons la méthodechercher.cliquez sur: cliquez sur l'utilisateur pour le placer à l'heure sélectionnée. dans la vidéo utilisant la méthodesearch.
À partir de là, nous avons le bouton de lecture; ceci est utilisé pour basculer l'état de lecture de la vidéo comme indiqué dans l'écouteur de clics de l'élément.
Ensuite, nous mettrons à jour le fichier mediaplayer.component.ts pour déclarer les variables et les méthodes utilisées dans le modèle de vue. :
import { Composant OnInit ViewChild Entrée ] de de . angular / core ';
@ Composant ( {
sélecteur : 'app-mediaplayer'
templateUrl : './ mediaplayer.component.html'
styleUrls : [ './ mediaplayer.component.scss' ]
} )
export classe 19659186] implémente OnInit {
constructeur () {}
@ ViewChild ( 'vidéoplayer' ) videoElement ;
@ Input () currentVideo ;
vidéo : HTMLVideoElement ;
progressBarStyle = {
flexBasis : '0%'
} ;
iconClass = 'k-i-play' ;
mouseDown = false ;
togglePlay () {
const méthode = cette . video . en pause ? 'pièce' : 'pause' ;
cette . . vidéo [ method ] () ;
setTimeout ( (19659024]) => ceci . updateButton () 10 ) ;
}
updateButton () [ . ] const icon = ceci . vidéo . en pause ? 'ki-play' : ' ki-pause ';
ceci . iconClass = icon ;
}
handleVolumeChange ( e ]) {
const [1 9659185] { target } = e ;
const { valeur } = cible ;
cela . vidéo . volume = valeur ;
}
handleProgress () 19659185] {
const pourcent = ( cette . vidéo . Heure actuelle / cette . vidéo . durée ) * 100 ;
cette . progressBarStyle . flexBasis [19459244] = ` $ { pourcent } %` ;
}
recherchez (. e : MouseEvent ) {
const { srcElement : progrès de x . = e ;
const { offsetWidth } = progrès ;
const searchTime ] = ( offsetX / offsetWidth ) * cette . vidéo . durée ;
this . vidéo . currentTime = temps de recherche ;
}
ngOnInit [ ] {
const { nativeElement } = this . videoElement ;
ceci . vidéo = nativeElement ;
}
ngOnChanges ( modifications ) {
si ( cette ]. vidéo ) {
this . progressBarStyle . flexBasis = [19659187] '0%' ;
ceci . togglePlay () ;
}
}
}
Le fichier de composant est encombré de gestionnaires d'événements et de méthodes de cycle de vie de composant et nous allons passer en revue chaque méthode, en commençant par facile avant de passer aux méthodes complexes.
La méthode togglePlay semble être assez facile. début. Dans la méthode, nous vérifions si la propriété en pause est vraie, puis nous appelons la méthode opposée exacte de l'élément. Si s'est arrêté nous avons appelé video.play () et vice versa.
La méthode
Source link