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