Question

我在我的应用程序中使用videoJS player和ember。我在didInsertelement回调中调用VideoJs函数（javascript函数）（在渲染模板之后）。当我在浏览器中输入视频ID（带有url）时，它会进入didInsertelement并调用videojs函数并显示良好。我遇到的问题是当我输入另一个视频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 / afterModel挂钩，每次都会调用它们。

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

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')

Ember带有videoJS功能调用

1 个答案: