Incrustar un reproductor de YouTube fàcilment i mandrós Carregueu el vídeo amb VUE

Bloc

Incrustar un reproductor de YouTube fàcilment i mandrós Carregueu el vídeo amb VUE

Incrustar un reproductor de YouTube fàcilment i mandrós Carregueu el vídeo amb VUE

Vista Lazytube

Incrusteu un reproductor de YouTube fàcilment i carregueu el vídeo per estalviar recursos i reduir la mida de la càrrega inicial. Útil quan el rendiment i la mida de la pàgina són importants o per a llocs amb molts vídeos de YouTube incrustats.



Per a una pàgina d’exemple senzilla amb 10 vídeos, vue-lazytube reduirà el temps de càrrega en 7 vegades i l’ús de memòria en 2-3 vegades.

Característiques

  • redueix la mida de càrrega inicial en ~ 1,1 MB per vídeo
  • totalment sensible i personalitzable mitjançant props
  • proporciona mètodes per controlar (play, stop, pause i reset) vídeos incrustats
  • proporciona opcions per configurar el títol personalitzat i la previsualització de vídeos incrustats

Instal·lació

Amb sistemes de construcció

$ npm install --save vue-lazytube $ yarn add vue-lazytube

Per fer que el connector estigui disponible a tot el món

Al vostre main.js:

import LazyYoutube from 'vue-lazytube'; Vue.component('LazyYoutube', LazyYoutube);

O

Per incloure només en components específics

netflix.com/activate samsung blu ray
import LazyYoutube from 'vue-lazytube' export default { name: 'YourComponent', components: { LazyYoutube, }, }

O

Directament al navegador

// as a component Vue.use('LazyYoutube', LazyYoutube)

HTML

Ús

INCENDI

Accessoris

Aquest és el títol de la imatge

Mètodes

Aquests mètodes us permeten controlar el reproductor mitjançant JavaScript, de manera que podeu realitzar operacions com play, stop, pause i reset.

El navegador de l’usuari ha d’admetre la funció HTML5 postMessage. La majoria dels navegadors moderns admeten postMessage.

com comprar el testimoni aioz

Aquest és el títol de la imatge

Exemple
Play Stop Pause Reset export default { name: 'YourComponent', components: {}, methods: { handleClick(event) { this.$refs['lazyVideo'][event](); }, }, };

Detalls de la descàrrega:

Autor: seeratawan01

Demostració en directe: https://codesandbox.io/s/vue-lazytube-hj03y

GitHub: https://github.com/seeratawan01/vue-lazytube

# vist