I have this site here, it has a vedio popup:
ISSUE::- If you click on the above video thumbnail , a popup will appear , now in chrome this popup appears just fine, but in IE and IOS sometimes when i click on the link, it just moves to the top of the page. (default anchor behavior). In IE sometimes the popup opens and the video plays , then when i hard refresh the video does't play anymore.
MY DIAGNOSIS::- Alot of the plugins for this vedio modal are being loaded via require.js , such as modalvideotrigger.js, the click handler for the video is being attached on line 179 of the modalvideotrigger.js file like so:
$jquery("a[data-videomodal='true']").bind("click", { "module": module }, module.onVideoModalClick); If I attach a breakpoint in IE on this line when the video popup is not working, the line is never hit.
I have a file script2.js in which the plugin is initialized like so:
require(["/Content/Shared/Core/js/RequireJs/config.js"], function () { require(["core/Mylan/mylanmanager", "core/Mylan/Modules/moduleUtils", "core/Mylan/Modules/modalvideotrigger"], function (mylanmanager, utils, modalvideotrigger) { var settings = { AspectRatio: '16:9', EnableProgressionTracking: false, ProgressionTrackingReportingInterval: 0, ProgressionTrackingCategory: 'video', ProgressionTrackingAction: 'playback', ProgressionTrackingLabelOverride: null, ProgressionTrackingValueOverride: 0, GtmEventName: 'VideoProgressionTracking' }; mylanmanager.registerModule(new modalvideotrigger("Hero Video Slide", settings)); } ); }); My config file for require.js looks like so:
require.config({ baseUrl: "/Content", paths: { "core": "Shared/Core/js", "jquery": "Shared/Core/js/jQuery/jquery", "jqueryui": "Shared/Core/js/jQuery/jquery-ui", "jquerytooltabs": "Shared/Core/js/jquery.tool.tabs", "modernizr": "Shared/Core/js/Modernizr/modernizr", "html5shiv": "Shared/Core/js/Html5Shiv/html5shiv", "jwplayer": "Shared/Core/js/JWPlayer/jwplayer", "bxslider": "Shared/Core/js/BxSlider/bxslider", "componentcatalog": "Shared/Core/js/Mylan/componentCatalog", "validate":"Shared/Core/js/jquery.validate.min", "unobtrusive": "Shared/Core/js/jquery.validate.unobtrusive.min", "validatehooks": "Shared/Core/js/jquery.validate.hooks", "easing": "Shared/Core/js/jquery.easing.1.3", "waitforimages": "Shared/Core/js/jquery.waitforimages", "idletimer": "Shared/Core/js/jquery.idle-timer.min", "skrollr": "Shared/Core/js/Skrollr/skrollr.min", "skrollrmenu": "Shared/Core/js/Skrollr/skrollr.menu.min", "jquerymask": "Shared/Core/js/jquery.mask", }, shim: { "bxslider": ["jquery"], "validate": ["jquery"], "unobtrusive": ["jquery", "validate"], "easing": ["jquery"], "validatehooks": ["jquery", "validate", "unobtrusive"], "waitforimages": ["jquery"], "idletimer": ["jquery"], "skrollrmenu": ["skrollr"], "jqueryui": ["jquery"], "jquerytooltabs": ["jquery"] }, waitSeconds: 0 //25 }); I have tried increasing the waitsecounds to waitSeconds: 25, but the bug still persists.
Can somebody point me out as to whats going wrong here and why this video modal is not working consistently in IE11 and iOS?
0 comments:
Post a Comment