带有videoJS函数调用的Ember

Question

我正在使用videoJS播放器和烬在我的应用程序。我在didInsertelement回调(在模板呈现后)内调用VideoJs函数(javascript函数)。当我在浏览器中输入视频id (带有url)时，它会进入didInsertelement内部，并调用视频is函数，并很好地显示。我遇到的问题是，当我输入另一个视频id时，只更改内容而不调用didInsertelement回调。所以它保留了旧的视频源。

这是我的视图组件

App.VideoField=Ember.View.extend({
tagName:'video',
attributeBindings:['preload','autoplay',"src","controls","width","height"],
didInsertElement:function(){
  var interval_obj;
  var video_obj=this;
  console.log(this.get('elementId'))
  videojs(this.get('elementId'),{"controls":true,"width":"auto","height":"auto","nativeControlsForTouch":false},function(){
    var current_player=this; 

    current_player.on("pause", function(){

        current_player.bigPlayButton.show();
        //video_obj.$('#vjs-image-overlay-holder').removeClass('display-none');
        //tooltip issue when video is in fullscreen
        current_player.on("fullscreenchange",function(){

          video_obj.$("#vjs-tip-white").css({"left":""+Math.floor(video_obj.$('.vjs-play-progress').width()-(video_obj.$('#vjs-tip-white').width())/2)+'px'});
        });
        //clearing interval and set playerStatus to false
        clearInterval(interval_obj);
        //video_obj.get('controller').set('playerStatus',false);
    });

    current_player.on("play", function(){ 

      //video_obj.$('#vjs-image-overlay-holder').addClass('display-none');
      current_player.bigPlayButton.hide();

      interval_obj=setInterval(function(){
        // the changing constraint for every one minute current_player.currentTime()
        video_obj.get('controller').set('playerStatus',current_player.currentTime());
      },1000*60);

    });

    //Added overlay for smooth scroll over html5-video element and touch events to work
    var html5_overlay=document.createElement('div');
    html5_overlay.setAttribute('class','full-html5-overlay-video');
    current_player.el().appendChild(html5_overlay);

    video_obj.$().on('click','.full-html5-overlay-video',function(e){
      if(current_player.paused()){
          current_player.play();
        }
        else{
          current_player.pause();
        }
    });
    //Black tooltip only for desktop(having some issues in touch devices)
    current_player.progressTips();
    current_player.on('ended',function(){
      //clearing interval and set playerStatus to false
      clearInterval(interval_obj);

      //video_obj.get('controller').set('playerStatus',false);
    });
  });
}


});

在模板中，我呈现如下所示

{{view App.VideoField srcBinding="src" id="sample_video" class="video-js vjs-default-skin yg_video" preload="metadata"}}

呈现后，html内容将有所不同。

Answer 1

只有当元素被注入dom时才会触发didInsertElement钩子。

您可以覆盖路由中的setupController/售后模型挂钩，每次都会调用这些钩子。

如果您需要在页面呈现完成后运行它，您可以安排它。

App.MyRoute = Em.Route.extend({
  afterModel: function(resolvedModel, transition, queryParams){
    // do it here
  },
  setupController: function(controller, model){
    this._super(controller, model); // do default implementation
    // or do it here
  }
});

Em.run.scheduleOnce('afterRender', function(){
  //executes after the page is done rendering
});

您可以添加观察内容的观察者，如果内容发生更改，则再次触发更改。

watchSrcOrContent: function(){

}.observes('content', 'src', 'whateverproperty')