VideoJS, Meteor and rerendering of templates

Question

In a project we use the VideoJS player in a Meteor App to play some videos. We have a playlist to navigate though the videos. The problem is, that when the template gets rerendered, the Player cannot be initialized again after that.

I have written a template file and coffescript part for that:

<template name="videoPlayer">
<video id="videoJsPlayer" class="video-js vjs-default-skin"
    controls preload="auto" width="572" height="350"
    poster="...file.jpg"
    >
    <source src="...video.mp4" type='video/mp4' />
</video>
</template>

I already tried to work with the ID, but When I come back to the same video the ID will be the same. and the coffee-script:

Template.videoPlayer.rendered = ->
    videojs.options.flash.swf = "/video-js.swf"

    $vid_obj = _V_ "videoJsPlayer", {}, ()->
        console.log "Player Loaded"

    $vid_obj.ready () ->
        console.log("Element ready");

I have also tried to put "vid_obj" somewhere global and calling the videojs "destroy()" method before. That gives an error, that destroy() doesn't exist. Also an V.players = {} to delete all player bindings doesn't work.

Answer 1

I have solved my issue. The Trick was not to apply that styling on the template.

I added the video player via jQuery:

if videojs.players.videoJsPlayer
    videojs.players.videoJsPlayer.dispose()

$v = $(".videoPlayerFrame")

$v.html("").append $("<video id=\"videoJsPlayer\" class=\"video-js vjs-default-skin \">")
    .attr("controls", true) 
    .attr("preload", "none")
    .attr("width", $v.attr("data-width"))
    .attr("height", $v.attr("data-height"))
    .attr("poster", $v.attr("data-poster"))
    .append("<source src=\""+$v.attr("data-video")+"\" type=\"video/mp4\" />")


$vid_obj = _V_ "videoJsPlayer", {}, ()->
    # console.log "video #{vid} is ready.";
    console.log "Element Loaded"

Answer 2

Try adding this code,

Template.videoPlayer.destroyed = function () {
    var mPlayer = vidoejs("#playerId");
    mPlayer.dispose();
}

Each time Meteor render the player template it's destroyed and created. I hope this wont happen in Shark, the new Meteor renderer.