//this video type can be used as a fullscreen video, with a play button that calls the jwplayer play/pause features. i.e.
// climate-reel, jpl videos index page... via index_page true
// Otherwise it just sets up a jwplayer video
var video = {
video_div: "",
/*video_div should be non #'d string i.e. for
= "test"
file_objs should be an array of multiple "file" objects with strings i.e.
{ file: '/videos/video.mp4' },
{ file: '/videos/video.ogv' },
{ file: '/videos/video.webm' }
autostart should be true or false
index_page just does special stuff for the indexpage vs the detail
*/
init: function(video_div, file_objs, autostart, index_page, poster){
this.video_div = video_div;
jwplayer.key="aUHw/vpMvlcbkzWba1bSGOhfZ5nefVNAZYIC037cIbg="; // version 8
jwplayer(video.video_div).setup({
// stretching: "fill", //remove to remove black bars on left/right due to aspect ratio but lose data from top/bottom or left right depending
flashplayer:'/assets/mbcms/vendor/jwplayer/jwplayer.flash.swf',
sources: file_objs,
width: "100%",
// height: $(".single.primary_media_feature").height(), //remove and add aspectratio: "4:3" to have responsive behavior
autostart: autostart,
image: poster,
aspectratio: "16:9",
'modes': [
{type: 'html5'},
{type: 'flash'},
{type: 'download'}
]
});
this.initListeners(index_page)
},
initListeners: function(index_page){
if(index_page){
$(".play").click(function(){
video.play();
});
jwplayer(video.video_div).setControls(false); //so that video play button doesnt show up until after video is playing. controls set to true when our play div clicked
jwplayer(video.video_div).on('ready', video.showPlayButton)
} else {
jwplayer(video.video_div).on('ready', video.playWhenInView(video.video_div));
}
},
// This stopped working at some point when we rebuilt the video player haml partial. For now I'm
// going to remove the calls to it, because it's breaking other lightboxes on the page. Will fix when
// we have a need for playing videos in fancybox again. -PT 8/3/16
//
// resizeFancybox: function(){
// var video_h = $(".player").width() * 9/16;
// var player_h = $(".player").height();
// var h = Math.max(video_h, player_h);
// var detail_h = $('.image_details').first().height();
// // console.log("resizeFancybox: video_h:" + h + ", detail_h:" + detail_h);
// if(parent && parent.main && parent.main.resizeFancybox){
// parent.main.resizeFancybox(h + detail_h );
// }
// },
playWhenInView: function(video_div){
try {
var checkInView = mb_utils.debounce(function() {
if($('#' + video_div + ':in-viewport').length > 0 && jwplayer(video_div).getState() == "IDLE"){
// console.log(video_div + ' in view and idle.')
jwplayer(video_div).play(true)
} else if($('#' + video_div + ':in-viewport').length == 0){
// console.log(video_div + ' not in view.')
jwplayer(video_div).stop()
} else {
// console.log('unhandled state: ', jwplayer(video_div).getState(), $('#' + video_div + ':in-viewport').length)
}
}, 66);
} catch(err){
// console.log(err.message)
}
},
showPlayButton: function(){
$(".play").show();
},
play: function(){
$(".play").hide();
jwplayer(video.video_div).play();
$(".single.primary_media_feature .feature_container, .video_header_overlay" ).fadeOut(1000, function(){
$('.player').css("position", "relative");
});
jwplayer(video.video_div).setControls(true);
}
}