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