流星+铁路由器：一旦模板完成就加载FlowPlayer

Question

我使用Meteor和FlowPlayer（https://flowplayer.org/docs/api.html#load-method）根据用户所做的选择加载视频。我希望在加载模板和{{video}}数据后初始化FlowPlayer。由于我在控制台中发现以下错误：

GET http://cdn.flowplayer.org/276539/.webm 404（Not Found） 看起来数据尚未加载并且Video对象已加载。

如果用户进行新的选择，那么我需要杀死当前的FlowPlayer并使用新路线上的新{{video}}标签数据重新初始化它，否则旧的选定视频仍在播放。

解决这个问题的最好方法是什么？

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> 

路线

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(); 
    }, 

这初始化的Flowplayer的页面渲染之前。所以当您初始化流式播放器时，类流水游戏不在场。你可以通过在页面渲染后初始化流水游戏来解决这个问题。因此，它会像..

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

您可以重新初始化使用自动运行的floweplayer，即重新运行时，一些反应数据变化的代码。所以每当你的参数改变时，它都会重新初始化你的播放器。像这样

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(); 
     } 
    }); 
})