https://www.rosmini.school.nz/js/video_player.js?v=202609250757

1$(function () {
2
3    /* Youtube background player js -- https://github.com/stamat/youtube-background */
4
5    $('[data-video-poppable][data-toggle=\"modal\"][data-target]').each(function (index, element) {
6
7        let modal_id = $(element).data('target');
8
9        let video_url = $(element).data('url');
10
11        if (!video_url) return;
12
13        let urlObj;
14
15        try {
16            urlObj = new URL(video_url);
17        } catch (e) {
18            console.warn('Invalid video URL:', video_url);
19            return;
20        }
21
22        let videoId = null;
23
24        /* youtube watch?v= */
25        if (urlObj.hostname.includes('youtube.com') && urlObj.searchParams.get('v')) {
26            videoId = urlObj.searchParams.get('v');
27        }
28
29        else if (urlObj.hostname === 'youtu.be') {
30            videoId = urlObj.pathname.substring(1);
31        }
32
33        else if (urlObj.pathname.startsWith('/embed/')) {
34            videoId = urlObj.pathname.split('/embed/')[1];
35        }
36
37        if (videoId) {
38            video_url = 'https://www.youtube.com/embed/' + videoId;
39        }
40
41        /* add video */
42        const reg_youtube = /^((http|https):\/\/)((w{3})\.)?youtube\.com\/embed\/[\w\d-\=\?]+/g;
43        const reg_vimeo = /^((http|https):\/\/)((w{3})\.)?vimeo\.com\/[\w\d-]+/g;
44        const vid_container = $(modal_id).find('[data-video-poppable-container]');
45
46        if (vid_container) {
47
48            if (reg_youtube.test(video_url)) {
49
50                /* youtube */
51                video_url = video_url.replace('/watch?v=', '/embed/').replace(/\/$/, '');
52
53                const extraParams = 'autoplay=1&enablejsapi=1&rel=0&vq=hd720';
54
55                const separator = video_url.includes('?') ? '&' : '?';
56
57                video_url = video_url + separator + extraParams;
58                vid_container.html(`
59									<iframe class='embed-responsive-item' src='` + video_url + `' frameborder='0' allow='accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
60								`);
61
62                /* pause */
63                $(modal_id).on('hidden.bs.modal', function (event) {
64                    $($(event.target).find('iframe'))[0]?.contentWindow?.postMessage(JSON.stringify(pauseVideoObj), '*');
65                });
66
67                /* play */
68                $(modal_id).on('shown.bs.modal', function (event) {
69                    $($(event.target).find('iframe'))[0]?.contentWindow?.postMessage(JSON.stringify(playVideoObj), '*');
70                });
71
72            } else if (reg_vimeo.test(video_url)) {
73
74                /* vimeo */
75                if (!$('script#vimeo_script').length) {
76                    $(document).ready(
77                        function () {
78                            $('body').append(`<script id='vimeo_script' src='https://player.vimeo.com/api/player.js'><\/script>`);
79                        })
80                };
81
82                video_url = video_url.replace('vimeo.com', 'player.vimeo.com\/video');
83                vid_container.html(`
84									<iframe src='` + video_url + `' class='embed-responsive-item' frameborder='0' allow='autoplay; fullscreen; picture-in-picture' allowfullscreen></iframe>
85								`);
86
87                /* pause */
88                $(modal_id).on('hidden.bs.modal', function (event) {
89                    let iframe = $($(event.target).find('iframe'))[0];
90                    let player = new Vimeo.Player(iframe);
91                    player.pause();
92                });
93
94                /* play */
95                $(modal_id).on('shown.bs.modal', function (event) {
96                    let iframe = $($(event.target).find('iframe'))[0];
97                    let player = new Vimeo.Player(iframe);
98                    player.play();
99                });
100
101            }
102        }
103
104        let pauseVideoObj = {
105            'event': 'command',
106            'func': 'pauseVideo'
107        };
108
109        let playVideoObj = {
110            'event': 'command',
111            'func': 'playVideo'
112        };
113
114    });

115
116    $('[data-vbg]').youtube_background();
117
118
119    (function loadYoutubeIFrameApiScript() {
120        const tag = document.createElement('script');
121        tag.src = 'https://www.youtube.com/iframe_api';
122
123        const firstScriptTag = document.getElementsByTagName('script')[0];
124        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
125
126        tag.onload = setupPlayer;
127    })();
128
129    function setupPlayer() {
130        window.YT.ready(function () {
131            let vid = $('[data-video-autoplay]');
132            if (vid.length > 0) {
133                vid.YTPlayer()
134            }
135        });
136    }
137
138    /* YTPlayer support ends */
139
140    /* control carousel video play or pause */
141    setTimeout(() => {
142        if ($('.carousel-with-video-img .carousel')) {
143
144            let pauseVideo = {
145                'event': 'command',
146                'func': 'pauseVideo',
147                'args': ''
148            };
149
150            let playVideo = {
151                'event': 'command',
152                'func': 'playVideo',
153                'args': ''
154            };
155
156            $('.carousel-with-video-img .carousel').each((index, value) => {
157
158                if ($(value).attr('id')) {
159
160                    let carouselId = '#' + $(value).attr('id');
161
162                    /* initialise pause all videos */
163
164                    let sliderVideoAll = $(carouselId + ' .video-background iframe');
165
166                    let sliderVideoObjFromSecond = $(carouselId + ' .carousel-item:not([data-key=0]) .video-background iframe');
167
168                    sliderVideoObjFromSecond.each((index, item) => {
169                        item?.contentWindow?.postMessage(JSON.stringify(pauseVideo), '*');
170                    });
171
172                    $(value).on('slide.bs.carousel', function (e) {
173                        let previousSliderIndex = e.from;
174                        let nextSliderIndex = e.to;
175
176                        let silderVideoPlay = $(carouselId + ' .carousel-item[data-key=' + nextSliderIndex + '] .video-background iframe')[0];
177                        silderVideoPlay?.contentWindow?.postMessage(JSON.stringify(playVideo), '*');
178
179                        let silderVideoPause = $(carouselId + ' .carousel-item[data-key=' + previousSliderIndex + '] .video-background iframe')[0];
180                        silderVideoPause?.contentWindow?.postMessage(JSON.stringify(pauseVideo), '*');
181                    });
182
183                }
184
185            })
186
187        }
188    }, '2000');
189});