1 2;(function ($, w, d, h, b) { 3 window.aiosSliderInstances = []; 4 var playerInstance = []; 5 var app = { 6 playCustomVideo: function ($slider, options, splide, $currentSlide) { 7 var isAutoplay = options.autoplay; 8 var {Autoplay} = splide.Components; 9 var type = $currentSlide.attr('data-slide-type'); 10 var speed = options.speed; 11 var slides = splide.Components.Elements.slides; 12 13 if ( 14 type == 'html5-video' && 15 isAutoplay == true 16 ) { 17 var $videoContainer = $currentSlide.find('.aios-slider-custom-video'); 18 var $video = $videoContainer.find('video'); 19 20 // pause autoplay 21 Autoplay.pause(); 22 splide.autoplayWasPausedByVideo = true; 23 24 var playPromise = $video[0].play(); 25 playPromise 26 .then(function (e) { 27 // adds is-playing class if successfully plays 28 $slider.addClass('is-playing'); 29 $currentSlide.addClass('video-played-once'); 30 }) 31 .catch(function (e) { 32 // handle click event if autoplay doesn't work due to policies 33 $videoContainer 34 .find('button')[0] 35 .click(); 36 37 // adds is-playing class if successfully plays 38 $slider.addClass('is-playing'); 39 }); 40 41 // replay video if slides == 1 42 // we'll loop the video seamlessly 43 if (slides.length === 1) { 44 // play before it ends 45 $video.on('ended', function () { 46 $video[0].currentTime = 0; 47 $video[0].play(); 48 }); 49 } 50 // proceed next slide after video ended 51 else { 52 $video.one('ended', function () { 53 $slider.removeClass('is-playing'); 54 splide.go('>'); 55 }); 56 } 57 } 58 }, 59 splide: function () { 60 var $sliders = $('.aios-slider.aios-slider-template-default .aios-slider-splide'); 61 $.each($sliders, function (index, slider) { 62 var $slider = $(slider); 63 64 // skip if already initialized 65 if ($slider.hasClass('is-initialized')) return; 66 67 var options = JSON.parse($slider.attr('data-splide')); 68 var isAutoplay = options.autoplay; 69 var splide = new Splide($slider[0]); 70 splide.autoplayWasPausedByVideo = false; 71 72 // pause custom html5 video before move 73 splide.on('move', function (newIndex, prevIndex, destIndex) { 74 var slides = splide.Components.Elements.slides; 75 var $prevSlide = $(slides[prevIndex]); 76 var type = $prevSlide.attr('data-slide-type'); 77 var $video = $prevSlide.find('video'); 78 79 if ( 80 type == 'html5-video' && 81 $video.length > 0 && 82 $video[0].paused == false 83 ) { 84 $video[0].pause(); 85 $slider.removeClass('is-playing'); 86 } 87 }); 88 89 // resume autoplay after slide move if it was paused by video slide 90 splide.on('moved', function (newIndex) { 91 var slides = splide.Components.Elements.slides; 92 var $currentSlide = $(slides[newIndex]); 93 var $video = $currentSlide.find('video'); 94 95 // resume autoplay function 96 if ( 97 splide.autoplayWasPausedByVideo == true && 98 $video.length < 1 99 ) { 100 var {Autoplay} = splide.Components; 101 102 Autoplay.play(); 103 splide.autoplayWasPausedByVideo = false;
104 } 105 }); 106 107 // will stop autoplay if next slide uses video extension 108 splide.on('video:play', function (player) { 109 var {Autoplay} = splide.Components; 110 var $currentSlide = $(splide.Components.Elements.slides[splide.index]); 111 var type = $currentSlide.attr('data-slide-type'); 112 113 if ( 114 $currentSlide.hasClass('splide__slide--has-video') == true && 115 Autoplay.isPaused() == false && 116 isAutoplay == true && 117 splide.Components.Slides.getLength() > 1 118 ) { 119 Autoplay.pause(); 120 splide.autoplayWasPausedByVideo = true; 121 } 122 123 // add class if video played once 124 $currentSlide.addClass('video-played-once'); 125 126 // for player instance 127 if (!$currentSlide.hasClass('player-initialized')) { 128 $currentSlide.addClass('player-initialized'); 129 130 // for youtube 131 if (type == 'youtube') { 132 playerInstance[splide.index] = player.player.player; 133 } 134 135 // for vimeo 136 if (type == 'vimeo') { 137 playerInstance[splide.index] = new Vimeo.Player($currentSlide.find('.splide__video iframe')[0]); 138 } 139 } 140 }); 141 142 // video ended go to next slide if autoplay is true 143 splide.on('video:ended', function (player) { 144 var $currentSlide = $(splide.Components.Elements.slides[splide.index]); 145 146 // go to next slide after video plays/ends 147 if ( 148 isAutoplay == true && 149 splide.Components.Slides.getLength() > 1 150 ) { 151 splide.go('>'); 152 } 153 154 // resume autoplay if avaible 155 if (splide.autoplayWasPausedByVideo == true) { 156 var {Autoplay} = splide.Components; 157 158 Autoplay.play(); 159 splide.autoplayWasPausedByVideo = false; 160 } 161 162 // set play button to visible after video ended if autoplay is disabled 163 if ( 164 isAutoplay == false && 165 typeof player == 'object' && 166 typeof player.slide == 'object' && 167 $(player.slide).find('.splide__video__play').is(':visible') == false 168 ) { 169 $(player.slide).find('.splide__video__play').show(); 170 } 171 }); 172 173 splide.on('mounted', function () { 174 var {Autoplay} = splide.Components; 175 var $currentSlide = $(splide.Components.Elements.slides[splide.index]); 176 177 // video element poster 178 setTimeout(function () { 179 $.each(splide.Components.Elements.slides, function (i, v) { 180 var $slide = $(v); 181 182 if ($slide.hasClass('splide__slide--has-video')) { 183 var $target = $slide.find('.splide__video__wrapper div video'); 184 $target.prop('poster', $slide.attr('data-splide-poster')); 185 } 186 }); 187 188 // remove video play on splide click 189 if ($slider.hasClass('autoplay-enable')) { 190 $slider.find('.splide__video, .aios-slider-img, .aios-slider-tagline, .aios-slider-volume').on('click.onVideoClick click', function (e) { 191 e.stopImmediatePropagation(); 192 }); 193 } 194 }, 200); 195 }); 196 197 // for tagline animation and video functions 198 splide.on('mounted moved', function () { 199 var $currentSlide = $(splide.Components.Elements.slides[splide.index]);
200 var type = $currentSlide.attr('data-slide-type'); 201 var slides = splide.Components.Elements.slides; 202 var index = $currentSlide.attr('data-slide-number'); 203 204 $slider 205 .find('.splide__slide') 206 .not($currentSlide) 207 .find('.aios-slider-tagline') 208 .removeClass('tagline-active'); 209 210 // for tagline 211 $currentSlide 212 .find('.aios-slider-tagline') 213 .addClass('tagline-active'); 214 215 // video on load 216 if ( 217 $slider.hasClass('video-on-load') && 218 !$currentSlide.hasClass('video-played-once') 219 ) { 220 var $currentVideo = $currentSlide.find('video'); 221 var $newVideo = $(` 222 <video preload="none" poster="${$currentVideo.attr('poster')}" muted playsinline> 223 <source src="${$currentVideo.attr('data-src')}" type="video/mp4"> 224 </video> 225 `); 226 227 if (index === '1') { 228 // remove old video, prepend new video 229 // then play on users scroll/mousemove/touchmove 230 $(w).one('scroll mousemove touchmove', function() { 231 // old 232 $currentVideo.remove(); 233 234 // new 235 $newVideo.prependTo($currentSlide.find('.aios-slider-custom-video')); 236 237 // html5 video autoplay 238 app.playCustomVideo($slider, options, splide, $currentSlide); 239 }); 240 } 241 else { 242 // old 243 $currentVideo.remove(); 244 245 // new 246 $newVideo.prependTo($currentSlide.find('.aios-slider-custom-video')); 247 248 // html5 video autoplay 249 app.playCustomVideo($slider, options, splide, $currentSlide); 250 } 251 } 252 else { 253 // html5 video autoplay 254 app.playCustomVideo($slider, options, splide, $currentSlide); 255 } 256 }); 257 258 // mount splide with extensions 259 splide.mount(w.splide.Extensions || null); 260 261 // refresh splide if type == loop 262 if (options.type == 'loop') splide.refresh(); 263 264 // add splide instance on global variables so that it can be easily access outside plugin 265 window.aiosSliderInstances[$slider.closest('.aios-slider').attr('id')] = splide; 266 }); 267 }, 268 video: function () { 269 // custom html5 video button 270 var $targets = $('.aios-slider.aios-slider-template-default .aios-slider-custom-video button, .aios-slider.aios-slider-template-default .aios-slider-custom-video video'); 271 $targets.on('click', function (e) { 272 var $this = $(this); 273 var $parent = $this.closest('.aios-slider-custom-video'); 274 var $splide = $this.closest('.aios-slider .splide'); 275 var $button = $parent.find('button'); 276 var $video = $parent.find('video'); 277 278 // clicked on button 279 if ($this.prop('tagName') == 'BUTTON') { 280 $video[0].play(); 281 $splide.addClass('is-playing'); 282 } 283 284 // clicked on video 285 if ($this.prop('tagName') == 'VIDEO') { 286 // play 287 if ($video[0].paused == true) { 288 $video[0].play(); 289 $splide.addClass('is-playing'); 290 } 291 // pause 292 else { 293 $video[0].pause(); 294 $splide.removeClass('is-playing'); 295 } 296 } 297 }); 298 299 // volume 300 $('.aios-slider.aios-slider-template-default .aios-slider-volume').on('click', function (e) { 301 e.preventDefault(); 302 e.stopImmediatePropagation(); 303 304 var $this = $(this); 305 var $parent = $this.closest('.splide__slide');
306 var type = $parent.attr('data-slide-type'); 307 var index = $parent.attr('data-slide-number'); 308 var player = playerInstance[index - 1]; 309 var $video = ''; 310 311 if (type == 'html5-video') { 312 $video = $parent.find('.aios-slider-custom-video'); 313 } 314 else { 315 $video = $this.next('.splide__video'); 316 } 317 318 var fnIconChange = function (icon) { 319 if (icon == 'on') { 320 $this 321 .addClass('volume-on') 322 .find('.ai-font-mute') 323 .addClass('ai-font-volume-a') 324 .removeClass('ai-font-mute'); 325 } 326 327 if (icon == 'off') { 328 $this 329 .removeClass('volume-on') 330 .find('.ai-font-volume-a') 331 .addClass('ai-font-mute') 332 .removeClass('ai-font-volume-a'); 333 } 334 } 335 336 if ($this.hasClass('volume-on')) { 337 // youtube player 338 if (type == 'youtube') { 339 player.mute(); 340 } 341 342 // vimeo player 343 if (type == 'vimeo') { 344 player.setVolume(0); 345 } 346 347 // html5 player 348 if (type == 'html5-video') { 349 $video.find('video')[0].muted = true; 350 } 351 352 fnIconChange('off'); 353 } 354 else { 355 // youtube player 356 if (type == 'youtube') { 357 player.unMute(); 358 } 359 360 // vimeo player 361 if (type == 'vimeo') { 362 player.setVolume(1); 363 } 364 365 // html5 player 366 if (type == 'html5-video') { 367 $video.find('video')[0].muted = false; 368 } 369 370 fnIconChange('on'); 371 } 372 }); 373 }, 374 init: function () { 375 this.splide(); 376 this.video(); 377 } 378 } 379 380 $(d).on('DOMContentLoaded', function () { 381 app.init(); 382 }); 383})(jQuery, window, document, 'html', 'body');
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.