https://www.animaker.fr/static_2.0/voice.js

1// VIDEO SOURCE LIST
2var activeVideoSource = 0;
3var exploreVideoSourceList = [
4  'static_2.0/img/animakervoice/Speed_fr.mp4',
5  'static_2.0/img/animakervoice/Breathe_fr.mp4',
6  'static_2.0/img/animakervoice/Break_fr.mp4',
7  'static_2.0/img/animakervoice/Pitch_fr.mp4',
8];
9var exploreVideoPosterList = [
10  'static_2.0/img/animakervoice/Speed_fr.png',
11  'static_2.0/img/animakervoice/Speed_fr.png',
12  'static_2.0/img/animakervoice/Speed_fr.png',
13  'static_2.0/img/animakervoice/Speed_fr.png',
14];
15
16function playExploreVideo(activeVideo){
17  // console.log('Video paused & src updated');
18  // RESET THE CURRENT ACTIVE VIDEO
19  $('#explore-section ul > li').removeClass('active');
20  $('#progressbar'+parseInt(activeVideoSource +1 )).attr('value',0);
21
22  // NOW, UPDATE THE SOURCE & PLAY NEW VIDEO
23  var exploreVideo = document.getElementById('explore-video-list');
24  activeVideoSource = parseInt(activeVideo -1);
25      if(exploreVideo){
26         // console.log('Element found - #explore-video-list');
27         exploreVideo.poster = exploreVideoPosterList[activeVideoSource];
28         setTimeout(function(){
29          exploreVideo.src = exploreVideoSourceList[activeVideoSource];
30          exploreVideo.play();
31         },100);
32       }else{
33         // console.log('Element not found - #explore-video-list');
34      }
35}
36
37function reorderProgressbarForMobile(){
38  for(var i=1;i<=4;i++){
39    $(".explore-section ul li:nth-child("+i+") .col-lg-9 progress").insertAfter(".explore-section ul li:nth-child("+i+") .col-lg-9 h3");
40  }
41}
42
43$(window).resize(function() {
44  //update stuff
45});
46
47$( document ).ready(function() {
48  AOS.init();
49  console.log( "ready!" );
50
51  // Header class add-on on scroll
52  $(window).scroll(function() {
53    var scroll = $(window).scrollTop();
54    // console.log('scroll top : '+scroll);
55    if (scroll > 0) {
56      // $("#navbar_top").removeClass("navbar-dark");
57        $("#navbar_top").addClass("fixed-top");
58    } else {
59        $("#navbar_top").removeClass("fixed-top");
60        // $("#navbar_top").addClass("navbar-dark");
61    }
62  });
63
64  const swiper = new Swiper('.swiper.review-swiper', {
65    on: {
66      init: function() {
67         console.log('swiper review initialized');
68      },
69   },
70    // Optional parameters
71    direction: 'horizontal',
72    loop: true,
73    // slidesPerView:3,
74    // spaceBetween:25,
75
76
77    // Navigation arrows
78    navigation: {
79      nextEl: '.swiper-button-next',
80      prevEl: '.swiper-button-prev',
81    },
82
83    // Responsive breakpoints
84  breakpoints: {
85    // when window width is >= 320px
86    320: {
87      slidesPerView: 1,
88      spaceBetween: 25
89    },
90    // when window width is >= 767px
91    767: {
92      slidesPerView: 2,
93      spaceBetween: 25
94    },
95    // when window width is >= 990px
96    990: {
97      slidesPerView: 3,
98      spaceBetween: 25
99    }
100  }
101
102  });
103
104
105
106  const swiper2 = new Swiper('.swiper.language-swiper', {
107
108    /* ON INIT AUTOPLAY THE FIRST VIDEO */
109    on: {
110      init: function () {
111        console.log('swiper voice initialized');
112      },
113    },
114    // Optional parameters
115    direction: 'horizontal',
116    loop: true,
117    // slidesPerView:3,
118    // spaceBetween:25,
119    centeredSlides:true,
120    slideToClickedSlide:true,
121    allowTouchMove: false,
122
123    effect:'coverflow',
124    coverflowEffect: {
125      rotate: 0,
126      stretch: 0,
127      depth: 400,
128      modifier: 1,
129      scale:1,
130      slideShadows: false,
131      // transfromEl:''
132    },
133
134    // grabCursor:true,
135
136    // Responsive breakpoints
137  breakpoints: {
138    // when window width is >= 320px
139    320: {
140      slidesPerView: 1.5,
141      // spaceBetween: 25
142    },
143    // when window width is >= 767px
144    767: {
145      slidesPerView: 2,
146      // spaceBetween: 25
147    },
148    // when window width is >= 990px
149    990: {
150      slidesPerView: 3,
151      // spaceBetween: 25
152    }
153  }
154
155  });
156  swiper2.on('beforeSlideChangeStart', function(){
157    // console.log('beforeSlideChangeStart');
158
159  });
160  swiper2.on('slideChange', function () {
161    // console.log('slide change Triggered');
162    // STOP PREVIOUS VIDEO IF NOT PAUSED
163    var sliderVideos = $(".swiper-slide video");
164    sliderVideos.each(function( index ) {
165      $(this).trigger('pause');
166      this.currentTime = 0;
167    });
168  });
169
170  swiper2.on('slideChangeTransitionStart', function(){
171    // console.log('slideChangeTransitionStart');
172
173  });
174
175  swiper2.on('activeIndexChange', function(){
176    // console.log('activeIndexChange');
177    // console.log(this.activeIndex);
178    // console.log(this.realIndex);
179  });
180
181  swiper2.on('slideChangeTransitionEnd', function($this){
182    console.log('slideChangeTransitionEnd');
183
184    /* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
185    var currentVideo =  $(".swiper-slide.swiper-slide-active[data-swiper-slide-index=" + this.realIndex + "] > ").find("video");
186        currentVideo.trigger('play');
187  });
188
189
190  // VIDEO AUTO-PLAY WITH LOOP EFFECT JS
191  // var activeVideoSource = 0;
192  var exploreVideo = document.getElementById('explore-video-list');
193  // var exploreVideoSourceList = [
194  //   'static_2.0/img/animakervoice/customizable_templates_fr.mp4',
195  //   'static_2.0/img/animakervoice/Animated_Asset_library_fr.mp4',
196  //   'static_2.0/img/animakervoice/customizable_templates_fr.mp4',
197  //   'static_2.0/img/animakervoice/Animated_Asset_library_fr.mp4',
198  // ];
199    if(exploreVideo){
200      // console.log('Element found - #explore-video-list');
201
202      // CAPTURE THE PLAY EVENT & UPDATE THE PROGRESS BAR
203      exploreVideo.addEventListener("timeupdate", function() {
204        // if the video is loaded and duration is known
205        if(!isNaN(this.duration)) {
206            var percent_complete = this.currentTime / this.duration;
207            // use percent_complete to draw a progress bar
208            // console.log('percent_complete : '+percent_complete);
209
210            $('#explore-section ul > li:nth-child('+ parseInt(activeVideoSource +1 )+')').addClass('active');
211
212            //  percent varies from 0 to 1
213            $('#progressbar'+ parseInt(activeVideoSource +1 )).attr('value',percent_complete);
214
215          }else{
216          // console.log('No Duration '+parseInt(activeVideoSource +1 ));
217        }
218      });
219
220      // CAPTURE VIDEO ENDING & START THE NEXT VIDEO
221      exploreVideo.addEventListener('ended', function(e) {
222
223        // console.log('Video Ended '+parseInt(activeVideoSource +1 ));
224
225        $('#explore-section ul > li').removeClass('active');
226        $('#progressbar'+parseInt(activeVideoSource +1 )).attr('value',0);
227
228        // update the new active video index
229        activeVideoSource = (++activeVideoSource) % exploreVideoSourceList.length;
230
231        // update the video source and play
232        exploreVideo.src = exploreVideoSourceList[activeVideoSource];
233        exploreVideo.play();
234      });
235
236    }else{
237      // console.log('Element not found - #explore-video-list');
238    }
239
240
241    // RESET VIDEOS TO 1ST FRAME ON END
242
243    var video1 = document.getElementById('voice-video-1');
244    if(video1){
245      video1.addEventListener('ended', function(e) {
246        this.currentTime = 0;
247      });
248      video1.addEventListener('mouseover', function(e) {
249        // console.log('hover listener 1');
250        var Activeslide = this.parentElement.parentElement;
251        // console.log(Activeslide.getAttribute("data-swiper-slide-index"));
252        // console.log(swiper2.realIndex);
253        if(Activeslide.getAttribute("data-swiper-slide-index") == swiper2.realIndex){
254          this.play();
255        }else{
256          // console.log('video not played');
257        }
258      });
259    }else{
260      //  console.log('voice-video-1 not found');
261    }
262
263    var video2 = document.getElementById('voice-video-2');
264    if(video2){
265      video2.addEventListener('ended', function(e) {
266        this.currentTime = 0;
267      });
268      video2.addEventListener('mouseover', function(e) {
269        // console.log('hover listener 2');
270        var Activeslide = this.parentElement.parentElement;
271        // console.log(Activeslide.getAttribute("data-swiper-slide-index"));
272        // console.log(swiper2.realIndex);
273        if(Activeslide.getAttribute("data-swiper-slide-index") == swiper2.realIndex){
274          this.play();
275        }else{
276          // console.log('video not played');
277        }
278      });
279    }else{
280      //  console.log('voice-video-2 not found');
281    }
282
283    var video3 = document.getElementById('voice-video-3');
284    if(video3){
285      video3.addEventListener('ended', function(e) {
286        this.currentTime = 0;
287      });
288      video3.addEventListener('mouseover', function(e) {
289        // console.log('hover listener 3');
290        var Activeslide = this.parentElement.parentElement;
291        // console.log(Activeslide.getAttribute("data-swiper-slide-index"));
292        // console.log(swiper2.realIndex);
293        if(Activeslide.getAttribute("data-swiper-slide-index") == swiper2.realIndex){
294          this.play();
295        }else{
296          // console.log('video not played');
297        }
298      });
299    }else{
300      //  console.log('voice-video-3 not found');
301    }
302
303    var video4 = document.getElementById('voice-video-4');
304    if(video4){
305      video4.addEventListener('ended', function(e) {
306        this.currentTime = 0;
307      });
308      video4.addEventListener('mouseover', function(e) {
309        // console.log('hover listener 4');
310        var Activeslide = this.parentElement.parentElement;
311        // console.log(Activeslide.getAttribute("data-swiper-slide-index"));
312        // console.log(swiper2.realIndex);
313        if(Activeslide.getAttribute("data-swiper-slide-index") == swiper2.realIndex){
314          this.play();
315        }else{
316          // console.log('video not played');
317        }
318      });
319    }else{
320      //  console.log('voice-video-4 not found');
321    }
322
323    var video5 = document.getElementById('voice-video-5');
324    if(video5){
325      video5.addEventListener('ended', function(e) {
326        this.currentTime = 0;
327      });
328      video5.addEventListener('mouseover', function(e) {
329        // console.log('hover listener 5');
330        var Activeslide = this.parentElement.parentElement;
331        // console.log(Activeslide.getAttribute("data-swiper-slide-index"));
332        // console.log(swiper2.realIndex);
333        if(Activeslide.getAttribute("data-swiper-slide-index") == swiper2.realIndex){
334          this.play();
335        }else{
336          // console.log('video not played');
337        }
338      });
339    }else{
340      //  console.log('voice-video-5 not found');
341    }
342
343
344
345    // FACEBOOK VIDEO SECTION
346    $("#voice_over").on("click", function(){
347      // console.log("in");
348      $('#video_find1').trigger('play');
349    });
350    $("#voice_like_pause").on("click", function(){
351      // console.log("in");
352      $('#video_find2').trigger('pause');
353    });
354    $("#voice_over_pause").on("click", function(){
355      // console.log("in");
356      $('#video_find1').trigger('pause');
357    });
358    $("#voice_like").on("click", function(){
359      // console.log("in");
360      $('#video_find2').trigger('play');
361    });
362    $('#video_find1').on('play', function() {
363      //Actions when video play selected
364      $('#voice_over').fadeOut(400);
365      $('#voice_over_pause').show();
366    });
367    $('#video_find2').on('play', function() {
368      //Actions when video play selected
369      $('#voice_like').fadeOut(400);
370      $('#voice_like_pause').show();
371    });
372    $('#video_find1').on('pause', function() {
373      //Actions when video pause selected
374      $('#voice_over').fadeIn(400);
375      $('#voice_over_pause').hide();
376    });
377    $('#video_find2').on('pause', function() {
378      //Actions when video pause selected
379      $('#voice_like').fadeIn(400);
380      $('#voice_like_pause').hide();
381    });
382
383    var isMobileDevice = $(window).width() < 767.98 ? true : false;

384    console.log('isMobileDevice : '+isMobileDevice);
385    var isSafari = false;
386    var ua = navigator.userAgent.toLowerCase();
387    if (ua.indexOf('safari') != -1) {
388      if (ua.indexOf('chrome') > -1) {
389        // alert("1") // Chrome
390      } else {
391        // alert("2") // Safari
392        isSafari = true;
393      }
394    }
395    console.log('isSafari : '+isSafari);
396
397    // $('#language-slider').hover(function(){
398    //   console.log('hover in');
399    // })
400
401});