Current Path : /var/www/axolotl/data/www/msk.axolotls.ru/bitrix/templates/aspro_next/js/ |
Current File : /var/www/axolotl/data/www/msk.axolotls.ru/bitrix/templates/aspro_next/js/video_banner.js |
var players = {}; function pauseMainBanner(){ $('.top_slider_wrapp .flexslider').flexslider('pause'); } function playMainBanner(){ $('.top_slider_wrapp .flexslider').flexslider('play'); } function startMainBannerSlideVideo($slide){ var slideActiveIndex = $slide.attr('data-slide_index') var $slides = $slide.closest('.slides').find('.box[data-slide_index="'+ slideActiveIndex +'"]') // current slide & cloned var videoSource = $slide.attr('data-video_source') if(videoSource){ $slides.addClass('loading') pauseMainBanner() var videoPlayerSrc = $slide.attr('data-video_src') var videoSoundDisabled = $slide.attr('data-video_disable_sound') var bVideoSoundDisabled = videoSoundDisabled == 1 var videoLoop = $slide.attr('data-video_loop') var bVideoLoop = videoLoop == 1 var videoCover = $slide.attr('data-video_cover') var bVideoCover = videoCover == 1 && !isMobile var videoUnderText = $slide.attr('data-video_under_text') var bVideoUnderText = videoUnderText == 1 var videoPlayer = $slide.attr('data-video_player') var bVideoPlayerYoutube = videoPlayer === 'YOUTUBE' var bVideoPlayerVimeo = videoPlayer === 'VIMEO' var bVideoPlayerRutube = videoPlayer === 'RUTUBE' var bVideoPlayerHtml5 = videoPlayer === 'HTML5' if(videoPlayerSrc && !$slide.find('.video').length){ var InitPlayer = function(){ $slides.each(function(i, node){ var $_slide = $(node); var videoID = getRandomInt(100, 1000); var bClone = $_slide.hasClass('clone'), tmp_class = $_slide.attr('id'); if(!$_slide.find('.video.'+tmp_class).length) { if(bVideoPlayerYoutube){ $_slide.prepend('<iframe id="player_' + videoID + '" class="video ' + tmp_class + (bVideoCover ? ' cover' : '') + '" src="'+ videoPlayerSrc +'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>'); } else if(bVideoPlayerVimeo){ $_slide.prepend('<iframe id="player_' + videoID + '" class="video ' + tmp_class + (bVideoCover ? ' cover' : '') + '" src="'+ videoPlayerSrc +'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>'); } else if(bVideoPlayerRutube){ videoPlayerSrc = videoPlayerSrc + '&playerid=' + videoID; $_slide.prepend('<iframe id="player_' + videoID + '" class="video ' + tmp_class + (bVideoCover ? ' cover' : '') + '" src="'+ videoPlayerSrc +'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay"></iframe>'); } else if(bVideoPlayerHtml5){ $_slide.prepend('<video autobuffer playsinline webkit-playsinline autoplay id="player_' + videoID + '" class="video ' + tmp_class + (bVideoCover ? ' cover' : '') + '"' + (bVideoLoop ? ' loop ' : '') + (bVideoSoundDisabled || bClone ? ' muted ' : '') + '><source src="'+ videoPlayerSrc +'" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' /><p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p></iframe>'); } } if(typeof(players) !== 'undefined' && players){ players[videoID] = { id: 'player_' + videoID, mute: bVideoSoundDisabled || bClone, loop: bVideoLoop, cover: bVideoCover, videoPlayer: videoPlayer, slideIndex: slideActiveIndex, clone: bClone, playing: false }; if(bVideoPlayerYoutube){ window[players[videoID].id] = new YT.Player( players[videoID].id, { events: { 'onReady': onYoutubePlayerReady, 'onStateChange': onYoutubePlayerStateChange } } ); } else if(bVideoPlayerVimeo){ window[players[videoID].id] = new Vimeo.Player(document.getElementById(players[videoID].id), {autopause: false, byline: false, loop: false, title: false}); window[players[videoID].id].on('loaded', onVimeoPlayerReady) window[players[videoID].id].on('play', onVimeoPlayerStateChange) window[players[videoID].id].on('pause', onVimeoPlayerStateChange) window[players[videoID].id].on('ended', onVimeoPlayerStateChange) } else if(bVideoPlayerRutube){ document.getElementById(players[videoID].id).onload = function(e){ var videoID = this.id.replace('player_', '') players[videoID].contentWindow = this.contentWindow onRutubePlayerReady(videoID) } } else if(bVideoPlayerHtml5){ document.getElementById(players[videoID].id).addEventListener('loadeddata', onHtml5PlayerReady) document.getElementById(players[videoID].id).addEventListener('play', onHtml5PlayerStateChange) document.getElementById(players[videoID].id).addEventListener('pause', onHtml5PlayerStateChange) document.getElementById(players[videoID].id).addEventListener('ended', onHtml5PlayerStateChange) } } }); } if(!bVideoPlayerHtml5){ var obPlayerVariable = '' var fnPlayerVariable = '' if(typeof window['YoutubePlayerScriptLoaded'] === 'undefined'){ window['YoutubePlayerScriptLoaded'] = false } if(typeof window['VimeoPlayerScriptLoaded'] === 'undefined'){ window['VimeoPlayerScriptLoaded'] = false } if(typeof window['RutubePlayerListnersAdded'] === 'undefined'){ window['RutubePlayerListnersAdded'] = false } // load script if(bVideoPlayerYoutube){ obPlayerVariable = 'YT' fnPlayerVariable = 'Player' if(!window['YoutubePlayerScriptLoaded']){ var script = document.createElement('script'); script.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(script, firstScriptTag); window['YoutubePlayerScriptLoaded'] = true; } } else if(bVideoPlayerVimeo){ obPlayerVariable = 'Vimeo' if(!window['VimeoPlayerScriptLoaded']){ var script = document.createElement('script'); script.src = 'https://player.vimeo.com/api/player.js'; (document.head || document.documentElement).appendChild(script); window['VimeoPlayerScriptLoaded'] = true } } else if(bVideoPlayerRutube){ if(!window['RutubePlayerListnersAdded']){ window.addEventListener('message', function(e){ if(e.origin.indexOf('rutube.ru') !== -1){ var message = JSON.parse(e.data) if(typeof message === 'object' && message){ if(typeof message.type !== 'undefined' && message.type){ var videoID = false for(var j in players){ if(typeof players[j].contentWindow !== 'undefined'){ if(players[j].contentWindow == e.source){ videoID = j break } } } if(videoID){ switch (message.type) { case 'player:changeState': onRutubePlayerStateChange(videoID, message.data.state) break case 'player:currentTime': onRutubePlayerCurrentTime(videoID, message.data.time) break } } } } } }); } } if(!obPlayerVariable.length){ InitPlayer() } else{ // wait player class if(typeof window[obPlayerVariable] === 'object'){ if(!fnPlayerVariable.length || (fnPlayerVariable.length && typeof window[obPlayerVariable][fnPlayerVariable] === 'function')){ InitPlayer() } } else{ var waitPlayerInterval = setInterval(function(){ if(typeof window[obPlayerVariable] === 'object'){ if(!fnPlayerVariable.length || (fnPlayerVariable.length && typeof window[obPlayerVariable][fnPlayerVariable] === 'function')){ clearInterval(waitPlayerInterval) InitPlayer() } } }, 50) } } } else{ InitPlayer() } } else { // pause play video if(typeof(players) !== 'undefined' && players){ for(var j in players){ if(/*players[j].playing &&*/ !players[j].clone/* && (players[j].slideIndex != curSlideIndex)*/){ if((typeof window[players[j].id] == 'object')){ if(players[j].playing) { if(players[j].videoPlayer === 'YOUTUBE'){ window[players[j].id].pauseVideo() } else if(players[j].videoPlayer === 'VIMEO'){ window[players[j].id].pause() } else if(players[j].videoPlayer === 'RUTUBE'){ document.getElementById(players[j].id).contentWindow.postMessage(JSON.stringify({ type: 'player:pause', data: {} }), '*') } else if(players[j].videoPlayer === 'HTML5'){ document.getElementById(players[j].id).pause() } } else if(players[j].slideIndex == slideActiveIndex) { if(players[j].videoPlayer === 'YOUTUBE'){ window[players[j].id].playVideo() } else if(players[j].videoPlayer === 'VIMEO'){ window[players[j].id].play() } else if(players[j].videoPlayer === 'RUTUBE'){ document.getElementById(players[j].id).contentWindow.postMessage(JSON.stringify({ type: 'player:play', data: {} }), '*') } else if(players[j].videoPlayer === 'HTML5'){ document.getElementById(players[j].id).play() } } } } } } } } } var CoverPlayerHtml = function(curSlideIndex){ var $videoCover = $('.video.cover'); if($videoCover.length){ //setTimeout(function(){ var currenSlide = $('.box[data-slide_index="'+curSlideIndex+'"]'); var bannersHeight = $('.top_slider_wrapp').height(); var bannersWidth = $('.top_slider_wrapp').width(); var videoHeight = $('.top_slider_wrapp video').outerHeight(); var videoWidth = $('.top_slider_wrapp video').outerWidth(); if(bannersHeight >= videoHeight && videoWidth >= bannersWidth){ currenSlide.find('video.cover').height(bannersHeight+(jQuery.browser.mobile ? 30 : 0)).width('auto'); if(currenSlide.hasClass('wvideo')) currenSlide.css('background-position-x', 'auto'); } else if(bannersHeight < videoHeight && videoWidth < bannersWidth){ currenSlide.find('video.cover').width(bannersWidth).height('auto'); if(currenSlide.hasClass('wvideo')) currenSlide.css('background-position-y', 'auto'); } //if(window.matchMedia('(min-width:992px)').matches){ //setTimeout(function(){ if(currenSlide.find('video.cover').length) { currenSlide.find('video.cover').css('margin-top', -videoHeight/2); var bannerWidth = $('.top_slider_wrapp video').width(); // currenSlide.find('video.cover').css('margin-left', -bannerWidth/2); } //}, 300); /*} else{ $('.top_slider_wrapp video').css('margin-top', 0); }*/ setTimeout(function(){ $('.video.cover').css('visibility', 'visible'); }, 1300); //}, 10); } } var CoverPlayer = function(){ var $videoCover = $('.video.cover') if($videoCover.length){ var bannersHeight = $('.top_slider_wrapp').height() var bannersWidth = $('.top_slider_wrapp').width() var windowWidth = $(window).width() var height = windowWidth * 9 / 16 $videoCover.css({'height': height + 'px', 'margin-top': ((bannersHeight - height) / 2) + 'px'}) } } function onYoutubePlayerReady(e) { var videoID = e.target.a.id.replace('player_', '') if(videoID){ var mute = players[videoID].mute var cover = players[videoID].cover var clone = players[videoID].clone // mute sound if(mute || clone){ window[players[videoID].id].mute() } // cover video if(cover){ CoverPlayer() } // not start clone video playing if(clone){ setTimeout(function(){ e.target.pauseVideo() }, 100) } else{ // stop slider pauseMainBanner() e.target.playVideo(); // e.target.playVideo(); // e.target.playVideo(); } // update slide class var $slide = $('#player_' + videoID).closest('.box') $slide.addClass('started') // $slide.removeClass('loading') } } function onYoutubePlayerStateChange(e){ var videoID = e.target.a.id.replace('player_', '') if(videoID){ var clone = players[videoID].clone var loop = players[videoID].loop var slideIndex = players[videoID].slideIndex if(!clone){ if(e.data === YT.PlayerState.PLAYING){ players[videoID].playing = true $('#player_'+videoID).closest('.box').find('.wrapper_inner').addClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').addClass('loading'); // stop slider pauseMainBanner() e.target.playVideo() } else if(e.data === YT.PlayerState.PAUSED){ players[videoID].playing = false // sync time in cloned players & pause var time = Math.floor(window[players[videoID].id].getCurrentTime() * 10) / 10 $('#player_'+videoID).closest('.box').find('.wrapper_inner').removeClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').removeClass('loading'); window[players[videoID].id].seekTo(time, true) for(var j in players){ if(players[j].slideIndex == slideIndex && players[j].clone){ if('getCurrentTime' in window[players[j].id]) { window[players[j].id].pauseVideo() window[players[j].id].seekTo(time, true) } } } } else if(e.data === YT.PlayerState.ENDED){ players[videoID].playing = false if(loop){ e.target.playVideo() } else{ // play slider playMainBanner() } } } } } function onVimeoPlayerReady(e){ var videoID = this.element.id.replace('player_', '') if(videoID){ var mute = players[videoID].mute var cover = players[videoID].cover var clone = players[videoID].clone // mute sound if(mute || clone){ window[players[videoID].id].setVolume(0) } // cover video if(cover){ CoverPlayer() } // not start clone video playing if(clone){ setTimeout(function(){ window[players[videoID].id].pause() }, 100) } else{ // stop slider pauseMainBanner() window[players[videoID].id].play() } // update slide class var $slide = $('#player_' + videoID).closest('.box') $slide.addClass('started') // $slide.removeClass('loading') } } function onVimeoPlayerStateChange(e){ var videoID = this.element.id.replace('player_', '') if(videoID){ var cover = players[videoID].cover var clone = players[videoID].clone var loop = players[videoID].loop var slideIndex = players[videoID].slideIndex if(!clone){ window[players[videoID].id].getPaused().then(function(paused){ if(paused){ players[videoID].playing = false $('#player_'+videoID).closest('.box').find('.wrapper_inner').removeClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').removeClass('loading'); // sync time in cloned players & pause window[players[videoID].id].getCurrentTime().then(function(seconds){ var time = Math.floor(seconds * 10) / 10 window[players[videoID].id].setCurrentTime(time).then(function(seconds){ for(var j in players){ if(players[j].slideIndex == slideIndex && players[j].clone){ window[players[j].id].pause() window[players[j].id].setCurrentTime(time).then(function(seconds){}) } } }) }) } else{ $('#player_'+videoID).closest('.box').find('.wrapper_inner').addClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').addClass('loading'); window[players[videoID].id].getEnded().then(function(ended){ if(ended){ players[videoID].playing = false if(loop){ window[players[videoID].id].play() } else{ // play slider playMainBanner() } } else{ players[videoID].playing = true // stop slider pauseMainBanner() } }) } }) } } } function onRutubePlayerReady(videoID){ if(videoID){ var mute = players[videoID].mute var cover = players[videoID].cover var clone = players[videoID].clone var player = document.getElementById(players[videoID].id) // mute sound if(mute || clone){ player.contentWindow.postMessage(JSON.stringify({ type: 'player:mute', data: {} }), '*') } // cover video if(cover){ CoverPlayer() } // not start clone video playing if(clone){ setTimeout(function(){ player.contentWindow.postMessage(JSON.stringify({ type: 'player:pause', data: {} }), '*') }, 100) } else{ // stop slider pauseMainBanner() player.contentWindow.postMessage(JSON.stringify({ type: 'player:play', data: {} }), '*') } // update slide class var $slide = $('#player_' + videoID).closest('.box') $slide.addClass('started') // $slide.removeClass('loading') } } function onRutubePlayerCurrentTime(videoID, time){ if(videoID){ players[videoID].time = time } } function onRutubePlayerStateChange(videoID, state){ if(videoID){ var clone = players[videoID].clone var loop = players[videoID].loop var slideIndex = players[videoID].slideIndex var player = document.getElementById(players[videoID].id) if(!clone){ if(state === 'playing'){ $('#'+videoID).closest('.box').find('.wrapper_inner').addClass('loading'); $('#'+videoID).closest('.box').find('.wrapper_inner .btn-video').addClass('loading'); players[videoID].playing = true // stop slider pauseMainBanner() } else if(state === 'paused'){ $('#'+videoID).closest('.box').find('.wrapper_inner').removeClass('loading'); $('#'+videoID).closest('.box').find('.wrapper_inner .btn-video').removeClass('loading'); players[videoID].playing = false // sync time in cloned players & pause var time = Math.floor(players[videoID].time * 10) / 10 player.contentWindow.postMessage(JSON.stringify({ type: 'player:setCurrentTime', data: {time: time} }), '*') for(var j in players){ if(players[j].slideIndex == slideIndex && players[j].clone){ document.getElementById(players[j].id).contentWindow.postMessage(JSON.stringify({ type: 'player:pause', data: {} }), '*') document.getElementById(players[j].id).contentWindow.postMessage(JSON.stringify({ type: 'player:setCurrentTime', data: {time: time} }), '*') } } } else if(state === 'stopped'){ $('#'+videoID).closest('.box').find('.wrapper_inner').removeClass('loading'); $('#'+videoID).closest('.box').find('.wrapper_inner .btn-video').removeClass('loading'); players[videoID].playing = false if(loop){ player.contentWindow.postMessage(JSON.stringify({ type: 'player:play', data: {} }), '*') } else{ // play slider playMainBanner() } } } } } function onHtml5PlayerReady(e){ var videoID = e.target.id.replace('player_', '') if(videoID){ var mute = players[videoID].mute var cover = players[videoID].cover var clone = players[videoID].clone // mute sound if(mute || clone){ $('#' + players[videoID].id).prop('muted', true); } // cover video if(cover){ CoverPlayer() } // not start clone video playing if(clone){ e.target.pause() } else{ // stop slider pauseMainBanner() e.target.play() } // update slide class var $slide = $('#player_' + videoID).closest('.box') $slide.addClass('started') // $slide.removeClass('loading') } } function onHtml5PlayerStateChange(e){ var videoID = e.target.id.replace('player_', '') if(videoID){ var cover = players[videoID].cover var clone = players[videoID].clone var loop = players[videoID].loop var slideIndex = players[videoID].slideIndex if(!clone){ if(e.target.paused){ players[videoID].playing = false $('#player_'+videoID).closest('.box').find('.wrapper_inner').removeClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').removeClass('loading'); // sync time in cloned players & pause var time = Math.floor(e.target.currentTime * 10) / 10 e.target.currentTime = time for(var j in players){ if(players[j].slideIndex == slideIndex && players[j].clone){ document.getElementById(players[j].id).pause() document.getElementById(players[j].id).currentTime = time } } } else if(e.target.ended){ players[videoID].playing = false if(loop){ $('#player_'+videoID).closest('.box').find('.wrapper_inner').addClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').addClass('loading'); e.target.play() } else{ // play slider playMainBanner() } } else{ players[videoID].playing = true $('#player_'+videoID).closest('.box').find('.wrapper_inner').addClass('loading'); $('#player_'+videoID).closest('.box').find('.wrapper_inner .btn-video').addClass('loading'); // stop slider pauseMainBanner() } } } } waitYTPlayer = function(delay, callback){ if((typeof YT !== "undefined") && YT && YT.Player) { if(typeof callback == 'function') callback(); } else { setTimeout(function(){ waitYTPlayer(delay, callback); }, delay); } } // click on HTML5 video $(document).on('click', 'video.video', function(e){ var videoID = e.target.id.replace('player_', '') if(videoID){ if(players[videoID].playing){ e.target.pause() } else{ //e.target.play() } } }) $('.top_slider_wrapp .box .wrapper_inner').on('click', function(e){ if(!$(e.target).hasClass('btn-video')) { if($(this).hasClass('loading')) { e.stopPropagation(); $(this).find('.btn-video').trigger('click'); } if($(this).closest('.box').data('video_autoplay')) startMainBannerSlideVideo($(this).closest('.box')); } }) $(document).on('click', '.top_slider_wrapp .box.wvideo', function(){ $(this).find('.btn-video').trigger('click'); }); // START VIDEO BUTTON $(document).on('click', '.top_slider_wrapp .box .btn-video', function(e){ e.stopPropagation(); if(!$(this).hasClass('loading')) { $(this).addClass('loading'); $(this).closest('.wrapper_inner').addClass('loading'); } else { $(this).removeClass('loading'); $(this).closest('.wrapper_inner').removeClass('loading'); } startMainBannerSlideVideo($(this).closest('.box')); }); getRandomInt = function(min, max){ return Math.floor(Math.random() * (max - min)) + min; } BX.addCustomEvent('onSlideEnd', function(eventdata) { try{ ignoreResize.push(true); if(eventdata){ var slider = eventdata.slider; if(slider){ setTimeout(function(){ $('.banners-big.front .btn-video, .banners-big.front .box').removeClass('loading'); }, 300); } } } catch(e){} finally{ ignoreResize.pop(); } }); var ignoreResize = []; BX.addCustomEvent('onSlide', function(eventdata) { try{ ignoreResize.push(true); if(eventdata){ var slider = eventdata.slider; if(slider){ var curSlide = slider.find('.box.flex-active-slide'); var curSlideIndex = curSlide.attr('data-slide_index'); if(typeof(curSlideIndex) !== 'undefined' && curSlideIndex.length){ setTimeout(function(){ CoverPlayerHtml(curSlideIndex); }, 200); // pause play video if(typeof(players) !== 'undefined' && players){ for(var j in players){ if(players[j].playing && !players[j].clone && (players[j].slideIndex != curSlideIndex)){ if((typeof window[players[j].id] == 'object')){ if(players[j].videoPlayer === 'YOUTUBE'){ window[players[j].id].pauseVideo() } else if(players[j].videoPlayer === 'VIMEO'){ window[players[j].id].pause() } else if(players[j].videoPlayer === 'RUTUBE'){ document.getElementById(players[j].id).contentWindow.postMessage(JSON.stringify({ type: 'player:pause', data: {} }), '*') } else if(players[j].videoPlayer === 'HTML5'){ document.getElementById(players[j].id).pause() } } } } } // autoplay video var bVideoAutoPlay = curSlide.attr('data-video_autoplay') == 1 if(bVideoAutoPlay){ startMainBannerSlideVideo(curSlide) } } if(curSlide.find('video').length && !curSlide.find('.btn-video').length){ var videoID = curSlide.find('video').attr('id'); document.getElementById(videoID).play(); } } } } catch(e){} finally{ ignoreResize.pop(); } });