-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvideo-popup.min.js
1 lines (1 loc) · 2.91 KB
/
video-popup.min.js
1
var isVideoDisplayed=!1;const videoTemplate="<div id='videopopup-videowrapper'><video id='videopopup-popupvideo' width='vidwidth' height='vidheight'><source src='vidsrc' type='video/mp4'></video><button id='videopopup-skipbutton' style='display:none'>skip</button><div style='display:none' id='videopopup-closebutton'>x</div></div>";function VideoPopup(e,o,i=!1){if(!isVideoDisplayed){if("string"==typeof o&&("small"===o||"medium"===o||"large"===o?"small"===o?o={width:320,height:240}:"medium"===o?o={width:480,height:360}:"large"===o&&(o={width:640,height:480}):console.error('VideoPopup size is a string, but is not "small", "medium", or "large".')),"object"==typeof o){if("width"in o)var t=!0;else t=!1;if("height"in o)var p=!0;else p=!1;if(p||p||console.error("VideoPopup missing width and height parameters in size."),p||console.error("VideoPopup missing height parameter in size."),t||console.error("VideoPopup missing width parameter in size."),p&&t){o={width:o.width,height:o.height},document.body.innerHTML+=videoTemplate.replace("vidsrc",e).replace("vidwidth",o.width).replace("vidheight",o.height),isVideoDisplayed=!0;var d=document.getElementById("videopopup-popupvideo");document.getElementById("videopopup-closebutton").style.bottom=o.height-24+"px",d.play();var n=!0,r=!1;function s(){if(d.duration<=5)i=!1;else if(i){var e=document.getElementById("videopopup-skipbutton");r||d.currentTime>=5&&(e.style.bottom=o.height/6+"px",e.style.display="inline-block")}r&&(document.getElementById("videopopup-closebutton").style.display="inline-block")}}}else console.error('VideoPopup size is not a string or an object. It can be a string (ex. "medium"), or an object (ex. {width:512, height:288})');d.onended=function(){r=!0,document.getElementById("videopopup-skipbutton").style.display="none"};d.onloadedmetadata=function(){!function e(){r||(n?(s(),setTimeout(e,20)):setTimeout(e,20));s()}()}}document.getElementById("videopopup-closebutton").addEventListener("click",function(){removeElement("videopopup-closebutton"),removeElement("videopopup-skipbutton"),removeElement("videopopup-popupvideo"),removeElement("videopopup-videowrapper"),isVideoDisplayed=!1}),document.getElementById("videopopup-skipbutton").addEventListener("click",function(){d.currentTime=d.duration-.01})}function removeElement(e){var o=document.getElementById(e);o.parentNode.removeChild(o)}document.head.innerHTML+="<style>#videopopup-popupvideo{display:inline-block;position:absolute;right:0;bottom:0;border:solid #000 1px;box-shadow:2px 2px;margin:4px;background-color:#fff}#videopopup-skipbutton{position:absolute;right:0;margin:0;width:80px;height:36px;background-color:#666666DD;margin:4px;border:none;cursor:pointer}#videopopup-closebutton{border-radius:50%;color:#fff;background-color:#000;width:20px;height:20px;text-align:center;font-family:Arial,Helvetica,sans-serif;right:4px;margin:4px;position:absolute;cursor:pointer}#videopopup-videowrapper{position:fixed;right:0;bottom:0}</style>";