javascript - meteor +铁路由器: Load FlowPlayer once template has finished

Question

我正在使用 Meteor 和 FlowPlayer ( https://flowplayer.org/docs/api.html#load-method ) 根据用户所做的选择加载视频。我希望在模板和 {{video}} 数据加载后初始化 FlowPlayer。当我在控制台中收到以下错误时:

获取http://cdn.flowplayer.org/276539/.webm 404(未找到)看起来数据尚未加载，但视频对象已加载。

如果用户做出新的选择；然后我需要终止当前的 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。因此，当您初始化 flowplayer 时，flowplayer 类不存在。您可以通过在页面渲染后初始化 FlowPlayer 来解决此问题。所以它会像..

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

您可以使用自动运行重新初始化 floweplayer，当某些 react 数据发生变化时重新运行代码。因此，每当您的参数更改时，它都会重新初始化您的播放器。像这样

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