https://tasmania.com/wp-content/themes/tasmania/js/video-player.js?ver=1781728557

1(function($) {
2
3    $.fn.autoplayInlineVideo = function() {
4        $(this).each(autoplayInlineVideo);
5    };
6
7    initEvents();
8
9    var currentVideo;
10    var scrollTop;
11
12    function getModal() {
13        var $modal = $('.video-player--modal');
14        if(!$modal.get(0)) return false;
15        return $modal;
16    }
17
18    function initEvents() {
19        $(document.body).on('click', '.video-player--inline .video-player--overlay_button', overlayPlayHandler);
20
21        $(document.body).on('click', '.video-player--modal .video-player--modal_play', modalPlayPauseHandler);
22
23        $(document.body).on('click', '.video-player--modal .video-player--modal_wrapper', backgroundClickHandler);
24
25        $(document.body).on('click', '.video-player--modal .video-player--modal_close', closeModalClickHandler);
26
27        $('.video-player--inline[data-autoplay="true"]').autoplayInlineVideo();
28
29
30        $(document.body).on('kd_tas:video_player:modal:show', modalExternalLaunchHandler);
31    }
32
33    function modalExternalLaunchHandler(e, player) {
34        launchModal.apply(player);
35    }
36
37    function autoplayInlineVideo() {
38        var $player = $(this);
39
40        playInline.apply(this);
41    }
42
43    function overlayPlayHandler() {
44        var $button = $(this);
45        var $player = $button.closest('.video-player--inline');
46        
47        var type = $player.data('type') || $player.attr('data-type');
48
49        if(type !== 'modal') {
50            //Play inline
51            playInline.apply($player);
52        } else {
53            //Open Modal
54            launchModal.apply($player);
55        }
56    }
57
58    function modalPlayPauseHandler() {
59        var $button = $(this);
60        var $player = $button.closest('.video-player--modal');
61
62        if(currentVideo.get(0).paused) {
63            currentVideo.get(0).play();
64        } else {
65            currentVideo.get(0).pause();
66        }
67    }
68
69
70    function launchModal() {
71        var $player = $(this);
72        var $modal = getModal();
73        if(!$modal) return;
74
75        scrollTop = $(window).scrollTop();
76
77        $('body').addClass('noscroll');
78        $modal.css({display: 'block'});
79        var modalType = $player.data('modal-type') || $player.attr('data-modal-type') || 'responsive';
80        $modal.addClass('modal-type-' + modalType);
81
82        if($player.data('use-plyr') || $player.attr('data-use-plyr') === 'true') {
83            $(document.body).trigger('kd_tas:video_player:modal:ready', [$modal, $player]);
84        } else if ($player.data('use-vimeo-embed') || $player.attr('data-use-vimeo-embed') === 'true') {
85            var videoID = $player.data('video-id') || $player.attr('data-video-id');
86            if (!videoID) {
87                videoID = get_vimeo_id($player.data('video') || $player.attr('data-video'));
88            }
89            var embedUrl = 'https://player.vimeo.com/video/' + videoID + '?autoplay=1&muted=0&loop=1';
90            $modal.find('.video-player--video_container').html(
91              '<div style="position:relative; width:100%; max-width:1400px; margin:0 auto;">' +
92                '<div style="position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:8px; overflow:hidden;">' +
93                  '<iframe src="' + embedUrl + '" ' +
94                          'style="position:absolute; top:0; left:0; width:100%; height:100%; border:0;" ' +
95                          'frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>' +
96                  '</iframe>' +
97                '</div>' +
98              '</div>'
99            );
100            $modal.find('.video-player--video_controls').remove();
101            $modal.controlsHidden = true;
102        } else {
103            buildVideo({
104                source: $player.data('video') || $player.attr('data-video')
105            });
106
107            currentVideo.onEnd(function() {
108
109            });
110            currentVideo.onLoad(function() {
111                currentVideo.play();
112                $modal.find('.video-player--modal_play .icon').addClass('fa-pause').removeClass('fa-spin fa-spinner');
113                setTimeout(function() {
114                    $modal.find('.video-player--video_controls').animate({opacity: 0}, 1000, function(){
115                        $modal.controlsHidden = true;
116                    });
117                },500);
118            });
119
120            $modal.onMouseEnter = function() {
121                if($modal.controlsHidden) {
122                    $modal.find('.video-player--video_controls').animate({opacity: 1}, 1000, function(){
123                        $modal.controlsHidden = false;

124                    });
125                }
126            };
127            $modal.onMouseLeave = function() {
128                if(!$modal.controlsHidden) {
129                    $modal.find('.video-player--video_controls').animate({opacity: 0}, 1000, function(){
130                        $modal.controlsHidden = true;
131                    });
132                }
133            };
134            $modal.find('.video-player--video_controls').hover($modal.onMouseEnter, $modal.onMouseLeave);
135
136            $modal.find('.video-player--video_container').html(currentVideo);
137        }
138
139        setTimeout(function() {
140            $modal.addClass('active');
141        });
142    }
143
144    function closeModalClickHandler(e) {
145        hideModal();
146    }
147
148    function backgroundClickHandler(e) {
149        if(!$(e.target).hasClass('video-player--modal_wrapper')) return;
150        hideModal();
151    }
152
153    function hideModal() {
154        var $modal = getModal();
155        if(!$modal) return;
156
157        $modal.removeClass('active');
158        $('html, body').removeClass('noscroll');
159        setTimeout(function() {
160            destroyVideo();
161            $modal.controlsHidden = false;
162            $modal.find('.video-player--video_controls').css({opacity: 1});
163            $modal.css({display: 'none'});
164            $modal.find('.video-player--video_container').empty();
165        },400);
166    }
167
168    function playInline() {
169        var $player = $(this);
170
171        if($player.is(":hidden")) return;
172
173        var sourceUrl = $player.data('video') || $player.attr('data-video');
174        var isAutoplay = $player.data('autoplay') || $player.attr('data-autoplay') === 'true';
175
176        var $video = buildVideo({
177            source: sourceUrl,
178            inline: true,
179            autoplay: isAutoplay
180        });
181
182        $player.find('.video-player--video_container').html($video);
183
184        $video.onLoad(function() {
185            $video.play();
186            $player.find('.image-container--cover, .video-player--overlay').animate({opacity: 0},100, function() {
187                $(this).css({pointerEvents: 'none'});
188            })
189        });
190
191        if(!$player.data('autoplay')) {
192            $video.onEnd(function() {
193                $player.find('.image-container--cover, .video-player--overlay').animate({opacity: 1},100, function() {
194                    $(this).css({pointerEvents: 'all'});
195                })
196            });
197        }
198    }
199
200    function destroyVideo() {
201        if(currentVideo)
202            currentVideo.remove();
203    }
204
205    function buildVideo(opts) {
206        var defaults = {
207            source: false,
208            inline: false,
209            autoplay: false
210        };
211        opts = $.extend(defaults, opts);
212
213        var newVideo = $('<video playsinline><source src="'+opts.source+'" type="video/mp4"></video>');
214
215        if(opts.inline && opts.autoplay) {
216            newVideo.attr('loop', 'loop');
217            newVideo.attr('muted', 'muted')
218        }
219        if(opts.inline && !opts.autoplay) {
220            newVideo.attr('controls', 'controls');
221        }
222
223
224        var video = newVideo.get(0);
225
226        var videoEvents = {
227            onLoad: [],
228            onPlay: [],
229            onPause: [],
230            onEnd: []
231        };
232
233        newVideo.onLoad = function(cb) {
234            videoEvents.onLoad.push(cb);
235        };
236        newVideo.onPlay = function(cb) {
237            videoEvents.onPlay.push(cb);
238        };
239        newVideo.onPause = function(cb) {
240            videoEvents.onPause.push(cb);
241        };
242        newVideo.onEnd = function(cb) {
243            videoEvents.onEnd.push(cb);
244        };
245        newVideo.play = function() {
246            video.play();
247        };
248
249
250        video.onloadedmetadata = function() {
251            $.each(videoEvents.onLoad, function(i, event) {
252                event.apply(null)
253            });
254        };
255        video.onended = function() {
256            $.each(videoEvents.onEnd, function(i, event) {
257                event.apply(null)
258            });
259        };
260
261        if(!opts.inline) {
262            currentVideo = newVideo;
263        }
264
265        return newVideo;
266    }
267})(jQuery);