Meteor and Video.js player loading issues

I have probelm running video.js player.

First I put the video.js and video-js.css in client/compatibility folder so it will load first

Then in my client side html I write the following simple code,, It is not working

          <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
                  controls  width="640" height="264"
                  poster="{{video.thumbs}}"
                  data-setup='{"controls": true, "autoplay": true,"techOrder":["flash", "html5"],preload="auto"}'>
                 <source  type='video/flv' src="{{uurl}}" />
            </video>

There are no issues with the template helpers they are working fine but

The problem is with the video.js player , It is not loading.

Anyone tried this before? Struck here, Any help appreciated

UPDATE:

dynamic loading solution working fine for me but when I click on a video it redirects to /video/:_id/:_slug page with subscribing to single video but when I go back to the home page and again click on another video, this time video player is not initializing again

Code

when onclick on video:

'click .videothumb > a':function(e,t){
        Session.set("url",e.currentTarget.getAttribute("data-url"));
        var url=e.currentTarget.getAttribute("data-url");
        var title=e.currentTarget.getAttribute("data-title");
        var cid=e.currentTarget.getAttribute("data-id");
        Meteor.call("videoData",url,function(er,da){
            console.log(cid);
            Session.set('vurl',da);
            Router.go("video",{_id:cid,slug:title});
        });
    }

routing

this.route("video",{
          path:'/video/:_id/:slug',
           waitOn: function() {
            // return Meteor.subscribe('singleVideo', this.params._id);
          },
          onBeforeAction: function () {

          },
          data:function(){
                Session.set("currentVideoId",this.params._id);
                var video;
                video= Videos.findOne({_id: this.params._id});
                return {
                  video:video
                };
          }
    });

rendered function:

Template.video.rendered=function(){
        var id=Session.get("currentVideoId");
        Meteor.call("incViews",id,function(e,d){
            console.log("view added");
        });
        videojs("videoId",{"controls": true, "autoplay": false,"techOrder":["html5","flash"],preload:"auto"},function(){ 
          // Player (this) is initialized and ready. 
          **console.log("videojs initialized");**
          console.log(this)   ;
        } 
      );
};

that console "videojs initialized" is loging when only first when I route the video page

from next routing(when I click video thumbnail on homepage)The log functions is not loggind(means player is not initializing)

Any suggestions to make it work better

In the time videojs script is initialized there is no template rendered, you need to manually initialize videojs player.

tpl1.html:

<template name="tpl1">
  <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
              controls  width="640" height="264"
              poster="{{video.thumbs}}">
     <source  type='video/flv' src="{{uurl}}" />
  </video>
</template>

tpl1.js:

Template.tpl1.rendered = function(){
  videojs(
    "example_video_1",
    {"controls": true, "autoplay": true,"techOrder":["flash", "html5"],preload="auto"},
    function(){           // Player (this) is initialized and ready.        } 
  );
})

Please read documentation of Video.js: "Alternative Setup for Dynamically Loaded HTML"