L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Construisez un Mini Mediaplayer Vue.js avec Kendo UI
Apprenez comment ajouter un lecteur multimédia à votre application Vue.js en seulement quelques étapes. Nous en créerons une avec Kendo UI, capable de lire des vidéos statiques ou en streaming dans une interface conviviale.
Les lecteurs multimédias ont progressivement amélioré la façon dont les propriétaires de sites s’expriment et transmettent des informations aux lecteurs. Ceci est particulièrement évident dans les sites basés sur des tutoriels tels que Udacity Udemy Scotch etc. Les lecteurs multimédias ont été créés dans le cadre d’une composition d’interface utilisateur moderne. En conséquence, leur besoin a augmenté. Le besoin croissant de lecteurs multimédias optimisés et performants a donné lieu à de meilleures façons de l'ajouter à nos applications Web.
Dans ce billet, nous allons vous montrer comment ajouter du Kendo UI MediaPlayer à votre Vue. Application .js en quelques étapes très simples. Sans plus tarder, créons une application Vue.js et accédez-y.
Configurer un projet Vue
Nous devons d’abord créer un projet Vue.js avec lequel nous pourrons démontrer la mise en oeuvre de la fonctionnalité MediaPlayer. Commençons! Ouvrez une fenêtre de terminal sur votre répertoire préféré et exécutez la commande ci-dessous:
vue create demo
Si vous n'avez pas installé Vue CLI dans le monde, veuillez suivre ce guide et revenez ensuite à la suite de cette leçon.
Lorsque vous avez terminé de démarrer votre application Vue, accédez au nouveau répertoire de l’application Vue et démarrez le serveur de développement
$ cd démo
[ npm $ servir servir
Ceci servira votre application Vue sur localhost: 8080 . Naviguez jusqu'à votre navigateur et vous verrez votre application Vue en direct:
Ajouter l'interface utilisateur de Kendo au projet
Nous allons maintenant ajouter l’interface utilisateur Kendo à notre nouveau projet Vue. Pour la portée de cette démonstration, nous aurons besoin de:
- Le package Kendo UI
- Le package de thème par défaut Kendo UI
- L’enveloppe Kendo UI MediaPlayer pour Vue
Installer les packages
Pour les ajouter à notre projet, ouvrez une fenêtre de terminal dans le répertoire racine du projet et exécutez les commandes ci-dessous:
// Installez le package Kendo UI vue
[ npm $ installer --save @ progress / kendo-ui
// Installer le wrapper Kendo UI MediaPlayer pour vue
[ npm installer --save @ progress / kendo-mediaplayer-vue-wrapper
// Installer le paquet thématique par défaut de Kendo UI
$ npm installer --save @ progress / kendo-theme-default
De plus, le widget MediaPlayer de Kendo UI pour Vue.js a besoin du wrapper CDN. Ouvrez le fichier index.html du répertoire public et mettez à jour la section avec les liens ci-dessous:
// src / public / index.html
< link rel = " feuille de style " href = " https: // kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"[19459004/>[19459004[
< link rel = " feuille de style " href = " https: // kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css"[19459004/>[19459004strange
< script src = " https://code.jquery.com/jquery-1.12.4.min.js " [ [19659029]> </ script >
< script src = " https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js ] " > </ script >
< script src = " https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min .js " > </ script >
< script src = " https://unpkg.com/vue/dist/vue.min.js " > [ </ script >
< script src = " https://unpkg.com/@progress/kendo-mediaplayer-vue-wrapper/dist/cdn/kendo-mediaplayer- vue-wrapper.js " > </ script >
Maintenant que nous avons tous les paquetages Kendo UI nécessaires dans notre projet, construisons notre MediaPlayer.
Créons un composant personnalisé pour notre MediaPlayer. Tout d’abord, supprimez le composant HelloWorld.vue par défaut. Nous n'en avons pas besoin puisque nous allons créer notre propre composant personnalisé.
Composant MediaPlayer
Dans le répertoire composants créez un nouveau composant appelé Mediaplayer.vue . et le mettre à jour avec le code ci-dessous:
< template >
< div class = "hello" >
< h1 > Démonstration de Kendo UI MediaPlayer < / h1 >
< div id = "vueapp" class = "vue-app" >
< kendo - mediaplayer
style = "hauteur: 500 pixels; marge: 150 pixels"
: auto - play = "true"
: navigatable = "true"
: support - titre = "'Démonstration de lecteur Kendo UI Media dans Vue.js" "
: media - source = "'https://www.youtube.com/watch?v=tc3xhD24iTU'"
> < / kendo - mediaplayer >
< / div >
< / div > [19659111] < / template >
< script >
import "@ progress / kendo-ui" ;
import "@ progress / kendo-theme-default / dist / all.css" ;
export default {
nom : "Mediaplayer"
} ;
< / script >
Nous avons créé ici MediaPlayer avec le widget permettant au MediaPlayer d'extraire une vidéo YouTube et de la lire automatiquement à l'écran.
Modifier App.vue
Pour afficher notre composant MediaPlayer à l'écran, ouvrez le . App.vue archivez le code ci-dessous avec le code suivant:
< template >
< div id = "app" >
< img alt = "Logo de la vue" src = "./ assets / logo.png" >
< Mediaplayer / >
< / div >
< / modèle >
< script >
import Mediaplayer de './ components / Mediaplayer.vue'
export défaut {
nom : 'app'
composants : {
Lecteur multimédia
}
}
< / script >
< style >
#app {
font - famille : 'Avenir' Helvetica Arial sans
Source link