流星+鐵路由器：一旦模板完成就加載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(); 
     } 
    }); 
})