Ember 与 videoJS 函数调用

Question

我在我的应用程序中使用 videoJS 播放器和 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

didInsertElement 钩子仅在元素注入 dom 时触发。

你可以覆盖路由中的 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')