Meteor + Iron Router: Charger FlowPlayer une fois le template terminé

Question

J'utilise Meteor et FlowPlayer (https://flowplayer.org/docs/api.html#load-method) pour charger une vidéo en fonction de la sélection faite par l'utilisateur. Je souhaite que l'initialisation de FlowPlayer soit effectuée une fois que le modèle et les données {{video}} ont été chargés. Comme je l'obtiens les erreurs suivantes dans la console:

GET http://cdn.flowplayer.org/276539/.webm 404 (Introuvable) On dirait que les données n'a pas encore chargé et l'objet de la vidéo a été chargé.

Si l'utilisateur fait une nouvelle sélection; Ensuite, je dois tuer le FlowPlayer actuel et le réinitialiser avec les nouvelles données de balise {{video}} sur la nouvelle route, sinon l'ancienne vidéo sélectionnée est toujours en cours de lecture.

Quelle est la meilleure façon de résoudre ce problème?

HTML

<template name="lessonVideo"> 
    <div class="container p-t-1"> 
    <div class="row"> 
     <div class="col-xs-12 text-xs-center"> 
     <h4>Lesson <span class="text-uppercase">{{eachLessonId}}</span></h4> 
     <h5 class="text-muted">{{title}}</h5> 
    </div> 
    </div> 
    <div class="row p-t-1"> 
    <div class="col-xs-12 col-md-8 col-md-push-2 col-md-pull-2 center-block"> 
     <div class="flowplayer embed-responsive embed-responsive-16by9"> 
      <video class="embed-responsive-item" poster="//drive.cdn.flowplayer.org/276539/{{video}}-snap.jpg"> 
      <source type="application/x-mpegurl" src="//cdn.flowplayer.org/276539/{{video}}.m3u8"> 
      <source type="video/webm" src="//cdn.flowplayer.org/276539/{{video}}.webm"> 
      <source type="video/mp4" src="//cdn.flowplayer.org/276539/{{video}}.mp4"> 
      <source type="video/flash" src="mp4:276539/{{video}}.mp4"> 
      </video> 
     </div> 
    </div> 
    </div> 
    </div><!-- end .container --> 
</template> 

Route

Router.route('/courses/:courseId/:lessonId/:eachLessonId', { 
    name: 'lessons', 
    layoutTemplate: 'layoutLessons', 
    template: 'lessonVideo', 
    onBeforeAction: function() { 
    let currentUser = Meteor.userId(); 
    if (currentUser) { 
     Session.set('courseId', this.params.courseId); 
     Session.set('eachLessonId', this.params.eachLessonId); 
     console.log('Each Lesson ID set: '+Session.get('eachLessonId')); 
     this.next(); 
    } else { 
     Router.go('/'); 
    } 
    }, 
    data: function() { 
    var doc = Lessons.findOne({ 
     "courseId": this.params.courseId, 
     "lesson.lessonId": this.params.lessonId, 
     "lesson.eachLesson.eachLessonId": this.params.eachLessonId 
    }); 
    if (doc) { 
     var lesson = {}; 
     var lessonId = this.params.eachLessonId; 
     _.each(doc.lesson, function(i) { 
     lesson = _.find(i.eachLesson, function(j) { 
      return j.eachLessonId == lessonId; 
     }); 
     }); 
     return lesson; 
    } 
    return {}; 
    }, 
    onAfterAction: function() { 
    $(".flowplayer").flowplayer(); 
    }, 
}); 

Answer 1

onAfterAction: function() { 
    $(".flowplayer").flowplayer(); 
    }, 

Cette initialize la flowplayer avant que la page rendu. Donc, flowplayer de classe n'était pas là lorsque vous avez initialisé le flowplayer. Vous pouvez résoudre ce problème en initialisant le flowplayer après le rendu de la page. Donc, ce sera comme ..

Template.lessonVideo.onRendered(function() { 
    $(".flowplayer").flowplayer(); 
}); 

Vous pouvez réinitialiser le floweplayer en utilisant autorun, qui re exécuter le code lorsque certains changements de données réactives. Donc, quand vos paramètres changent, cela réinitialise votre lecteur. comme ceci

Template.lessonVideo.onRendered(function() { 
    var self = this; 
    this.autorun(function() { 
     if(this.params.lessonId){ //please your params that will reflect the video. 
     $('#side-menu').metisMenu(); 
     } 
    }); 
})