Template.templatename.rendered and template instances - meteor

Question

Whats the best way to interact with an instance of a template? I have a gallery of html5 videos I want to play when they are scrolled into view and stopped when they are outside the browser window.
the below code works perfectly for one video, but when I have multiple videos the code changes all videos at the same time, is_playing is set to the exact same value for multiple videos.
these are possible related discussion but I couldn't quite figure it out:
Let helpers access template instance #1529, Need way to reactively depend on data context / template arguments
Template.showcaseVideo.rendered = function () {
var video_id = this.data._id;
var video = document.getElementById(video_id);
var is_playing = false;
$(window).on("scroll", '', function (event) {
if(isScrolledIntoView($('#'+video_id)) && !is_playing) {
video.play();
is_playing = true;
console.log( "playing " + video_id);
} else if (is_playing) {
video.pause();
is_playing = false;
console.log( "stopped " + video_id);
}
});
}

Answer 1

Try to assign is_playing variable to instance of template:
Template.showcaseVideo.rendered = function () {
var self = this;
self.is_playing = false;
$(window).on("scroll", '', function (event) {
var video_id = self.data._id;
var video = document.getElementById(video_id);
var is_playing = self.is_playing;
if(isScrolledIntoView($('#'+video_id)) && !is_playing) {
video.play();
is_playing = true;
console.log( "playing " + video_id);
} else if (is_playing) {
video.pause();
is_playing = false;
console.log( "stopped " + video_id);
}
});
}