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

这在页面渲染之前初始化流程图。因此，当您初始化流程播放器时，类流程图不存在。您可以通过在页面渲染后初始化流程图来解决此问题。所以它会像..

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

您可以使用自动运行重新初始化floweplayer，在某些被动数据发生变化时重新运行代码。因此，无论何时你的params改变它都会重新初始化你的玩家。像这样

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

Meteor + Iron Router：模板完成后加载FlowPlayer

1 个答案: