Así que logré inyectar hls.js para trabajar con el elemento nuxtjs $root y this
Lo hice así haciéndolo así (hls.client.js):
import Hls from 'hls.js'; export default (context, inject) => { inject('myhls', Hls) }y nuxt.config.js
plugins: [ '~plugins/hls.client.js', ],Esto funciona muy bien, literalmente :-) pero no puedo hacer referencia a 'esto' en los eventos de hls.
playHls() { this.playing = true if(this.$myhls.isSupported()) { this.hls = new this.$myhls(); this.audio = new Audio(''); this.hls.attachMedia(this.audio); this.hls.loadSource(this.scr_arr[2]); this.audio.play() // 'THIS' DOES NOT WORK INSIDE this.hls.on this.hls.on(this.$myhls.Events.MEDIA_ATTACHED, function () { console.log(this.scr_arr[2]); // DOES NOT LOG console.log("ok") // works great }); // 'THIS' DOES NOT WORK INSIDE this.hls.on this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) { console.log('manifest loaded, found ' + data.levels.length + ' quality level') // WORKS console.log("ok") // WORKS this.audio.volume = 1 // DOES not work }); } },Entonces, en estos eventos, no puedo usar nuxtjs 'esto', ¿porque parece haber un alcance diferente?
¿Puedo de alguna manera obtener 'este' alcance nuxt dentro de estos Eventos?
Reemplace sus funciones como
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {dentro
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, (event, data) => { para mantener this contexto vinculado a la aplicación Vue, de lo contrario, se limitará al contexto del alcance del bloque.