Meteor and Video.js player loading issues - meteor

Question

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

Answer 1

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"

Answer 2

I implemented it in my project w/o using Blaze but using a lower-level Tracker dependencies. When the Template is rendered, I would dynamically start the player and then have a reactive data-source of the current position that I can control: https://github.com/Slava/talk-player/blob/master/client/player.js

Answer 3

This worked for me on Meteor 1.6.1.1.
template html
<template name="tebVideo">
<video class="video-js">
<source src="{{src}}" type="video/mp4">
</video>
</template>
template js
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import 'video.js/dist/video-js.css';
import videojs from 'video.js';
import './video.html';
// prevent analytics
window.HELP_IMPROVE_VIDEOJS = false;
// helper for local dev vs product cdn
const envUrl = (localPath, fileName) => {
if (Meteor.isProduction) {
return Meteor.settings.public.host.cdnUrl+'/'+fileName;
}
else {
return localPath+fileName;
}
};
Template.tebVideo.onRendered(() => {
const instance = Template.instance();
const video = videojs(document.querySelector('.video-js'),
{
controls: true,
autoplay: false,
preload: 'auto',
width: 854,
height: 480,
aspectRatio: "16:9",
poster: envUrl('/images/', instance.data.poster),
function() {
Log.log(['debug', 'video'], 'Video loaded ok');
}
}
);
});
Template.tebVideo.helpers({
src() {
const instance = Template.instance();
return envUrl('/videos/', instance.data.src);
}
});
show it
{{>tebVideo poster="three_robots.png" src="how-knowledge-automation-works.mp4"}}