流星+铁路由器:模板完成后加载流播放器

Meteor + Iron Router: Load FlowPlayer once template has finished

本文关键字：加载 播放器 路由器 流星      更新时间：2023-09-26

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

获取 http://cdn.flowplayer.org/276539/.webm 404（未找到）看起来数据尚未加载，并且 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();
  },
});

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

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

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

您可以使用 autorun 重新初始化 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();
      }
    });
})
相关文章：