https://www.visitdickinson.com/Events/JS/Widgets/videoWidgetSimple.js?sv=8.6.3

1/*Video Widget*/
2if (isIE) { // include script for IE. For other browsers, it is included in a promise in functions.js
3  var ytTag = document.createElement('script');
4  
5  ytTag.src = "https://www.youtube.com/iframe_api";
6  var firstScriptTag = document.getElementsByTagName('script')[0];
7  firstScriptTag.parentNode.insertBefore(ytTag, firstScriptTag);
8}
9
10
11(function($) {
12
13    //Data service for the widget
14    function widgetDataService() {
15
16        this.getWidgetData = function(servicePath, widgetModuleItemID, successCallback, errorCallback) {
17            $.ajax({
18                type: "POST",
19                url: servicePath,
20                data: "{'widgetModuleItemID':" + widgetModuleItemID + "}",
21                contentType: "application/json; charset=utf-8",
22                dataType: "json",
23                success: successCallback,
24                error: errorCallback
25            });
26        };
27    };
28
29    //Global variable for the widget function
30    var widgetModuleItemID = 0;
31    var widgetData = null;
32    var autoPlayNext = false;
33    var detectIpad = false;
34    var multiVideo = false;
35    var trackGA = {}
36    var maxVideos = 4;
37    var hasImgBg = true;
38    var showOnMobile = false;
39    var startMuted = true;
40    var loopVideo = true;
41    var showControls = true;
42    var trackingGA = {
43      present: false,
44      event: 'event',
45      gaObj: {
46        eventCategory: 'Videos',
47        eventAction: '',
48        eventLabel: '',
49      }
50    };
51    var alwaysMuted = true;
52    var autoPlayVideo = false;
53    var playerVars = { "rel": 0, 'loop': 1, 'playsinline': 1 };
54    var videoWidgetLoaded = function(){};
55
56    //Constructor for the wiget
57    $.fn.videoWidget = function(options) {
58
59        var opts = $.extend({}, $.fn.videoWidget.defaultOptions, options);
60
61        widgetContainer = this;
62        widgetModuleItemID = opts.currentWidgetModuleItemID;
63        detectIpad = opts.detectIpad;
64        multiVideo = opts.multiVideo;
65        maxVideos = opts.maxVideos;
66        hasImgBg = opts.hasImgBg;
67        videoPaginate = opts.videoPaginate;
68        showOnMobile = opts.showOnMobile;
69        startMuted = opts.startMuted;
70        loopVideo = opts.loopVideo;
71        showControls = opts.showControls;
72        autoPlayNext = opts.autoPlayNext;
73        alwaysMuted = opts.alwaysMuted;
74        autoPlayVideo = opts.autoPlayVideo;
75        playerVars = opts.playerVars;
76        trackingGA = opts.trackingGA;
77        videoWidgetLoaded = opts.videoWidgetLoaded;
78
79        var widgetDataAdapter = new widgetDataService();
80
81        widgetDataAdapter.getWidgetData(opts.scriptPath, opts.currentWidgetModuleItemID, getWidgetDataSuccess, getWidgetDataError);
82
83    };
84
85    //Default options for the constructor to be merged with send constructor data
86    $.fn.videoWidget.defaultOptions = {
87        scriptPath: "services/eventsservice.asmx",
88        currentWidgetModuleItemID: 0,
89        detectIpad: false,
90        autoPlayNext: false,
91        multiVideo: false,
92        maxVideos: 4,
93        hasImgBg: true,
94        showOnMobile: false,
95        videoPaginate: false,
96        startMuted: true,
97        alwaysMuted: true,
98        loopVideo: true,
99        showControls: true, // Option to be added on template
100        autoPlayVideo: false,
101        trackingGA: {
102          present: false,
103          event: 'event',
104          gaObj: {
105            eventCategory: 'Videos',
106            eventAction: '',
107            eventLabel: '',
108          }
109        },
110        playerVars: {"rel": 0, 'loop': 1, 'controls': 1, 'playsinline': 1 },
111        videoWidgetLoaded: function(widgetData){}
112    };
113
114    //service call worked
115    var getWidgetDataSuccess = function(data) {
116
117        widgetData = data.d;
118        // Lazy load 
119        if (typeof window !== 'undefined' && window.IntersectionObserver) {
120          var videoWidgetContainer = $('#videoWidget')[0];
121          var intObsConfig = {
122            rootMargin: '200px 0px',
123            threshold: 0.1
124          };
125          var observer = new IntersectionObserver(function (entry, observer) {
126            if (entry[0].intersectionRatio > 0) {
127              initialize();
128              observer.unobserve(entry[0].target);
129            }
130          }, intObsConfig);
131          
132          observer.observe(videoWidgetContainer);
133        } else {
134          initialize();
135        }
136
137    };
138
139
140
141
142    //service call has failed
143    var getWidgetDataError = function(data) {
144
145        console.log('Video Widget failed to load', '\n' + 'Status: ' + data.status + ' ' + data.statusText, '\n' + data.responseText);
146    };
147
148
149    //set up the ui
150    function initialize() {
151        var countVideos = widgetData.Slides.length;
152        var videoIDs = [];
153        var playingIndex = 0;
154
155        for (var i = 0; i < countVideos; i ++) {
156          videoIDs.push(widgetData.Slides[i].Title);
157        }
158
159
160
161        if (countVideos > 0) {
162            var imagePath = widgetData.Slides[0].ImageWithPath;
163            var title = widgetData.Slides[0].Title;
164            var description = widgetData.Slides[0].Description;
165            var winWidth = $(window).width();
166            var checkResponsive = false;
167            if (winWidth < mobileSize && isResponsive) {
168                checkResponsive = true;
169                if (showOnMobile) {
170                    checkResponsive = false;
171                }
172            }
173
174            var imageAlternateText = "";
175
176            if (widgetData.Slides[0].ImageAlternateText != null) {
177                imageAlternateText = (widgetData.Slides[0].ImageAlternateText);
178            }
179
180
181            var getWidth = $('#videoWidget iframe').css('width');
182            var getHeight = $('#videoWidget iframe').css('height');
183            getWidth = getWidth.replace('px', '');
184            getHeight = getHeight.replace('px', '');
185            $('#videoWidget iframe').remove();
186            $('#videoWidget').prepend('<div id="youtubePlayer"></div>');
187
188            if (countVideos == 1) {
189              $('#videoSection').addClass('single-video');
190            }
191
192            if ( multiVideo ) {
193              if ( videoPaginate && countVideos > 1 ) {
194                $('#videoWidget').append('<div id="arrow-container"><div class="video-arrow previous" data-direction="-1"></div><div class="video-arrow next" data-direction="1"></div></div>');
195
196                $('.video-arrow').click(function() {
197                  var direction = playingIndex + parseInt($(this).attr('data-direction'));
198                  if (direction < 0) {
199                    playingIndex = videoIDs.length - 1;
200                  } else if ( direction > videoIDs.length - 1){
201                    playingIndex = 0;
202                  } else {
203                    playingIndex = direction;
204                  }
205                  if (trackingGA.present && player.getPlayerState() == 1) {
206                    console.log(player.getPlayerState());
207                    sendGA('Stopped', player.getVideoData().title, player.getCurrentTime());
208                  }
209                  player.loadVideoById(videoIDs[playingIndex]);
210                })
211              }
212              $('#videoWidget').append('<div id="videoSelector"><div id="videoList"></div></div>');
213              var thumbnails = [];
214
215              var i = 0;
216              videoIDs.forEach(function (videoID) {
217
218                  var imageAlternateText = "";
219
220                  if (widgetData.Slides[i].ImageAlternateText != null) {
221                      imageAlternateText = (widgetData.Slides[i].ImageAlternateText);
222                  }
223
224                  thumbnails.push("<div class='video-thumb'><img src='https://img.youtube.com/vi/" + videoID + "/0.jpg' alt=" + imageAlternateText + "></div>");
225                  i = i + 1;
226              });
227

228              thumbnails.forEach(function(thumbnail) {
229                $('#videoWidget #videoSelector #videoList').append(thumbnail);
230              });
231
232              $("#videoSelector .video-thumb:first-child").addClass("now-playing");
233
234              $('#videoSelector .video-thumb').click(function() {
235                playingIndex = $(this).index();
236                $("#videoSelector .video-thumb").removeClass("now-playing");
237                $(this).addClass("now-playing");
238                if (trackingGA.present && player.getPlayerState() == 1) {
239                  sendGA('Paused', player.getVideoData().title);
240                }
241                player.loadVideoById(videoIDs[playingIndex]);
242              });
243            }
244
245            if (showControls) {
246              playerVars.controls = 1;
247            } else{
248              playerVars.controls = 0;
249              $('#youtubePlayer').css('pointer-events','none')
250            }
251
252            var player;
253
254            player = new YT.Player('youtubePlayer', {
255                height: '390',
256                width: '640',
257                videoId: title,
258                playerVars: playerVars, 
259                events: {
260                  'onReady': onPlayerReady,
261                  'onStateChange': onPlayerStateChange
262                }
263            });
264
265
266
267
268            // 4. The API will call this function when the video player is ready.
269            function onPlayerReady(event) {
270              if (autoPlayVideo) {
271                event.target.playVideo();
272              }
273              if (startMuted) {
274                event.target.mute();
275              }
276
277            }
278
279            // 5. The API calls this function when the player's state changes.
280            //    The function indicates that when playing a video (state=1),
281            //    the player should play for six seconds and then stop.
282            var done = false;
283
284            function onPlayerStateChange(event) {
285              var currentTime = event.target.getCurrentTime();
286              if (event.data === YT.PlayerState.ENDED) {
287                // sendGA('Completed', event.target.getVideoData().title);
288                if (loopVideo && countVideos < 2) {
289                  event.target.playVideo();
290                } else if (autoPlayNext && countVideos >= 2) {
291                  $('.video-arrow.next').click();
292                }
293              } else if (event.data === YT.PlayerState.PAUSED && trackingGA.present) {
294                setTimeout(function() {
295                  if ( event.target.getPlayerState() == 2 ) {
296                    sendGA('Paused', event.target.getVideoData().title, event.target.currentTime);
297                  }
298                }, 1000)
299              } else if (event.data === YT.PlayerState.PLAYING && trackingGA.present && currentTime < 1) {
300                sendGA('Play', event.target.getVideoData().title);
301              }
302            }
303
304            function stopVideo() {
305                player.stopVideo();
306            }
307
308            function unMutePlayer() {
309                player.unMute();
310            }
311
312            if (!alwaysMuted) {
313              $('#videoWidget').mouseenter(function() {
314                unMutePlayer();
315              });
316            }
317        } else {
318          $('body').addClass('noVideos');
319        }
320
321        videoWidgetLoaded(widgetData);  // callback if needed for the constructor
322    }
323
324    function sendGA(action, title, time) {
325      trackingGA.gaObj.eventAction = action;
326      trackingGA.gaObj.eventLabel = title;
327      if (time) {
328        trackingGA.gaObj.eventValue = time / 60;
329      } else if (trackingGA.gaObj.eventValue) {
330        delete trackingGA.gaObj.eventValue;
331      }
332      ga('send', 'event', trackingGA.gaObj);
333    }
334
335//
336})(jQuery);