video.min.js

export class VJSVideo{constructor(e){this.ele=e,this.type=e.getAttribute("type"),this.videoId=e.getAttribute("videoId"),this.fallbackImage=e.getAttribute("fallbackImage"),this.loop=!!this.ele.getAttribute("loop")&&("loop"===this.ele.getAttribute("loop")||"true"===this.ele.getAttribute("loop")),this.autoplay=!!this.ele.getAttribute("autoplay")&&("autoplay"===this.ele.getAttribute("autoplay")||"true"===this.ele.getAttribute("autoplay")),this.controls=!!this.ele.getAttribute("controls")&&("controls"===this.ele.getAttribute("controls")||"true"===this.ele.getAttribute("controls")),this.muted=!!this.autoplay||!!this.ele.getAttribute("muted")&&("muted"===this.ele.getAttribute("muted")||"true"===this.ele.getAttribute("muted")),this.playingInBackground=e.parentNode.classList.contains("video-fullscreen-bg"),this.playingInCard=e.parentNode.classList.contains("video-card"),this.playingInElement=this.playingInBackground||this.playingInCard,this._div,this.init()}init(){let{ele:e,type:t,videoId:i,fallbackImage:o,loop:l,autoplay:a,controls:n,muted:r,playingInElement:d,playingInCard:s,_div:c}=this,u="";u+=`\n        <div class='video-fallbackimage--container'>\n          <i class="video-fallbackimage--btn fas fa-play-circle fa-3x  ${s?"margin--150t white":"va-red"}"></i>\n        </div>         \n        `;let p=e.parentNode.parentNode.querySelector(".video-external-btn");p&&(p.style.zIndex=2,p.addEventListener("click",()=>{this.loadVideo(!0),e.parentNode.parentNode.removeChild(p)})),o?((c=document.createElement("div")).innerHTML=`\n        <div class="${d?"video-ready":"video-container video-ready"}" >\n          <div class='video-fallbackimage--image' style='background: url(${o}) no-repeat center center; background-size: cover;'>\n          </div>  \n          ${u}\n        </div>\n        `,e.parentNode.insertBefore(c,e),e.parentNode.querySelectorAll(".video-ready").forEach(e=>{e.querySelectorAll(".video-fallbackimage--btn").forEach(t=>{t.onclick=(()=>{e.parentNode.removeChild(e),this.loadVideo(!0)})})})):this.loadVideo()}loadVideo(e=!1){let{ele:t,type:i,videoId:o,fallbackimage:l,loop:a,autoplay:n,controls:r,muted:d,playingInElement:s,_div:c}=this;switch(i){case"venmo":r=!n&&r,e&&(a=!0,n=!0,r=!0),(c=document.createElement("div")).innerHTML=`\n            <div class="${s?"":"video-container"}" >\n              <iframe src="https://player.vimeo.com/video/${o}?autoplay=${n?1:0}&loop=${a?1:0}&autopause=${a?1:0}&background=${r?0:1}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen >\n            </div>\n          `,t.parentNode.insertBefore(c,t);break;case"youtube":e&&(a=!0,n=!0,r=!1),(c=document.createElement("div")).innerHTML=`\n            <div class="${s?"":"video-container"}" >      \n              <iframe id="ytplayer" type="text/html" src="https://www.youtube.com/embed/${o}?autoplay=${n?1:0}&loop=${a?1:0}&autopause=${a?1:0}&controls=${r?1:0}&mute=${d?1:0}&fs=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen >\n            </div>\n          `,t.parentNode.insertBefore(c,t);break;case"local":e&&(a=!1,n=!0,r=!0),(c=document.createElement("div")).innerHTML=`\n            <div class="${s?"":"video-container"}" >\n              <video ${n?"autoPlay":""}  ${d?"muted":""}  ${a?"loop":""} ${r?"controls":""}>              \n                    <source src='${o}' type="video/mp4" />        \n              </video> \n            </div>\n          `,t.parentNode.insertBefore(c,t)}}};